test(searchbar): test the search bar component

#13
202306-NEA-DZ-FEW · Oct 21, 2023 · 0beaa3d · 0beaa3d
1 parent 35dcb38
commit 0beaa3d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { ImSearch } from "react-icons/im";
-import { collection, query, where, getDocs } from "firebase/firestore";
+import { collection, query, onSnapshot } from "firebase/firestore";
 import { db } from "@/util/firebase";
 
 const SearchBar = () => {
@@ -18,22 +18,21 @@ const SearchBar = () => {
             return;
         }
         // Use array-contains for case-insensitive search
-        q = query(
-            collection(db, "products"),
-            where("name", "array-contains", searchTerm.toLowerCase())
-        );
-        try {
-            const querySnapshot = await getDocs(q);
+        q = query(collection(db, "products"));
+
+        onSnapshot(q, (snapshot) => {
             const productsArray = [];
-            querySnapshot.forEach((doc) => {
-                productsArray.push({ id: doc.id, ...doc.data() });
+            snapshot.forEach((doc) => {
+                const data = doc.data();
+                if (
+                    data.name.toLowerCase().includes(searchTerm.toLowerCase())
+                ) {
+                    productsArray.push({ id: doc.id, ...data });
+                }
             });
             setProducts(productsArray);
             setLoading(false);
-        } catch (error) {
-            console.error("Error getting products: ", error);
-            setLoading(false);
-        }
+        });
     };
 
     useEffect(() => {

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -4,11 +4,9 @@ import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import * as React from "react";
 import { db } from "@/util/firebase";
-import { useCollection } from "react-firebase-hooks/firestore";
 import { collection, getDocs } from "firebase/firestore";
 import Layout from "@/layout/Layout";
 import SearchBar from "@/components/SearchBar/SearchBar";
-import { Firestore } from "firebase/firestore";
 import { onSnapshot } from "firebase/firestore";
 
 export default function HomePage() {