From 4140b378fbe8129ad00c9dc8465a58da3523cd32 Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Mon, 6 Nov 2023 16:16:42 +0100
Subject: [PATCH] theme modes adjustments

---
 client/database/dbUtils.js               |  19 ++++
 client/package-lock.json                 |   2 +-
 client/package.json                      |   2 +-
 client/screens/CartScreen.tsx            |  31 ++---
 client/screens/CheckoutScreen.tsx        |  32 +++---
 client/screens/HistoryPaymentsScreen.tsx |  54 ++++-----
 client/screens/ScanScreen.tsx            |  20 ++--
 client/screens/utils/themeUtils.js       |  11 ++
 client/styles/Style.js                   | 137 +++++++++++------------
 9 files changed, 163 insertions(+), 145 deletions(-)
 create mode 100644 client/screens/utils/themeUtils.js

diff --git a/client/database/dbUtils.js b/client/database/dbUtils.js
index 73c434e..a147748 100644
--- a/client/database/dbUtils.js
+++ b/client/database/dbUtils.js
@@ -1,5 +1,24 @@
 import db from './db';
 
+export const deleteAllItems = () => {
+  return new Promise((resolve, reject) => {
+    db.transaction((tx) => {
+      tx.executeSql(
+        'DELETE FROM items',
+        [],
+        (_, result) => {
+          console.log('All items deleted from the table');
+          resolve(result);
+        },
+        (error) => {
+          console.log('Error deleting all items:', error);
+          reject(error);
+        }
+      );
+    });
+  });
+};
+
 export const getItemsWithQuantities = () => {
   return new Promise((resolve, reject) => {
     db.transaction((tx) => {
diff --git a/client/package-lock.json b/client/package-lock.json
index 20784ab..f33968d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,7 +12,7 @@
         "@react-navigation/native": "^6.1.9",
         "@react-navigation/native-stack": "^6.9.16",
         "@react-navigation/stack": "^6.3.20",
-        "@stripe/stripe-react-native": "0.23.3",
+        "@stripe/stripe-react-native": "^0.23.3",
         "date-fns": "^2.30.0",
         "expo": "^48.0.0",
         "expo-barcode-scanner": "~12.3.2",
diff --git a/client/package.json b/client/package.json
index cba85d7..6904430 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,7 +13,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.16",
     "@react-navigation/stack": "^6.3.20",
-    "@stripe/stripe-react-native": "0.23.3",
+    "@stripe/stripe-react-native": "^0.23.3",
     "date-fns": "^2.30.0",
     "expo": "^48.0.0",
     "expo-barcode-scanner": "~12.3.2",
diff --git a/client/screens/CartScreen.tsx b/client/screens/CartScreen.tsx
index b823a72..d00e21d 100644
--- a/client/screens/CartScreen.tsx
+++ b/client/screens/CartScreen.tsx
@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
  import Swipeout from 'react-native-swipeout';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  import Constants from 'expo-constants';
+ import { retrieveThemeMode } from './utils/themeUtils';
  import {
    getItemsWithQuantities,
    deleteItem,
@@ -20,25 +21,10 @@ import React, { useEffect, useState } from 'react';
    const apiUrl = Constants.manifest.extra.apiUrl;
    const [isDarkMode, setIsDarkMode] = useState(false);
 
-   const retrieveThemeMode = async () => {
-     try {
-       const themeMode = await AsyncStorage.getItem('themeMode');
-       if (themeMode !== null) {
-         setIsDarkMode(themeMode === 'dark');
-       }
-     } catch (error) {
-       console.log('Error retrieving theme mode:', error);
-     }
-   };
-
-   const toggleTheme = () => {
-     const newThemeMode = !isDarkMode;
-     setIsDarkMode(newThemeMode);
-     AsyncStorage.setItem('themeMode', newThemeMode ? 'dark' : 'light');
-   };
-
    useEffect(() => {
-     retrieveThemeMode();
+      retrieveThemeMode().then((themeMode) => {
+        setIsDarkMode(themeMode);
+      });
      updateCart();
    }, []);
 
@@ -104,11 +90,11 @@ import React, { useEffect, useState } from 'react';
          </View>
          <Text style={Styles.itemPrice}>{(item.price / 100).toFixed(2)} €</Text>
          <View style={Styles.quantityButtons}>
-           <Button title="+" onPress={async () => {
+           <Button color={isDarkMode ? "gray" : "#E0A228"} title="+" onPress={async () => {
              await increaseQuantity(item.id);
              updateCart();
            }} />
-           <Button title="-" onPress={async () => {
+           <Button color={isDarkMode ? "gray" : "#E0A228"}  title="-" onPress={async () => {
              await decreaseQuantity(item.id);
              updateCart();
            }} />
@@ -131,9 +117,10 @@ import React, { useEffect, useState } from 'react';
         <Text style={isDarkMode ? Styles.darkText : Styles.lightText}>{totalPrice} €</Text>
       </View>
       <Button
-        style={{margin: 20}}
-        color="#E0A228"
+        style={{ margin: 20 }}
+        color={isDarkMode ? "gray" : "#E0A228"}
         title="Pay"
+        disabled={parseFloat(totalPrice) === 0}
         onPress={() => navigation.navigate('Checkout', { items: items, totalPrice: totalPrice })}
       />
     </View>
diff --git a/client/screens/CheckoutScreen.tsx b/client/screens/CheckoutScreen.tsx
index 5dbe225..0b1195a 100644
--- a/client/screens/CheckoutScreen.tsx
+++ b/client/screens/CheckoutScreen.tsx
@@ -3,15 +3,19 @@ import Constants from "expo-constants";
 import React, { useEffect, useState } from "react";
 import { Alert, Text, Button, SafeAreaView, View } from "react-native";
 import BasketScreen from './screens/BasketScreen';
+import Styles from '../styles/Style';
 import * as SQLite from 'expo-sqlite';
+import { retrieveThemeMode } from './utils/themeUtils';
 import {
 deleteItem,
+deleteAllItems
 } from '../database/dbUtils';
 
-export default function CheckoutScreen({ route }) {
+export default function CheckoutScreen({ navigation, route }) {
     const { initPaymentSheet, presentPaymentSheet } = useStripe();
     const [loading, setLoading] = useState(false);
     const [paymentIntentId, setPaymentIntentId] = useState<string>("");
+    const [isDarkMode, setIsDarkMode] = useState(false);
 
     const apiUrl = Constants.expoConfig.extra.apiUrl;
     const items = route.params.items;
@@ -23,8 +27,6 @@ export default function CheckoutScreen({ route }) {
         amount: item.quantity
     }));
 
-    const db = SQLite.openDatabase('cart.db');
-
     const fetchPaymentSheetParams = async () => {
         console.log(items);
         const response = await fetch(`${apiUrl}/payments/`, {
@@ -86,10 +88,8 @@ export default function CheckoutScreen({ route }) {
             });
 
             if (response.status === 200) {
-                for (const item of items) {
-                    console.log('Deleting item:', item);
-                    await deleteItem(item.id);
-                }
+                await deleteAllItems(items);
+                navigation.navigate('ScanScreen');
                 Alert.alert('Success', 'Your order is confirmed!');
             }
         }
@@ -97,15 +97,19 @@ export default function CheckoutScreen({ route }) {
 
     useEffect(() => {
         initializePaymentSheet();
+        retrieveThemeMode().then((themeMode) => {
+          setIsDarkMode(themeMode);
+        });
     }, []);
 
     return (
-        <SafeAreaView>
-            <Button
-                disabled={!loading}
-                title="Checkout"
-                onPress={openPaymentSheet}
-            />
-        </SafeAreaView>
+        <View style={isDarkMode ? Styles.darkContainer : Styles.lightContainer}>
+          <Button
+            color="#E0A228"
+            disabled={!loading}
+            title="Checkout"
+            onPress={openPaymentSheet}
+          />
+        </View>
     );
 }
diff --git a/client/screens/HistoryPaymentsScreen.tsx b/client/screens/HistoryPaymentsScreen.tsx
index 44cc602..7fd385a 100644
--- a/client/screens/HistoryPaymentsScreen.tsx
+++ b/client/screens/HistoryPaymentsScreen.tsx
@@ -5,6 +5,7 @@ import { format } from 'date-fns';
 import { getPaymentsHistory } from '../database/dbUtils';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Constants from 'expo-constants';
+import { retrieveThemeMode } from './utils/themeUtils';
 
 export default function PaymentHistoryScreen() {
   const [paymentHistory, setPaymentHistory] = useState([]);
@@ -12,19 +13,10 @@ export default function PaymentHistoryScreen() {
   const apiUrl = Constants.manifest.extra.apiUrl;
   const customerId = "cus_OsU6FAKAAXp1YI";
 
-  const retrieveThemeMode = async () => {
-    try {
-      const themeMode = await AsyncStorage.getItem('themeMode');
-      if (themeMode !== null) {
-        setIsDarkMode(themeMode === 'dark');
-      }
-    } catch (error) {
-      console.log('Error retrieving theme mode:', error);
-    }
-  };
-
   useEffect(() => {
-    retrieveThemeMode();
+    retrieveThemeMode().then((themeMode) => {
+        setIsDarkMode(themeMode);
+      });
     loadPaymentHistory();
   }, []);
 
@@ -33,6 +25,7 @@ export default function PaymentHistoryScreen() {
       const response = await fetch(`${apiUrl}/payments/${customerId}`);
       if (response.ok) {
         const history = await response.json();
+        console.log(history);
         setPaymentHistory(history);
       } else {
         console.log('Error while retrieving payments history');
@@ -44,21 +37,28 @@ export default function PaymentHistoryScreen() {
 
   return (
     <View style={isDarkMode ? Styles.darkContainer : Styles.lightContainer}>
-      <FlatList
-        data={paymentHistory}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <View style={Styles.historyItem}>
-            <Text style={Styles.itemName}>{item.purchased_items[0].item.name}</Text>
-            <Text style={Styles.itemDate}>
-              {format(new Date(item.checkout_date), 'MMMM dd, yyyy HH:mm a')}
-            </Text>
-            <Text style={Styles.itemPrice}>
-              {(item.purchased_items[0].item.price / 100).toFixed(2)} €
-            </Text>
-          </View>
-        )}
-      />
+       <FlatList
+          data={paymentHistory.reverse()}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <View style={isDarkMode ? Styles.historyItemDark : Styles.historyItemLight}>
+              <Text style={Styles.itemDate}>
+                {format(new Date(item.checkout_date), 'MMMM dd, yyyy HH:mm a')}
+              </Text>
+              {item.purchased_items.map((purchasedItem, index) => (
+                <View key={index} style={Styles.itemInfo}>
+                  <Text style={Styles.itemName}>{purchasedItem.item.name}</Text>
+                  <Text style={Styles.itemQuantity}>
+                    Quantity: {purchasedItem.amount}
+                  </Text>
+                  <Text style={Styles.itemPrice}>
+                    Price: {(purchasedItem.item.price / 100).toFixed(2)} €
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
+        />
     </View>
   );
 }
diff --git a/client/screens/ScanScreen.tsx b/client/screens/ScanScreen.tsx
index 3d5e87f..60659cb 100644
--- a/client/screens/ScanScreen.tsx
+++ b/client/screens/ScanScreen.tsx
@@ -5,7 +5,6 @@ import Constants from 'expo-constants';
 import { ImageBackground } from 'react-native';
 import Styles from '../styles/Style';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useNavigation } from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
  import {
    updateLocalItemQuantity,
@@ -13,13 +12,12 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
    insertItem,
  } from '../database/dbUtils';
 
-export default function App() {
+export default function ScanScreen({navigation}) {
   const [hasPermission, setHasPermission] = useState(false);
   const [scanned, setScanned] = useState(false);
   const [manualEntry, setManualEntry] = useState(false);
   const [barcodeData, setBarcodeData] = useState('');
   const [item, setItem] = useState();
-  const navigation = useNavigation();
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {
@@ -68,7 +66,7 @@ export default function App() {
           } else {
             await insertItem(item.id, item.name, item.price);
           }
-
+          navigation.navigate('CartScreen');
           alert('Item added to the cart');
         } else {
           alert('Item does not exist in the database');
@@ -98,7 +96,7 @@ export default function App() {
         <View style={Styles.buttonGroup}>
           <Icon.Button
             name="add"
-            backgroundColor="#E0A228"
+            backgroundColor={isDarkMode ? "gray" : "#E0A228"}
             color="white"
             onPress={() => setManualEntry(true)}
           >
@@ -106,7 +104,7 @@ export default function App() {
           </Icon.Button>
           <Icon.Button
             name="schedule"
-            backgroundColor="#E0A228"
+            backgroundColor={isDarkMode ? "gray" : "#E0A228"}
             color="white"
             onPress={() => navigation.navigate('PaymentHistoryScreen')}
           >
@@ -114,7 +112,7 @@ export default function App() {
           </Icon.Button>
           <Icon.Button
             name="shopping-cart"
-            backgroundColor="#E0A228"
+            backgroundColor={isDarkMode ? "gray" : "#E0A228"}
             color="white"
             onPress={() => navigation.navigate('CartScreen')}
           >
@@ -132,9 +130,9 @@ export default function App() {
           style={{ ...Styles.cardBackground, width: '100%' }}
         >
           <View style={Styles.cardContainer}>
-            <View style={Styles.card}>
+            <View style={Styles.card} backgroundColor={isDarkMode ? "#1c2155" : "white"}>
               <View style={Styles.fieldContainer}>
-                <Text>Item Code:</Text>
+                <Text style={isDarkMode ? Styles.darkText : Styles.lightText}>Item Code:</Text>
                 <TextInput
                   style={isDarkMode ? Styles.darkText : Styles.lightText}
                   placeholder="Enter Item Code"
@@ -175,12 +173,12 @@ export default function App() {
           )}
         </View>
       )}
-      <View style={Styles.themeToggleButtonContainer}>
+      <View style={Styles.themeToggleButtonContainer} backgroundColor={isDarkMode ? "gray" : "#E0A228"}>
         <TouchableOpacity
           style={isDarkMode ? Styles.toggleButton : Styles.inactiveToggleButton}
           onPress={toggleTheme}
         >
-          <Icon name="brightness-3" size={30} color="grey" />
+          <Icon name="brightness-3" size={30} color="black" />
         </TouchableOpacity>
         <TouchableOpacity
           style={isDarkMode ? Styles.inactiveToggleButton : Styles.toggleButton}
diff --git a/client/screens/utils/themeUtils.js b/client/screens/utils/themeUtils.js
new file mode 100644
index 0000000..bc7b1b9
--- /dev/null
+++ b/client/screens/utils/themeUtils.js
@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const retrieveThemeMode = async () => {
+  try {
+    const themeMode = await AsyncStorage.getItem('themeMode');
+    return themeMode === 'dark';
+  } catch (error) {
+    console.log('Error retrieving theme mode:', error);
+    return false;
+  }
+};
diff --git a/client/styles/Style.js b/client/styles/Style.js
index 4f1e092..0215d96 100644
--- a/client/styles/Style.js
+++ b/client/styles/Style.js
@@ -5,43 +5,37 @@ const Styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     backgroundColor: '#1c2155',
-    color: 'white'
   },
   darkText: {
     color: 'white',
-    alignItems: 'center',
-    fontSize: 20
+    fontSize: 15,
   },
-  flatList: {
-      flex: 1,
-      margin: 10,
-      borderWidth: 1,
-      borderRadius: 5,
-    },
   lightContainer: {
     flex: 1,
     justifyContent: 'center',
     backgroundColor: 'white',
     marginBottom: 10,
-    color: '#1c2155'
   },
- lightText: {
-   color: '#1c2155',
-   alignItems: 'center',
-   fontSize: 20,
-   padding:10
+  lightText: {
+    color: '#1c2155',
+    fontSize: 15,
+    padding: 10,
+  },
+  flatList: {
+    flex: 1,
+    margin: 10,
+    borderWidth: 1,
+    borderRadius: 5,
   },
   lightTitle: {
-     color: '#1c2155',
-     alignItems: 'center',
-     fontSize: 30,
-     padding:10
-  },
-    darkTitle: {
-       color: 'white',
-       alignItems: 'center',
-       fontSize: 30
-      },
+    color: '#1c2155',
+    fontSize: 30,
+    padding: 10,
+  },
+  darkTitle: {
+    color: 'white',
+    fontSize: 30,
+  },
   barcodeScannerContainer: {
     flex: 1,
     width: '100%',
@@ -60,7 +54,7 @@ const Styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginBottom: 20,
-    marginTop: 10
+    marginTop: 10,
   },
   title: {
     fontSize: 20,
@@ -71,19 +65,19 @@ const Styles = StyleSheet.create({
     color: 'white',
   },
   roundedButton: {
-      padding: 16,
-      borderRadius: 15,
+    padding: 16,
+    borderRadius: 15,
   },
   buttonContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      marginBottom: 20,
-    },
-    roundedButton: {
-      flex: 1,
-      marginHorizontal: 5,
-      borderRadius: 10,
-    },
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+  roundedButton: {
+    flex: 1,
+    marginHorizontal: 5,
+    borderRadius: 10,
+  },
   itemRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -105,18 +99,18 @@ const Styles = StyleSheet.create({
     marginTop: 0,
   },
   quantityButtons: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      margin: 10,
-    },
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: 10,
+  },
   cardContainer: {
     flex: 2,
     justifyContent: 'center',
     alignItems: 'center',
+    width:'100%',
   },
   card: {
-    backgroundColor: 'white',
     padding: 10,
     borderRadius: 10,
     elevation: 2,
@@ -144,8 +138,14 @@ const Styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 8,
   },
-  historyItem: {
-    backgroundColor: '#f5b841',
+  historyItemDark: {
+    backgroundColor: 'gray',
+    padding: 16,
+    marginBottom: 8,
+    borderRadius: 15,
+  },
+  historyItemLight: {
+    backgroundColor: '#E2A755',
     padding: 16,
     marginBottom: 8,
     borderRadius: 15,
@@ -164,30 +164,29 @@ const Styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   toggleButton: {
-      borderRadius: 50,
-      margin: 5,
-      flex: 1,
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'center',
-    },
-    inactiveToggleButton: {
-      borderRadius: 50,
-      margin: 5,
-      flex: 1,
-      alignItems: 'center',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      opacity: 0.5,
-    },
-    themeToggleButtonContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingHorizontal: 20,
-      backgroundColor: '#E0A228',
-      borderRadius: 20,
-      margin: 20
-    },
+    borderRadius: 50,
+    margin: 5,
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  inactiveToggleButton: {
+    borderRadius: 50,
+    margin: 5,
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    opacity: 0.5,
+  },
+  themeToggleButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    margin: 20,
+  },
 });
 
 export default Styles;
-- 
GitLab