Functional heart switch

TPH777 · Jul 12, 2024 · 4073675 · 4073675
1 parent f120751
commit 4073675
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 60 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,6 +5,9 @@
   background-position: center;
   background-repeat: repeat;
   height: 200vh;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 
 .card-img-top {

diff --git a/src/components/Heart.tsx b/src/components/Heart.tsx
@@ -0,0 +1,9 @@
+export const HeartButton = () => {
+  return (
+    <div class="large-font text-center top-20">
+      <ion-icon name="heart">
+        <div class="red-bg"></div>
+      </ion-icon>
+    </div>
+  );
+};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Card from "react-bootstrap/Card";
 import { Badge, Button, Col, Row, Spinner } from "react-bootstrap";
 import { Search } from "../components/Search";
@@ -7,7 +7,10 @@ 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";
+import { HeartSwitch } from "@anatoliygatt/heart-switch";
+import { useNavigate } from "react-router-dom";
+import { doc, updateDoc } from "firebase/firestore";
+import { db } from "../config/firebase";
 
 export function Home() {
   const [foodList, setFoodList] = useState<FoodItem[]>([]);
@@ -43,25 +46,43 @@ export function Home() {
     fetchFoodList();
   }, [user, isConsumer]);
 
-  const searchFoodList = foodList.filter((food) => {
-    const nameMatches = food.name.toLowerCase().includes(search.toLowerCase()); // Search Bar
-    const cuisineMatches = cuisine === "~Cuisine~" || food.cuisine === cuisine; // Filter
-    const businessMatches = business === "" || food.business === business; // Badges
-    return nameMatches && cuisineMatches && businessMatches;
-  });
+  const searchFoodList = useMemo(() => {
+    // To save state, reduce re-render
+    return foodList
+      .filter((food) => {
+        // Filter by name, cuisine and business
+        const nameMatches = food.name
+          .toLowerCase()
+          .includes(search.toLowerCase());
+        const cuisineMatches =
+          cuisine === "~Cuisine~" || food.cuisine === cuisine;
+        const businessMatches = business === "" || food.business === business;
+        return nameMatches && cuisineMatches && businessMatches;
+      })
+      .sort((a, b) => {
+        // Sort
+        if (sort === "Name") return a.name.localeCompare(b.name);
+        if (sort === "Price") return a.price > b.price ? 1 : -1;
+        if (sort === "Cuisine") return a.cuisine > b.cuisine ? 1 : -1;
+        return a.date > b.date ? 1 : -1;
+      });
+  }, [foodList, search, cuisine, business, sort]);
 
-  searchFoodList.sort((a, b) => {
-    // Sort
-    if (sort === "Name") {
-      return a.name.localeCompare(b.name);
-    } else if (sort === "Price") {
-      return a.price > b.price ? 1 : -1;
-    } else if (sort === "Cuisine") {
-      return a.cuisine > b.cuisine ? 1 : -1;
+  let navigate = useNavigate();
+  const toggleFavorite = async (foodId: string) => {
+    if (!user) {
+      // Not logged in
+      navigate("/login");
     } else {
-      return a.date > b.date ? 1 : -1; // Default By Date
+      setFavList((prev) => {
+        const newFavList = prev.includes(foodId)
+          ? prev.filter((id) => id !== foodId) // Remove
+          : [...prev, foodId]; // Apppend
+        updateDoc(doc(db, "consumer", user.uid), { favorites: newFavList });
+        return newFavList;
+      });
     }
-  });
+  };
 
   return (
     <>
@@ -83,51 +104,51 @@ export function Home() {
         Showing {business}'s results only, Click to Return
       </Button>
 
-      {isLoading && (
+      {isLoading ? (
         <Spinner animation="border" role="status">
           <span className="visually-hidden">Loading...</span>
         </Spinner>
-      )}
+      ) : (
+        <>
+          <Row md={4} className="g-4">
+            {searchFoodList.map((food, index) => (
+              <Col key={index}>
+                <Card className="flex" key={food.id}>
+                  <Card.Img variant="top" src={food.imageURL} />
+                  <Card.Body>
+                    <Card.Title>{food.name}</Card.Title>
+                    <Card.Subtitle>${food.price}</Card.Subtitle>
+                    <Card.Text>Date: ${timestampToString(food.date)}</Card.Text>
 
-      {!isLoading && (
-        <Row md={4} className="g-4">
-          {searchFoodList.map((food, index) => (
-            <Col key={index}>
-              <Card className="flex" key={food.id}>
-                <Card.Img variant="top" src={food.imageURL} />
-                <Card.Body>
-                  <Card.Title>{food.name}</Card.Title>
-                  <Card.Subtitle>${food.price}</Card.Subtitle>
-                  <Card.Text>Date: ${timestampToString(food.date)}</Card.Text>
-                  <Badge
-                    style={{ cursor: "pointer" }}
-                    pill
-                    className="ms-2"
-                    bg="warning"
-                    onClick={() => setCuisine(food.cuisine)}
-                  >
-                    {food.cuisine}
-                  </Badge>
-                  <Badge
-                    style={{ cursor: "pointer" }}
-                    pill
-                    className="ms-2"
-                    bg="dark"
-                    onClick={() => setBusiness(food.business)}
-                  >
-                    {food.business}
-                  </Badge>
-                  {/* <HeartSwitch
-                    checked={checkedFav}
-                    onChange={(event) => {
-                      handleFavChange(event.target.checked, food.id)
-                    }}
-                  /> */}
-                </Card.Body>
-              </Card>
-            </Col>
-          ))}
-        </Row>
+                    <Badge
+                      style={{ cursor: "pointer" }}
+                      pill
+                      className="ms-2"
+                      bg="warning"
+                      onClick={() => setCuisine(food.cuisine)}
+                    >
+                      {food.cuisine}
+                    </Badge>
+                    <Badge
+                      style={{ cursor: "pointer" }}
+                      pill
+                      className="ms-2"
+                      bg="dark"
+                      onClick={() => setBusiness(food.business)}
+                    >
+                      {food.business}
+                    </Badge>
+                    <HeartSwitch
+                      size="sm"
+                      checked={favList.includes(food.id) ? true : false}
+                      onChange={() => toggleFavorite(food.id)}
+                    />
+                  </Card.Body>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </>
       )}
 
       {!isLoading && searchFoodList.length == 0 && (

diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
@@ -36,7 +36,9 @@ export const RegisterPage = () => {
         const user = userCredential.user;
         if (isConsumer) {
           // Adding user id as a document to the consumer collection
-          await setDoc(doc(db, "consumer", user.uid), {});
+          await setDoc(doc(db, "consumer", user.uid), {
+            favorites: [],
+          });
         }
         return updateProfile(user, { displayName: name });
       })