WIP

src/app/context/ShoppingCartContext.tsx

@@ -0,0 +1,98 @@
+import { createContext, ReactNode, useContext, useState, useMemo } from "react"
+import { useLocalStorage } from "../hooks/useLocalStorage"
+
+type ShoppingCartProviderProps = {
+  children: ReactNode
+}
+
+type CartItem = {
+  id: number
+  quantity: number
+}
+
+type ShoppingCartContext = {
+  openCart: () => void
+  closeCart: () => void
+  getItemQuantity: (id: number) => number
+  increaseCartQuantity: (id: number) => void
+  decreaseCartQuantity: (id: number) => void
+  removeFromCart: (id: number) => void
+  cartQuantity: number
+  cartItems: CartItem[]
+}
+
+const ShoppingCartContext = createContext({} as ShoppingCartContext)
+
+export function useShoppingCart() {
+  return useContext(ShoppingCartContext)
+}
+export function ShoppingCartProvider({ children }: ShoppingCartProviderProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [cartItems, setCartItems] = useLocalStorage<CartItem[]>(
+    "shopping-cart",
+    []
+  )
+
+  const cartQuantity = cartItems.reduce(
+    (quantity, item) => item.quantity + quantity,
+    0
+  )
+
+  const openCart = () => setIsOpen(true)
+  const closeCart = () => setIsOpen(false)
+  function getItemQuantity(id: number) {
+    return cartItems.find(item => item.id === id)?.quantity || 0
+  }
+  function increaseCartQuantity(id: number) {
+    setCartItems(currItems => {
+      if (currItems.find(item => item.id === id) == null) {
+        return [...currItems, { id, quantity: 1 }]
+      } 
+        return currItems.map(item => {
+          if (item.id === id) {
+            return { ...item, quantity: item.quantity + 1 }
+          } 
+            return item
+
+        })
+
+    })
+  }
+  function decreaseCartQuantity(id: number) {
+    setCartItems(currItems => {
+      if (currItems.find(item => item.id === id)?.quantity === 1) {
+        return currItems.filter(item => item.id !== id)
+      } 
+        return currItems.map(item => {
+          if (item.id === id) {
+            return { ...item, quantity: item.quantity - 1 }
+          } 
+            return item
+
+        })
+
+    })
+  }
+  import { useMemo } from "react";
+
+  function removeFromCart(id: number) {
+    setCartItems(currItems => currItems.filter(item => item.id !== id))
+  }
+
+  const contextValue = useMemo(() => ({
+    getItemQuantity,
+    increaseCartQuantity,
+    decreaseCartQuantity,
+    removeFromCart,
+    openCart,
+    closeCart,
+    cartItems,
+    cartQuantity,
+  }), [cartItems, cartQuantity]);
+
+  return (
+    <ShoppingCartContext.Provider value={contextValue}>
+      {children}
+    </ShoppingCartContext.Provider>
+  )
+}

src/app/hooks/useLocalStorage.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+
+export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
+  const [value, setValue] = useState<T>(() => {
+    const jsonValue = localStorage.getItem(key)
+    if (jsonValue != null) return JSON.parse(jsonValue)
+
+    if (typeof initialValue === "function") {
+      return (initialValue as () => T)()
+    } 
+      return initialValue
+
+  })
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }, [key, value])
+
+  return [value, setValue] as [typeof value, typeof setValue]
+}

src/app/page.tsx

@@ -23,16 +23,16 @@ import {
 
 export default function Checkout() {
   testFetchUserData();
-  testFetchUserByUUID();
-  testAddUserAddress();
-  testFetchOrderByUUID();
-  testFetchOrders();
-  testGetOrderById();
-  testToggleOrderProgress();
-  testFetchProducts();
-  testFetchProductByName();
-  testFetchPickupData();
-  testFetchPickupTimesByUUID();
+  // testFetchUserByUUID();
+  // testAddUserAddress();
+  // testFetchOrderByUUID();
+  // testFetchOrders();
+  // testGetOrderById();
+  // testToggleOrderProgress();
+  // testFetchProducts();
+  // testFetchProductByName();
+  // testFetchPickupData();
+  // testFetchPickupTimesByUUID();
   // testUpdateAllOrdersProgressToTrue();
 
   return (

src/components/ShoppingCart.tsx

@@ -0,0 +1,16 @@
+import { Offcanvas, Stack } from "react-bootstrap"
+import { useShoppingCart } from "../context/ShoppingCartContext"
+import { formatCurrency } from "../utilities/formatCurrency"
+import { CartItem } from "./CartItem"
+import storeItems from "../data/items.json"
+
+type ShoppingCartProps = {
+  isOpen: boolean
+}
+
+export function ShoppingCart({ isOpen }: ShoppingCartProps) {
+  const { closeCart, cartItems } = useShoppingCart()
+  return (
+
+  )
+}

src/schema/schema.ts

@@ -36,3 +36,9 @@ export type Product = {
   photo: string; // text null;
   updated_at: string; // timestamp with time zone not null default now();
 };
+
+export type Cart = {
+  id: number; // bigint generated by default as identity
+  user_id: string; // UUID not null
+  product_id: Record<string, number>; // JSONB with item as key and quantity as value
+};

src/supabase/cart_queries.ts

@@ -0,0 +1,106 @@
+/* eslint-disable no-console */
+//
+
+import {
+  PostgrestSingleResponse,
+  PostgrestError,
+  createClient,
+} from '@supabase/supabase-js';
+
+import { Cart } from '../schema/schema';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseApiKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+const supabase = createClient(supabaseUrl ?? '', supabaseApiKey ?? '');
+
+export async function fetchAllCarts(): Promise<
+  PostgrestSingleResponse<Cart[]> | { data: never[]; error: PostgrestError }
+> {
+  try {
+    const { data: carts, error } = await supabase
+      .from('Cart')
+      .select('*');
+
+    if (error) {
+      console.error('Error fetching carts:', error);
+      return { data: [], error };
+    }
+
+    return { data: carts } as PostgrestSingleResponse<Cart[]>;
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}
+
+export async function fetchCartByUserId(
+  userId: string,
+): Promise<
+  PostgrestSingleResponse<Cart[]> | { data: never[]; error: PostgrestError }
+> {
+  try {
+    const { data: carts, error } = await supabase
+      .from('Cart')
+      .select('*')
+      .eq('user_id', userId).single();
+
+    if (error) {
+      console.error('Error fetching carts for user:', error);
+      return { data: [], error };
+    }
+
+    return carts;
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}
+
+export async function fetchCartById(
+  cartId: number,
+): Promise<PostgrestSingleResponse<Cart>> {
+  try {
+    const { data: cart, error } = await supabase
+      .from('Cart')
+      .select('*')
+      .eq('id', cartId)
+      .single();
+
+    if (error) {
+      console.error('Error fetching cart by ID:', error);
+    }
+
+    return cart;
+  }
+  catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}
+
+export async function updateCartByUserId(
+  userId: string,
+  updatedCartData: Partial<Cart>,
+): Promise<
+  PostgrestSingleResponse<Cart> | { data: null; error: PostgrestError }
+> {
+  try {
+    const { data: updatedCart, error } = await supabase
+      .from('Cart')
+      .update(updatedCartData)
+      .eq('user_id', userId)
+      .single();
+
+    if (error) {
+      console.error('Error updating cart:', error);
+      return { data: null, error };
+    }
+
+    return updatedCart;
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}
+

src/supabase/order_queries.ts

@@ -21,15 +21,14 @@ export async function fetchOrders(): Promise<
   try {
     const { data: orders, error } = await supabase
       .from('Order') // Update to the "Order" table
-      .select('*')
-      .single();
+      .select('*');
 
     if (error) {
       console.error('Error fetching data:', error);
       return { data: [], error };
     }
 
-    return orders;
+    return { data: orders } as PostgrestSingleResponse<Order[]>;
   } catch (error) {
     console.error('Error:', error);
     throw error;

src/supabase/pickup_queries.ts

@@ -22,15 +22,14 @@ export async function fetchPickupData(): Promise<
   try {
     const { data: pickupTimes, error } = await supabase
       .from('Pickup_Times')
-      .select('*')
-      .single();
+      .select('*');
 
     if (error) {
       console.error('Error fetching data:', error);
       return { data: [], error };
     }
 
-    return pickupTimes;
+    return { data: pickupTimes } as PostgrestSingleResponse<Schedule[]>;
   } catch (error) {
     console.error('Error:', error);
     throw error;

src/supabase/product_queries.ts

@@ -21,15 +21,14 @@ export async function fetchProducts(): Promise<
   try {
     const { data: products, error } = await supabase
       .from('Product')
-      .select('*')
-      .single();
+      .select('*');
 
     if (error) {
       console.error('Error fetching data:', error);
       return { data: [], error };
     }
 
-    return products;
+    return { data: products } as PostgrestSingleResponse<Product[]>;
   } catch (error) {
     console.error('Error:', error);
     throw error;

src/supabase/user_queries.ts

@@ -21,21 +21,22 @@ export async function fetchUserData(): Promise<
 > {
   try {
     const { data: users, error } = await supabase
-      .from('Users')
-      .select('*')
-      .single();
+      .from('users')
+      .select('*');
 
     if (error) {
       console.error('Error fetching data:', error);
       return { data: [], error };
     }
-    return users;
+
+    return { data: users } as PostgrestSingleResponse<User[]>;
   } catch (error) {
     console.error('Error:', error);
     throw error;
   }
 }
 
+
 export async function fetchUserByUUID(
   uuid: string,
 ): Promise<PostgrestSingleResponse<unknown>> {