Ability to list user fav, stored in firestore

TPH777 · Jul 11, 2024 · f120751 · f120751
1 parent 4922be3
commit f120751
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 18 deletions.
diff --git a/src/functions/GetFav.tsx b/src/functions/GetFav.tsx
@@ -0,0 +1,18 @@
+import { doc, getDoc } from "firebase/firestore";
+import { db } from "../config/firebase";
+import { User } from "firebase/auth";
+
+interface favList {
+  favorites: string[];
+}
+
+export const getFavFoodList = async (currentUser: User) => {
+  try {
+    const docRef = doc(db, "consumer", currentUser.uid);
+    const docSnap = await getDoc(docRef);
+    const consumerData = (await docSnap.data()) as favList;
+    return consumerData.favorites;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
@@ -5,6 +5,9 @@ import { Search } from "../components/Search";
 import { FoodItem } from "../interface/FoodItem";
 import { timestampToString } from "../functions/Date";
 import { getFoodList } from "../functions/GetFood";
+import { useAuth } from "../context/Auth";
+import { getFavFoodList } from "../functions/GetFav";
+// import { HeartSwitch } from "@anatoliygatt/heart-switch";
 
 export function FavoritePage() {
   const [foodList, setFoodList] = useState<FoodItem[]>([]);
@@ -13,25 +16,36 @@ export function FavoritePage() {
   const [sort, setSort] = useState<string>("~Sort~");
   const [business, setBusiness] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { user, isConsumer } = useAuth();
 
   const fetchFoodList = async () => {
+    setIsLoading(true);
     try {
-      setIsLoading(true);
       const updatedFoodList = await getFoodList();
-      const postedFoodList = updatedFoodList.filter((food) => {
-        // Display posted food items only
-        return food.post === true;
-      });
-      setFoodList(postedFoodList);
-      setIsLoading(false);
+      const postedFoodList = updatedFoodList.filter(
+        (food) => food.post === true
+      );
+      let finalFoodList = postedFoodList;
+
+      if (user && isConsumer) {
+        const userFavList = await getFavFoodList(user); // Array of string of food.id of user favorites
+        finalFoodList = postedFoodList.filter((food) =>
+          userFavList.includes(food.id)
+        );
+      }
+
+      setFoodList(finalFoodList);
     } catch (error) {
       console.error("Error fetching food items:", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
+  // To wait for async auth
   useEffect(() => {
     fetchFoodList();
-  }, []);
+  }, [user, isConsumer]);
 
   const searchFoodList = foodList.filter((food) => {
     const nameMatches = food.name.toLowerCase().includes(search.toLowerCase()); // Search Bar
@@ -43,7 +57,7 @@ export function FavoritePage() {
   searchFoodList.sort((a, b) => {
     // Sort
     if (sort === "Name") {
-      return a.name > b.name ? 1 : -1;
+      return a.name.localeCompare(b.name);
     } else if (sort === "Price") {
       return a.price > b.price ? 1 : -1;
     } else if (sort === "Cuisine") {
@@ -88,11 +102,7 @@ export function FavoritePage() {
                 <Card.Body>
                   <Card.Title>{food.name}</Card.Title>
                   <Card.Subtitle>${food.price}</Card.Subtitle>
-                  <Card.Text>
-                    {food.date
-                      ? `Date: ${timestampToString(food.date)}`
-                      : "No Date"}
-                  </Card.Text>
+                  <Card.Text>Date: ${timestampToString(food.date)}</Card.Text>
                   <Badge
                     style={{ cursor: "pointer" }}
                     pill
@@ -111,6 +121,12 @@ export function FavoritePage() {
                   >
                     {food.business}
                   </Badge>
+                  {/* <HeartSwitch
+                    checked={checkedFav}
+                    onChange={(event) => {
+                      handleFavChange(event.target.checked, food.id)
+                    }}
+                  /> */}
                 </Card.Body>
               </Card>
             </Col>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -5,6 +5,8 @@ import { Search } from "../components/Search";
 import { FoodItem } from "../interface/FoodItem";
 import { timestampToString } from "../functions/Date";
 import { getFoodList } from "../functions/GetFood";
+import { useAuth } from "../context/Auth";
+import { getFavFoodList } from "../functions/GetFav";
 // import { HeartSwitch } from "@anatoliygatt/heart-switch";
 
 export function Home() {
@@ -14,24 +16,32 @@ export function Home() {
   const [sort, setSort] = useState<string>("~Sort~");
   const [business, setBusiness] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [favList, setFavList] = useState<string[]>([]);
+  const { user, isConsumer } = useAuth();
 
   const fetchFoodList = async () => {
+    setIsLoading(true);
     try {
-      setIsLoading(true);
       const updatedFoodList = await getFoodList();
       const postedFoodList = updatedFoodList.filter((food) => {
         return food.post === true; // Display posted food items only
       });
       setFoodList(postedFoodList);
-      setIsLoading(false);
+      if (user && isConsumer) {
+        const userFavList = await getFavFoodList(user);
+        setFavList(userFavList);
+      }
     } catch (error) {
       console.error("Error fetching food items:", error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
+  // To wait for async auth
   useEffect(() => {
     fetchFoodList();
-  }, []);
+  }, [user, isConsumer]);
 
   const searchFoodList = foodList.filter((food) => {
     const nameMatches = food.name.toLowerCase().includes(search.toLowerCase()); // Search Bar
@@ -43,7 +53,7 @@ export function Home() {
   searchFoodList.sort((a, b) => {
     // Sort
     if (sort === "Name") {
-      return a.name > b.name ? 1 : -1;
+      return a.name.localeCompare(b.name);
     } else if (sort === "Price") {
       return a.price > b.price ? 1 : -1;
     } else if (sort === "Cuisine") {