changes made thorughout work

apps/nextjs/package.json

@@ -21,6 +21,7 @@
     "@trpc/next": "^10.1.0",
     "@trpc/react-query": "^10.1.0",
     "@trpc/server": "^10.1.0",
+    "jotai": "^2.5.1",
     "next": "^13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/nextjs/src/atoms/cart.ts

@@ -0,0 +1,66 @@
+import { atom } from "jotai";
+import { atomFamily, atomWithStorage, createJSONStorage } from "jotai/utils";
+import { productsAtom, singleProductAtomFamily } from "./products";
+
+export const cartAtom = atomWithStorage<Record<number, number>>(
+  "cart",
+  {},
+  createJSONStorage(() => localStorage),
+);
+
+export const cartItemQuantityAtomFamily = atomFamily((id: number) =>
+  atom(
+    (get) => {
+      return get(cartAtom)[id] ?? 0;
+    },
+    (get, set, newValue: number) => {
+      const currentCart = get(cartAtom);
+      set(cartAtom, { ...currentCart, [id]: newValue });
+    },
+  ),
+);
+
+export const cartTotalAtom = atom((get) => {
+  const currentCart = get(cartAtom);
+  const products = get(productsAtom);
+
+  const ids = Object.keys(currentCart);
+  let total = 0;
+
+  for (const pr of products) {
+    if (ids.includes(pr.id.toString())) {
+      total += (currentCart[pr.id] ?? 0) * pr.price.toNumber();
+    }
+  }
+
+  return total;
+});
+
+export const addItemToCartAtom = atomFamily(
+  ({ id, quantity }: { id: number; quantity: number }) =>
+    atom(null, async (get, set) => {
+      const currentCart = get(cartAtom);
+      const currentQuantity = currentCart[id];
+      const currentItemStock =
+        get(singleProductAtomFamily(id))?.stock.toNumber() ?? 0;
+
+      const q = currentQuantity ? currentQuantity + quantity : quantity;
+
+      if (q < 1) {
+        set(cartAtom, { ...currentCart, [id]: 1 });
+      } else if (q <= currentItemStock) {
+        set(cartAtom, { ...currentCart, [id]: q });
+      } else {
+        set(cartAtom, { ...currentCart, [id]: currentItemStock });
+      }
+    }),
+);
+
+export const deleteItemFromCartAtom = atomFamily(({ id }: { id: number }) =>
+  atom(null, async (_, set) => {
+    set(cartAtom, async (prev) => {
+      const { [id]: toDelete, ...rest } = await prev;
+      return { ...rest };
+    });
+  }),
+);

apps/nextjs/src/atoms/products.ts

@@ -0,0 +1,16 @@
+import { AppRouter } from "@acme/api";
+import { inferProcedureOutput } from "@trpc/server";
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+
+export const productsAtom = atom<
+  inferProcedureOutput<AppRouter["item"]["all"]>
+>([]);
+
+export const singleProductAtomFamily = atomFamily((id: number) =>
+  atom((get) => {
+    const product = get(productsAtom).filter((product) => product.id === id)[0];
+    if (!product) return null;
+    return product;
+  }),
+);

apps/nextjs/src/atoms/store.ts

@@ -0,0 +1,5 @@
+import { createStore } from "jotai";
+
+const jotaiStore = createStore();
+
+export default jotaiStore;

apps/nextjs/src/components/ItemHeader/ItemHeader.tsx

@@ -11,9 +11,9 @@ function ItemHeader() {
         </span>
         <span className={styles.listSpan}>
           <ul>
-            <li onClick={() => router.back()}>Home</li>
-            <li>Shop</li>
-            <li>About</li>
+            <li onClick={() => router.push(`/`)}>Home</li>
+            <li onClick={() => router.push(`/shoppingCart`)}>Cart</li>
+            <li onClick={() => router.push(`/login`)}>Login</li>
             <li>Contact</li>
           </ul>
         </span>

apps/nextjs/src/components/content/Content.tsx

@@ -2,45 +2,83 @@ import Aside from "../aside/Aside";
 import styles from "./Content.module.css";
 import { trpc } from "../../utils/trpc";
 import { useRouter } from "next/router";
+import { useSetAtom } from "jotai";
+import { productsAtom } from "../../atoms/products";
+import { useEffect } from "react";
+import { inferProcedureOutput } from "@trpc/server";
+import { AppRouter } from "@acme/api";
+import { addItemToCartAtom, deleteItemFromCartAtom } from "../../atoms/cart";
 
 interface ContentProps {
   filterValue: string;
 }
 
 function Content({ filterValue }: ContentProps) {
   const { data } = trpc.item.all.useQuery();
-  const router = useRouter();
+  const setItemsAtom = useSetAtom(productsAtom);
 
   const filteredData =
     data?.filter((item) =>
       item.name.toLowerCase().includes(filterValue.toLowerCase()),
     ) ?? [];
 
+  useEffect(() => {
+    setItemsAtom(data ?? []);
+  }, [data, setItemsAtom]);
+
   return (
     <>
       <div className={styles.container}>
         <Aside></Aside>
         <main>
           {filteredData.map((item) => (
-            <span
-              className={styles.card}
-              key={item.id}
-              onClick={() => router.push(`/item/${item.id}`)}
-            >
-              <picture>
-                <img
-                  src={item.image_url != null ? item.image_url : ""}
-                  alt="product"
-                />
-              </picture>
-              <h3>{item.name}</h3>
-              <p>${item.price.toFixed(2)}</p>
-              <button type="button">Add to cart</button>
-            </span>
+            <ItemCard item={item} key={item.id} />
           ))}
         </main>
       </div>
     </>
   );
 }
+
+function ItemCard({
+  item,
+}: {
+  item: inferProcedureOutput<AppRouter["item"]["all"]>[number];
+}) {
+  const router = useRouter();
+  const addToCart = useSetAtom(addItemToCartAtom({ id: item.id, quantity: 1 }));
+  const deleteFromCart = useSetAtom(deleteItemFromCartAtom({ id: item.id }));
+
+  return (
+    <div
+      className={styles.card}
+      onClick={() => router.push(`/item/${item.id}`)}
+    >
+      <picture>
+        {" "}
+        <img src={item.image_url ? item.image_url : ""} alt={item.name} />
+      </picture>
+      <h3>{item.name}</h3>
+      <p>${item.price.toFixed(2)}</p>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          addToCart();
+        }}
+      >
+        Add to cart
+      </button>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          deleteFromCart();
+        }}
+      >
+        Delete
+      </button>
+    </div>
+  );
+}
 export default Content;

apps/nextjs/src/components/loginContent/LoginContent.tsx

@@ -1,5 +1,4 @@
 import styles from "./LoginContent.module.css";
-import RegisterForm from "../RegisterForm/RegisterForm";
 import { useRouter } from "next/router";
 function LoginContent() {
   const router = useRouter();

apps/nextjs/src/components/shoppingCartContent/ShoppingCartContent.module.css

@@ -24,18 +24,22 @@
 }
 .image {
   height: 100px;
+  width: 100px;
   border: 1px solid gray;
   display: flex;
+  justify-content: center;
 }
 .details h3 {
   font-size: large;
+  width: 250px;
 }
 .quantityBox {
   height: 30px;
   border: 1px solid black;
 }
 .quantityInput {
   height: 100%;
+  width: 80px;
   padding-left: 10px;
   text-align: center;
 }