Added basic search feature

vault/src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import './App.css';
 import { Routes, Route } from 'react-router-dom';
+import Home from "./Components/Home/Home";
 import LoginForm from './Components/LoginForm/LoginForm';
 import RegistrationForm from "./Components/RegistrationForm/RegistrationForm";
-import Home from "./Components/Home/Home";
+import Search from "./Components/Search/Search";
+
 
 function App() {
 
@@ -13,6 +15,7 @@ function App() {
           <Route path="/login" element={<LoginForm />} />
           <Route path="/register" element={<RegistrationForm />} />
           <Route path="/home" element={<Home />} />
+          <Route path="/search" element={<Search />} />
       </Routes>
   );
 }

vault/src/Components/Search/Search.css

@@ -0,0 +1,71 @@
+.search-section {
+    width: 20%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 200px;
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.search-input-wrapper {
+    background-color: white;
+    width: 100%;
+    border-radius: 10px;
+    height: 2.5rem;
+    padding: 0 15px;
+    box-shadow: 0px 0px 8px #ddd;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.search {
+    flex: 1;
+    padding: 0 20px;
+    font-size: 20px;
+    background-color: transparent;
+    border: none;
+}
+
+.search:focus {
+    outline: none;
+}
+
+.search-icon {
+    cursor: pointer;
+}
+
+.search-result {
+    width: 100%;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 8px #ddd;
+    border-radius: 10px;
+    margin-top: 1rem;
+    max-height: 300px;
+    overflow-y: scroll;
+    position: absolute;
+    top: 75%;
+    z-index: 10;
+}
+
+.search-result::-webkit-scrollbar {
+    display: none;
+}
+
+.search-suggestion-line {
+    text-decoration: none;
+    color: black;
+    flex-direction: column;
+    padding: 10px 20px;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.search-suggestion-line:hover {
+    background: #efefef;
+}

vault/src/Components/Search/Search.jsx

@@ -0,0 +1,66 @@
+import React, {useState, useEffect} from 'react';
+import { FaSearch } from 'react-icons/fa';
+import { ImCross } from 'react-icons/im';
+
+import './Search.css';
+
+
+export const Search = () => {
+    const [search, setSearch] = useState('');
+    const [searchData, setSearchData] = useState([]);
+
+    const handleChange = e => {
+        setSearch(e.target.value)
+    };
+
+    const handleClose = () => {
+        setSearch('');
+        setSearchData([]);
+    }
+
+    useEffect(() => {
+        if(search !== '') {
+            fetch(`http://127.0.0.1:5000/search?q=${search}`)
+            .then((res) => res.json())
+            .then((data) => setSearchData(data));
+        } else {
+            setSearchData([]);
+        }
+    }, [search])
+
+    return (
+        <div className='search-section'>
+            <div className='search-input-wrapper'>
+                <div className='search-icon' > 
+                    {search === '' ? (
+                        <FaSearch />
+                    ) : (
+                        <ImCross onClick={handleClose} />
+                    )}
+                </div>
+                <input
+                    type='text'
+                    className='search'
+                    placeholder='Search...'
+                    autoComplete='off'
+                    onChange={handleChange}
+                    value={search}
+                />
+            </div>
+            <div className='search-result'>
+                {searchData.map((data, index) => {
+                    return (
+                        <a 
+                            href={data.username} 
+                            key={index} 
+                            target='_blank' 
+                            className='search-suggestion-line'>
+                            {data.username}
+                        </a>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+export default Search;

vault/src/backend/app.py

@@ -186,6 +186,29 @@ def create_post():
 
     return jsonify({"message": "Post created!"}), 201
 
+# Searching for users
+@app.route('/search', methods=['GET'])
+def search():
+    query = request.args.get('q', '')
+
+    conn = get_db_connection()
+    cursor = conn.cursor()
+
+    # Search users by username and gets usernames (and profile pic later)
+    cursor.execute('''
+        SELECT username FROM users
+        WHERE username LIKE ? LIMIT 7
+    ''', ('%' + query + '%',)) # Match any part of the username
+
+    results = cursor.fetchall()
+
+    # Format the results as a list of dictionaries
+    users = [{'username': row[0]} for row in results]
+
+    conn.close()
+
+    return jsonify(users)
+
 
 if __name__ == '__main__':
     init_db()

vault/src/index.css

@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 * {
-  margin:0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
   box-sizing: border-box;
 }