Added fav count beside HeartSwitch

TPH777 · Jul 13, 2024 · d1af53f · d1af53f
1 parent 5bc6da0
commit d1af53f
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 24 deletions.
diff --git a/src/components/ConCards.tsx b/src/components/ConCards.tsx
@@ -1,4 +1,4 @@
-import { Badge, Card, Col, Row } from "react-bootstrap";
+import { Badge, Card, Col, Container, Row } from "react-bootstrap";
 import { timestampToString } from "../functions/Date";
 import { HeartSwitch } from "@anatoliygatt/heart-switch";
 import { FoodItem } from "../interface/FoodItem";
@@ -53,11 +53,18 @@ export const ConCards = ({
               {food.business}
             </Badge>
             {/* HeartSwitch to toggle favorite status */}
-            <HeartSwitch
-              size="sm"
-              checked={favList.includes(food.id)}
-              onChange={() => toggleFavorite(food.id)}
-            />
+            <Container className="mt-2">
+              <Row className="justify-content-md-end">
+                <Col xs={2}>
+                  <HeartSwitch
+                    size="sm"
+                    checked={favList.includes(food.id)}
+                    onChange={() => toggleFavorite(food.id)}
+                  />
+                </Col>
+                <Col xs={1}>{food.favoriteCount || 0}</Col>
+              </Row>
+            </Container>
           </Card.Body>
         </Card>
       </Col>

diff --git a/src/interface/FoodItem.ts b/src/interface/FoodItem.ts
@@ -9,4 +9,5 @@ export interface FoodItem {
   business: string;   // Name of the business posted the food item
   imageURL: string;   // URL to the image of the food item
   imagePath: string;  // Path to access the image of the food item in firebase storage
+  favoriteCount: number;
 }
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -19,9 +19,11 @@ export function Dashboard() {
   let navigate = useNavigate();
   if (!user) {
     navigate("/login");
+    return;
   }
   if (isConsumer) {
     navigate("/");
+    return;
   }
 
   const [isAdding, setIsAdding] = useState<boolean>(false); // State for adding a new food item
@@ -107,7 +109,7 @@ export function Dashboard() {
 
       {!isLoading && !isAdding && !isEditing && (
         <>
-          <h1 className="mb-4">{user?.displayName}'s Dashboard</h1>
+          <h1 className="mb-4">{user.displayName}'s Dashboard</h1>
           <div className="d-grid gap-2 mb-4">
             {/* Button to add new food */}
             <button

diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
@@ -6,7 +6,7 @@ import { getFoodList } from "../functions/GetFood";
 import { useAuth } from "../context/Auth";
 import { getFavFoodList } from "../functions/GetFav";
 import { useNavigate } from "react-router-dom";
-import { doc, updateDoc } from "firebase/firestore";
+import { doc, increment, updateDoc } from "firebase/firestore";
 import { db } from "../config/firebase";
 import { deleteWarning } from "../functions/Alert";
 import { ConCards } from "../components/ConCards";
@@ -78,19 +78,21 @@ export function FavoritePage() {
 
   // Function to toggle favorite status of a food item
   const toggleFavorite = useCallback(async (foodId: string) => {
-    if (!user) {
-      navigate("/login");
-    } else {
-      const confirm = await deleteWarning();
-      if (confirm) {
-        setFoodList((prev) => {
-          const newFavList = prev.filter((food) => food.id !== foodId);
-          updateDoc(doc(db, "consumer", user.uid), {
-            favorites: newFavList.map((f) => f.id),
-          });
-          return newFavList;
+    const confirm = await deleteWarning();
+    if (confirm) {
+      setFoodList((prev) => {
+        // Remove from favorites
+        const newFavList = prev.filter((food) => food.id !== foodId);
+        updateDoc(doc(db, "consumer", user.uid), {
+          favorites: newFavList.map((f) => f.id),
         });
-      }
+
+        // Decrement favorite count in Firestore
+        updateDoc(doc(db, "food", foodId), {
+          favoriteCount: increment(-1),
+        });
+        return newFavList;
+      });
     }
   }, []);
 

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -6,7 +6,7 @@ import { getFoodList } from "../functions/GetFood";
 import { useAuth } from "../context/Auth";
 import { getFavFoodList } from "../functions/GetFav";
 import { useNavigate } from "react-router-dom";
-import { doc, updateDoc } from "firebase/firestore";
+import { doc, increment, updateDoc } from "firebase/firestore";
 import { db } from "../config/firebase";
 import { ConCards } from "../components/ConCards";
 
@@ -72,10 +72,30 @@ export function Home() {
       navigate("/login"); // Redirect to login if not logged in
     } else {
       setFavList((prev) => {
-        const newFavList = prev.includes(foodId)
-          ? prev.filter((id) => id !== foodId) // Remove from favorites
-          : [...prev, foodId]; // Add to favorites
+        const add = !prev.includes(foodId);
+        const newFavList = add
+          ? [...prev, foodId] // Add to favorites
+          : prev.filter((id) => id !== foodId); // Remove from favorites
         updateDoc(doc(db, "consumer", user.uid), { favorites: newFavList }); // Update in Firestore
+
+        // Update favorite count in Firestore
+        updateDoc(doc(db, "food", foodId), {
+          favoriteCount: add ? increment(1) : increment(-1),
+        });
+
+        // Update local state for favorite count
+        setFoodList((prevFoodList) =>
+          prevFoodList.map((food) =>
+            food.id === foodId
+              ? {
+                  ...food,
+                  favoriteCount: add
+                    ? food.favoriteCount + 1
+                    : food.favoriteCount - 1,
+                }
+              : food
+          )
+        );
         return newFavList;
       });
     }