feat(contexts): ✨ adds products id to manage selected coffees across …

…pages

Stores selected coffees in a hash with coffee id as key and quantity as its value in localStorage

src/components/CoffeeCard/index.tsx

@@ -8,6 +8,7 @@ import { AddedToCartNotification } from "../AddedToCartNotification";
 import { IconButton } from "../IconButton";
 
 export interface CoffeeCardProps {
+  id: string;
   imgSrc: string;
   coffeeName: string;
   coffeeDesc: string;
@@ -16,6 +17,7 @@ export interface CoffeeCardProps {
 }
 
 export function CoffeeCard({
+  id,
   imgSrc,
   coffeeName,
   coffeeDesc,
@@ -48,7 +50,7 @@ export function CoffeeCard({
 
   function handleAddedToCartWithNotification() {
     handleAddToCart(
-      { imgSrc, coffeeName, coffeeTags, coffeeDesc, coffeePrice },
+      { id, imgSrc, coffeeName, coffeeTags, coffeeDesc, coffeePrice },
       productQuantity,
     );
     if (showAddedToCartNotification === false) {

src/contexts/AppContext.tsx

@@ -1,15 +1,9 @@
-import { createContext, ReactNode, useState } from "react";
+import { createContext, ReactNode, useEffect, useState } from "react";
 
 import { CoffeeCardProps } from "../components/CoffeeCard";
 
-interface IProducts {
-  quantity: number;
-  product: string;
-  total: number;
-}
-
 interface IAppContextData {
-  checkoutProducts: IProducts[];
+  checkoutProducts: Map<string, number>;
   quantity: number;
   handleAddToCart: (product: CoffeeCardProps, quantity: number) => void;
 }
@@ -23,26 +17,66 @@ export const AppContext = createContext<IAppContextData>(
 );
 
 export function AppContextProvider({ children }: IAppContextProviderProps) {
-  const [checkoutProducts, setCheckoutProducts] = useState<IProducts[]>([]);
-  const [productQuantity, setProductQuantity] = useState<number>(0);
+  const [checkoutProducts, setCheckoutProducts] = useState<
+    Map<string, number>
+  >(() => {
+    const productsFromStorageJSON = localStorage.getItem(
+      "@coffee-delivery:selectedProducts",
+    );
+
+    if (productsFromStorageJSON !== null) {
+      const parsedProductsFromStorage = new Map(
+        JSON.parse(productsFromStorageJSON) as Map<string, number>,
+      );
+
+      return parsedProductsFromStorage;
+    }
+
+    return new Map();
+  });
 
   function handleAddToCart(product: CoffeeCardProps, quantity: number): void {
-    const newCheckoutProducts = [
-      ...checkoutProducts,
-      {
-        quantity,
-        product: JSON.stringify(product),
-        total: product.coffeePrice * quantity,
-      },
-    ];
-
-    setCheckoutProducts(newCheckoutProducts);
-    setProductQuantity((prevState) => prevState + quantity);
+    setCheckoutProducts((prevCheckoutProducts) => {
+      const newCheckoutProducts = new Map(prevCheckoutProducts);
+
+      const currentQuantity =
+        (newCheckoutProducts.get(product.id) ?? 0) + quantity;
+
+      newCheckoutProducts.set(product.id, currentQuantity);
+
+      localStorage.setItem(
+        "@coffee-delivery:selectedProducts",
+        JSON.stringify(Array.from(newCheckoutProducts.entries())),
+      );
+
+      return newCheckoutProducts;
+    });
   }
 
+  useEffect(() => {
+    const productsFromStorageJSON = localStorage.getItem(
+      "@coffee-delivery:selectedProducts",
+    );
+
+    if (productsFromStorageJSON !== null) {
+      const parsedProductsFromStorage = new Map(
+        JSON.parse(productsFromStorageJSON) as Map<string, number>,
+      );
+
+      setCheckoutProducts(parsedProductsFromStorage);
+    }
+  }, []);
+
   return (
     <AppContext.Provider
-      value={{ checkoutProducts, quantity: productQuantity, handleAddToCart }}
+      value={{
+        checkoutProducts,
+        quantity: Array.from(checkoutProducts.values()).reduce(
+          (acc, quantity) => acc + quantity,
+          0,
+        ),
+        handleAddToCart,
+      }}
     >
       {children}
     </AppContext.Provider>

src/pages/Home/index.tsx

@@ -99,6 +99,7 @@ export function Home() {
           <ul className="mt-12 grid grid-cols-1 items-center justify-center gap-x-8 gap-y-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="traditionalExpresso"
                 imgSrc={expresso}
                 coffeeName={t("traditionalExpressoName")}
                 coffeeDesc={t("traditionalExpressoDesc")}
@@ -108,6 +109,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="americanExpresso"
                 imgSrc={expressoAmericano}
                 coffeeName={t("americanExpressoName")}
                 coffeeDesc={t("americanExpressoDesc")}
@@ -117,6 +119,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="creamyExpresso"
                 imgSrc={expressoCremoso}
                 coffeeName={t("creamyExpressoName")}
                 coffeeDesc={t("creamyExpressoDesc")}
@@ -126,6 +129,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="coldExpresso"
                 imgSrc={expressoGelado}
                 coffeeName={t("coldExpressoName")}
                 coffeeDesc={t("coldExpressoDesc")}
@@ -135,6 +139,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="coffeeAndMilk"
                 imgSrc={cafeComLeite}
                 coffeeName={t("coffeeAndMilkName")}
                 coffeeDesc={t("coffeeAndMilkDesc")}
@@ -144,6 +149,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="latte"
                 imgSrc={latte}
                 coffeeName={t("latteName")}
                 coffeeDesc={t("latteDesc")}
@@ -153,6 +159,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="capuccino"
                 imgSrc={capuccino}
                 coffeeName={t("capuccinoName")}
                 coffeeDesc={t("capuccinoDesc")}
@@ -162,6 +169,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="macchiato"
                 imgSrc={macchiato}
                 coffeeName={t("macchiatoName")}
                 coffeeDesc={t("macchiatoDesc")}
@@ -171,6 +179,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="mochaccino"
                 imgSrc={mochaccino}
                 coffeeName={t("mochaccinoName")}
                 coffeeDesc={t("mochaccinoDesc")}
@@ -180,6 +189,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="hotChocolate"
                 imgSrc={hotChocolate}
                 coffeeName={t("hotChocolateName")}
                 coffeeDesc={t("hotChocolateDesc")}
@@ -189,6 +199,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="cuban"
                 imgSrc={cubano}
                 coffeeName={t("cubanName")}
                 coffeeDesc={t("cubanDesc")}
@@ -198,6 +209,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="hawaiian"
                 imgSrc={havaiano}
                 coffeeName={t("hawaiianName")}
                 coffeeDesc={t("hawaiianDesc")}
@@ -207,6 +219,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="arab"
                 imgSrc={arabe}
                 coffeeName={t("arabName")}
                 coffeeDesc={t("arabDesc")}
@@ -216,6 +229,7 @@ export function Home() {
             </li>
             <li className="flex items-center justify-center">
               <CoffeeCard
+                id="irish"
                 imgSrc={irlandes}
                 coffeeName={t("irishName")}
                 coffeeDesc={t("irishDesc")}