Adjusted cart types to begin cart workflow. Not using dummy types any…

…more but also not working
TheRealSwiftByte · May 21, 2024 · 37f2f4d · 37f2f4d
1 parent e6e0145
commit 37f2f4d
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 27 deletions.
diff --git a/api/ApiProdFactory.ts b/api/ApiProdFactory.ts
@@ -114,6 +114,10 @@ export class ApiProdFactory implements ApiImplementationFactory {
     }; //possibly unnecessary
 
     async createCustomer(customerInput: CreateCustomerInput): Promise<Customer>{
+        customerInput.cart = {
+            foodItems: [],
+            totalPrice: 0
+        };
         const response = fetch(API_BASE_URL + "customer/", {
             method: 'POST',
             body: JSON.stringify(customerInput),

diff --git a/api/schema/Cart.ts b/api/schema/Cart.ts
@@ -1,6 +1,6 @@
 import { MenuItem } from './MenuItem'
 
 export type Cart = {
-    foodItems?: MenuItem[]
-    total?: number
+    foodItems: MenuItem[]
+    totalPrice: number
 }
diff --git a/api/schema/Customer.ts b/api/schema/Customer.ts
@@ -9,7 +9,7 @@ export type Customer = {
     phone: string;
     password: string;
     address?: string;
-    cart?: Cart;
+    cart: Cart;
 }
 
 export type CreateCustomerInput = {

diff --git a/app/(tabs)/Cart.tsx b/app/(tabs)/Cart.tsx
@@ -11,9 +11,11 @@ import MinusIcon from "../../assets/icons/icon-minus-yellow.svg";
 import AddIcon from "../../assets/icons/icon-add-yellow.svg";
 
 import { SB_COLOR_SCHEME } from "@/constants";
-import { MenuItem, cart } from "@/mock_data";
+import { MenuItem, Cart, Customer } from "@/api/schema/SwiftByteTypes";
+import { Api } from "@/api/api";
 import { Button } from "@swift-byte/switftbytecomponents";
-import { Link } from "expo-router";
+import { Link, useFocusEffect } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
 import { NavigationProp, ParamListBase, RouteProp } from "@react-navigation/native";
 
 interface CartProps {
@@ -23,19 +25,29 @@ interface CartProps {
 
 export default function CartScreen({route, navigation}: CartProps) {
   const itemIdCounts: { [itemId: string]: number } = {};
+  const [activeCustomer, setActiveCustomer] = useState<Customer | undefined>(undefined);
+  const [displayCart, setDisplayCart] = useState<any>(undefined);
+  useFocusEffect(useCallback( () => {
+    setActiveCustomer(Api.getApi().getActiveCustomer())
+    console.log("Active Customer: ", activeCustomer)
+  }, []))
+
+  useEffect(() => {
+    if (activeCustomer) {
+      const cart = activeCustomer.cart;
+      console.log("Cart: ", cart)
+      cart.foodItems.forEach((item) => {
+        itemIdCounts[item.name] = (itemIdCounts[item.name] || 0) + 1;
+      });
+      setDisplayCart(Object.keys(itemIdCounts).map((itemName) => ({
+        item: activeCustomer.cart.foodItems.find((i) => i.name == itemName),
+        count: itemIdCounts[itemName],
+      })));
+    }
+  }, [activeCustomer]);
 
-  cart.foodItems.forEach((item) => {
-    const itemId = item.id.toString();
-    itemIdCounts[itemId] = (itemIdCounts[itemId] || 0) + 1;
-  });
 
-  const myItems: {
-    item: MenuItem | undefined;
-    count: number;
-  }[] = Object.keys(itemIdCounts).map((itemId) => ({
-    item: cart.foodItems.find((i) => i.id == itemId),
-    count: itemIdCounts[itemId],
-  }));
+
 
   return (
     <SafeAreaView style={styles.container}>
@@ -51,13 +63,13 @@ export default function CartScreen({route, navigation}: CartProps) {
               <Text
                 style={[styles.subtitle, { marginBottom: 16, fontSize: 16 }]}
               >
-                {cart.restaurant.name}
+                {/* {cart.restaurant.name} */}
               </Text>
               <View>
-                {myItems.map((item) => {
+                {displayCart && displayCart.map((item: any) => {
                   return (
                     <View
-                      key={item.item?.id}
+                      key={item.id}
                       style={[styles.dFlex, { marginBottom: 16, flex: 1 }]}
                     >
                       <View
@@ -68,7 +80,7 @@ export default function CartScreen({route, navigation}: CartProps) {
                       >
                         <View style={{ marginRight: 16 }}>
                           <Image
-                            source={{ uri: item.item?.imageUrl }}
+                            source={{ uri: item.imageUrl }}
                             width={64}
                             height={64}
                             style={{ borderRadius: 16 }}
@@ -80,7 +92,7 @@ export default function CartScreen({route, navigation}: CartProps) {
                           </Text>
                           <Text style={{ fontWeight: "500" }}>
                             $
-                            {item.item?.price
+                            {item.item?.totalPrice
                               ? item.item?.price * item.count
                               : item.item?.price}
                           </Text>

diff --git a/app/(tabs)/Profile.tsx b/app/(tabs)/Profile.tsx
@@ -1,16 +1,23 @@
 import { StyleSheet, TouchableOpacity } from "react-native";
 import { Text, View } from "@/components/Themed";
-import { Button } from "@swift-byte/switftbytecomponents";
-import UserCircle from "../../assets/icons/UserCircle.svg"
-import { Circle } from "react-native-svg";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
+import { Api } from "@/api/api";
+import { Customer } from "@/api/schema/SwiftByteTypes";
 
 export default function ProfileScreen() {
+  const [activeCustomer, setActiveCustomer] = useState<Customer | undefined>(undefined);
+  useFocusEffect(useCallback( () => {
+    setActiveCustomer(Api.getApi().getActiveCustomer())
+    console.log("Active Customer: ", activeCustomer)
+  }, []))
+
   return (
     <View style={styles.container}>
       <View style={styles.containerProfile}>
         <View style={styles.profilePic} />
         <View style={styles.painName}>
-          <Text style={styles.username}>John Smith</Text>
+          <Text style={styles.username}>{activeCustomer?.firstName} {activeCustomer?.lastName}</Text>
           <View>
             <Text style={styles.status}>Standard</Text>
           </View>

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -55,11 +55,12 @@ function RootLayoutNav() {
   return (
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack initialRouteName="welcome">
-        <Stack.Screen name="Reviews"/>
         <Stack.Screen name="welcome" options={{ headerShown: false }} />
         <Stack.Screen name="signIn" options={{ headerShown: false }} />
         <Stack.Screen name="signUp" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
+        <Stack.Screen name="Reviews"/>
+
         <Stack.Screen
           name="UserSavedPayments"
           options={{

diff --git a/app/signUp.tsx b/app/signUp.tsx
@@ -182,7 +182,7 @@ export default function signUp() {
                   lastName: nameParts[1],
                   email: email,
                   phone: phone,
-                  password: password
+                  password: password,
                 }
                 api.createCustomer(createCustomerInput)
                   .then((isSuccess) => {