From e70202b7e297de4e44cebb51b90abd250552aab5 Mon Sep 17 00:00:00 2001
From: Iskubee <iskandershah_ss43@hotmail.com>
Date: Sat, 8 Jun 2024 10:29:57 +0800
Subject: [PATCH] updates UI and testing Hisory page

---
 App.tsx | 132 ++++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 91 insertions(+), 41 deletions(-)

diff --git a/App.tsx b/App.tsx
index 5af7865..05a66d0 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,13 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import { Text, View, StyleSheet, Button, ActivityIndicator } from 'react-native';
+import React, { useState, useEffect, createContext, useContext } from 'react';
+import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { CameraView, Camera } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
 
+// Create a Context for QR code data
+const QRCodeContext = createContext();
+
 const Tab = createBottomTabNavigator();
 
 function QRScannerScreen() {
+  const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context
   const [hasPermission, setHasPermission] = useState(null);
   const [scanned, setScanned] = useState(false);
   const [showSplash, setShowSplash] = useState(true);
@@ -17,16 +21,18 @@ function QRScannerScreen() {
     const initializeApp = async () => {
       const { status } = await Camera.requestCameraPermissionsAsync();
       setHasPermission(status === 'granted');
-      setShowSplash(false);
+      setShowSplash(false); // Hide splash screen after initializing
     };
 
     initializeApp();
   }, []);
 
   const handleBarCodeScanned = ({ type, data }) => {
-    setScanned(true);
-    setScannedData(`Type: ${type}\nData: ${data}`);
-    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
+    setScanned(true); // Mark as scanned
+    const newScannedData = `Type: ${type}\nData: ${data}`;
+    setScannedData(newScannedData); // Save scanned data
+    setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history
+    alert(`Bar code with type ${type} and data ${data} has been scanned!`); // Show an alert
   };
 
   if (showSplash) {
@@ -40,31 +46,43 @@ function QRScannerScreen() {
   if (hasPermission === null) {
     return <Text>Requesting for camera permission</Text>;
   }
+
   if (hasPermission === false) {
     return <Text>No access to camera</Text>;
   }
 
   return (
     <View style={styles.container}>
+      {/* Header banner */}
       <View style={styles.banner}>
         <Text style={styles.headerText}>SafeQR</Text>
       </View>
+      {/* Welcome message */}
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
+      {/* Camera view container */}
       <View style={styles.cameraContainer}>
         <CameraView
-          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
-          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
-          style={styles.camera}
+          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned} // Disable scanner if already scanned
+          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }} // Scanner settings
+          style={styles.camera} // Apply styles
         />
       </View>
+      
+      {/* Display scanned data */}
       {scannedData !== '' && (
         <View style={styles.dataBox}>
           <Text style={styles.dataText}>{scannedData}</Text>
         </View>
       )}
+
+      {/* Button to scan again */}
       {scanned && (
-        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
+        <TouchableOpacity style={styles.button} onPress={() => setScanned(false)}>
+          <Text style={styles.buttonText}>Tap to Scan Again</Text>
+        </TouchableOpacity>
       )}
+
+      {/* Menu (Placeholder for additional menu items) */}
       <View style={styles.menu}>
         {/* Your existing menu items */}
       </View>
@@ -73,9 +91,20 @@ function QRScannerScreen() {
 }
 
 function HistoryScreen() {
+  const { qrCodes } = useContext(QRCodeContext); // Access context
+
   return (
     <View style={styles.container}>
       <Text style={styles.welcomeText}>History Screen</Text>
+      <FlatList
+        data={qrCodes}
+        renderItem={({ item }) => (
+          <View style={styles.dataBox}>
+            <Text style={styles.dataText}>{item}</Text>
+          </View>
+        )}
+        keyExtractor={(item, index) => index.toString()}
+      />
     </View>
   );
 }
@@ -96,45 +125,53 @@ function ProfileScreen() {
   );
 }
 
+// Main App component with bottom tab navigation
 export default function App() {
+  const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes
+
   return (
-    <NavigationContainer>
-      <Tab.Navigator
-        screenOptions={({ route }) => ({
-          tabBarIcon: ({ color, size }) => {
-            let iconName;
+    <QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
+      <NavigationContainer>
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarIcon: ({ color, size }) => {
+              let iconName;
 
-            if (route.name === 'QR Scanner') {
-              iconName = 'qr-code-outline';
-            } else if (route.name === 'History') {
-              iconName = 'time-outline';
-            } else if (route.name === 'Settings') {
-              iconName = 'settings-outline';
-            } else if (route.name === 'Profile') {
-              iconName = 'person-outline';
-            }
+              // Set different icons for each tab
+              if (route.name === 'QR Scanner') {
+                iconName = 'qr-code-outline';
+              } else if (route.name === 'History') {
+                iconName = 'time-outline';
+              } else if (route.name === 'Settings') {
+                iconName = 'settings-outline';
+              } else if (route.name === 'Profile') {
+                iconName = 'person-outline';
+              }
 
-            return <Ionicons name={iconName} size={size} color={color} />;
-          },
-        })}
-        tabBarOptions={{
-          activeTintColor: 'tomato',
-          inactiveTintColor: 'gray',
-        }}
-      >
-        <Tab.Screen name="QR Scanner" component={QRScannerScreen} />
-        <Tab.Screen name="History" component={HistoryScreen} />
-        <Tab.Screen name="Settings" component={SettingsScreen} />
-        <Tab.Screen name="Profile" component={ProfileScreen} />
-      </Tab.Navigator>
-    </NavigationContainer>
+              // Return the appropriate icon
+              return <Ionicons name={iconName} size={size} color={color} />;
+            },
+          })}
+          tabBarOptions={{
+            activeTintColor: 'tomato', // Active tab color
+            inactiveTintColor: 'gray', // Inactive tab color
+          }}
+        >
+          <Tab.Screen name="QR Scanner" component={QRScannerScreen} />
+          <Tab.Screen name="History" component={HistoryScreen} />
+          <Tab.Screen name="Settings" component={SettingsScreen} />
+          <Tab.Screen name="Profile" component={ProfileScreen} />
+        </Tab.Navigator>
+      </NavigationContainer>
+    </QRCodeContext.Provider>
   );
 }
 
+// StyleSheet for styling components
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#f8f0fc", // light purple background
+    backgroundColor: '#fa5da2', 
   },
   splashContainer: {
     flex: 1,
@@ -143,7 +180,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f0fc", // light purple background
   },
   banner: {
-    backgroundColor: "#ff69b4", // pink background
+    backgroundColor: "#333", // dark background
     paddingVertical: 10,
     alignItems: "center",
   },
@@ -155,7 +192,7 @@ const styles = StyleSheet.create({
     textAlign: "center",
     fontSize: 20,
     marginVertical: 10, // Adjusted margin
-    color: "#ff69b4", // pink color
+    color: "white", 
   },
   cameraContainer: {
     flex: 1,
@@ -166,6 +203,19 @@ const styles = StyleSheet.create({
     width: 300,
     height: 300,
   },
+  button: {
+    backgroundColor: '#333',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+  },
   dataBox: {
     marginVertical: 10,
     padding: 10,