searching complete/

Author: druvkotwani

client/src/App.jsx

@@ -2,25 +2,27 @@ import Navbar from "./components/Navbar";
 import Stat from "./components/Stat";
 import StatsGenerator from "./components/StatsGenerator";
 import { useEffect, useState } from "react";
-import { collection, getDocs } from "firebase/firestore";
+import { collection, getDocs, onSnapshot } from "firebase/firestore";
 import { firestore } from "./firebase";
 
 import "./App.css";
 
 export default function App() {
   const [showStats, setShowStats] = useState(false);
-
   const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
 
   useEffect(() => {
     const getContacts = async () => {
       try {
         const dataCollection = collection(firestore, "users_stats");
-        const dataSnapshot = await getDocs(dataCollection);
-        const dataList = dataSnapshot.docs.map((doc) => {
-          return doc.data()
-        })
-        setData(dataList);
+        const unsubscribe = onSnapshot(dataCollection, (snapshot) => {
+          const dataList = snapshot.docs.map((doc) => doc.data());
+          setData(dataList);
+          setFilteredData(dataList);
+        });
+        // Return a cleanup function to unsubscribe from the snapshot listener when the component unmounts
+        return () => unsubscribe();
       } catch (error) {
         console.log(error);
       }
@@ -29,6 +31,13 @@ export default function App() {
     getContacts();
   }, []);
 
+  const handleSearch = (query) => {
+    const filtered = data.filter((item) =>
+      item.username.toLowerCase().includes(query.toLowerCase())
+    );
+    setFilteredData(filtered);
+  };
+
   useEffect(() => {
     // Set an interval to toggle the animation class every 5 seconds
     const interval = setInterval(() => {
@@ -52,12 +61,12 @@ export default function App() {
             <path fillRule="evenodd" clipRule="evenodd" d="M49.9118 2.02335C52.3173 -0.55232 56.3517 -0.686894 58.9228 1.72277C61.494 4.13244 61.6284 8.17385 59.2229 10.7495L16.4276 56.5729C11.7768 61.552 12.2861 69.5738 17.6453 74.8292L37.4088 94.2091C39.9249 96.6764 39.968 100.72 37.505 103.24C35.042 105.761 31.0056 105.804 28.4895 103.337L8.72593 83.9567C-1.42529 74.0021 -2.43665 58.0741 7.1169 47.8463L49.9118 2.02335Z" fill="white"></path>
           </svg>
         </button>
-        <Navbar />
+        <Navbar onSearch={handleSearch} />
         <div className="flex flex-col mx-auto max-w-screen-xl px-2 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 gap-4 py-4 ">
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {
-                data.map(data => (
+                filteredData.map(data => (
                   <Stat key={data.username} data={data} />
                 ))
               }

client/src/components/Navbar.jsx

@@ -1,6 +1,21 @@
 import React from 'react'
+import { useState } from 'react'
+
+const Navbar = ({ onSearch }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const handleSearch = (e) => {
+        const query = e.target.value;
+        setSearchQuery(query);
+        onSearch(query);
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault(); // Prevent form submission
+            onSearch(searchQuery); // Trigger search when Enter is pressed
+        }
+    };
 
-const Navbar = () => {
     return (
         <div className='sticky top-0 z-50 bg-[#292829] shadow-lg border-b border-[#E0E0E0] overflow-hidden'>
             <div className='mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8  '>
@@ -19,12 +34,13 @@ const Navbar = () => {
 
                         {/* Search Bar */}
                         <div className="hidden sm:block">
-                            <form className="flex items-center w-80">
+                            <div className="flex items-center w-80">
                                 <label htmlFor="simple-search" className="sr-only">Search</label>
                                 <div className="relative w-full">
-                                    <input type="text" id="simple-search" className="border border-gray text-sm rounded-lg block shadow w-full pl-3 p-2.5  bg-[#0e0e0e]  border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="Search by Name or Username..." required="" />
+                                    <input type="text" id="simple-search" className="border border-gray text-sm rounded-lg block shadow w-full pl-3 p-2.5  bg-[#0e0e0e]  border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={searchQuery}
+                                        onChange={handleSearch} onKeyDown={handleKeyPress} placeholder="Search by Name or Username..." required="" />
                                 </div>
-                            </form>
+                            </div>
                         </div>
 
                         {/* icons */}
@@ -47,12 +63,12 @@ const Navbar = () => {
 
                             {/* Smaller devices */}
                             <div className="sm:hidden flex gap-2">
-                                <form className="items-center flex">
+                                <div className="items-center flex">
                                     <label htmlFor="simple-search" className="sr-only">Search</label>
                                     <div className="relative w-full">
-                                        <input type="text" id="simple-search" className="border border-gray text-sm rounded-lg block w-full pl-3 p-2.5  bg-[#0e0e0e] border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 shadow focus:border-blue-500" placeholder="Search user profile..." required="" />
+                                        <input type="text" id="simple-search" value={searchQuery} className="border border-gray text-sm rounded-lg block w-full pl-3 p-2.5  bg-[#0e0e0e] border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 shadow focus:border-blue-500" onChange={handleSearch} onKeyDown={handleKeyPress} placeholder="Search user profile..." required="" />
                                     </div>
-                                </form>
+                                </div>
                                 <div className='flex'>
                                     <a className="rounded-md bg-[#0e0e0e] text-white hover:bg-[#292829] border border-gray-600 px-3 ml-1 py-2.5 text-sm font-medium  shadow" href="https://github.com/druvkotwani/Leetcode-Profiles/">⭐</a>
                                     <a className="rounded-md bg-[#0e0e0e] text-white hover:bg-[#292829] border border-gray-600 px-3 ml-1 py-2 text-sm font-medium  shadow" href="https://linkedin.com/in/dhruv-kotwani">

client/src/components/StatsGenerator.jsx

@@ -101,8 +101,22 @@ export default function StatsGenerator({ setShowStats }) {
         });
     }
 
+    function wrongUsername() {
+        toast.warn('I think!! your username is not correct', {
+            position: "top-center",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+        });
+    }
+
 
-    const addData = async () => {
+    const addData = async (e) => {
+        e.preventDefault();
         try {
             const transformedUserData = transformUserData(userData);
             const dataCollection = collection(firestore, "users_stats")
@@ -120,7 +134,6 @@ export default function StatsGenerator({ setShowStats }) {
             } else {
                 console.log("User data already exists in Firestore.");
                 dataThere()
-
             }
         }
         catch (err) {
@@ -134,14 +147,7 @@ export default function StatsGenerator({ setShowStats }) {
 
     function handleSubmit(e) {
         e.preventDefault();
-        if (userName.trim() !== '') {
-            // Proceed with the action since the input is not empty
-            // Your logic here
-        } else {
-            // Input is empty, show an error message or prevent the action
-            // For now, let's just console log a message
-            console.log('Please enter a username.');
-        }
+
         setLoading(true); // Start loading when fetching data
         // Make an HTTP request to your backend
         axios.get(`https://bakcen.onrender.com/${userName}`)
@@ -151,12 +157,11 @@ export default function StatsGenerator({ setShowStats }) {
                 setLoading(false); // Stop loading after data is fetched
             })
             .catch(error => {
+                wrongUsername()
                 console.error('Error fetching data:', error);
             });
     }
 
-
-
     return (
         <div className="flex justify-center flex-col items-center">
 
@@ -206,7 +211,7 @@ export default function StatsGenerator({ setShowStats }) {
 
 
             {/* Buttons + Input */}
-            <form className="flex items-center w-80">
+            <form className="flex items-center w-80" onSubmit={addData}>
                 <label htmlFor="simple-search" className="sr-only">Search</label>
                 <div className="relative w-full">
                     <input onChange={handleInputChange} type="text" id="simple-search" className="border border-gray text-sm rounded-lg block shadow w-full pl-3 p-2.5  bg-[#0e0e0e]  border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="Enter the username to Generate Stats..." required="" />