solve camera off focus, load user histories

2024-07-22 00:41:05 +08:00
parent a6c5fc8f05
commit 220fa2dfd4
15 changed files with 329 additions and 137 deletions
--- a/screens/HistoryScreen.tsx
+++ b/screens/HistoryScreen.tsx
@@ -1,15 +1,45 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, BackHandler, Modal } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { Ionicons } from '@expo/vector-icons';
 import { RootState } from '../store';
-import { QRCode } from '../types';
+import { QRCode, QRCodeType } from '../types';
 import { toggleBookmark, deleteQRCode } from '../actions/qrCodeActions';
+import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
+import useFetchScannedHistories from '../hooks/useFetchScannedHistories';
+import { getScannedHistories } from '../api/qrCodeAPI';

 const HistoryScreen: React.FC = () => {
  const dispatch = useDispatch();
-  const qrCodes = useSelector((state: RootState) => state.qrCodes);
+  const qrCodes = useSelector((state: RootState) => state.qrCodes.qrCodes);
+  const { userAttributes } = useFetchUserAttributes();
+  console.log("sub: ", userAttributes?.sub);
+  const [scannedHistories, setScannedHistories] = useState<QRCodeType []| null>(null);
+  const [historiesLoading, setHistoriesLoading] = useState(false);
+  const [historiesError, setHistoriesError] = useState<string | null>(null);
+
+  const fetchHistories = useCallback(async () => {
+    if (!userAttributes?.sub) return;
+
+    try {
+      const data = await getScannedHistories(userAttributes.sub);
+      setScannedHistories(data as unknown as QRCodeType[]);
+    } catch (error: any) {
+      setHistoriesError(error.message);
+    } finally {
+      setHistoriesLoading(false);
+    }
+  }, [userAttributes?.sub]);
+
+  useEffect(() => {
+    if (userAttributes?.sub) {
+      fetchHistories();
+    }
+  }, [userAttributes?.sub, fetchHistories]);
+  console.log("scanned history: ", scannedHistories);
+  
+  

  const [selectedData, setSelectedData] = useState<string | null>(null);
  const [selectedScanResult, setSelectedScanResult] = useState<any | null>(null);
@@ -34,14 +64,22 @@ const HistoryScreen: React.FC = () => {
    return () => backHandler.remove();
  }, [selectedData]);

-  const filteredQrCodes = showBookmarks ? qrCodes.filter(qr => qr.bookmarked) : qrCodes.slice().reverse();
+  //const filteredQrCodes = showBookmarks ? qrCodes.filter(qr => qr.bookmarked) : qrCodes.slice().reverse();
+  const filteredQrCodes = showBookmarks ? scannedHistories.filter(qr => {
+    return qr.bookmarked
+  }) : scannedHistories;

-  const handleItemPress = (item: QRCode) => {
-    setSelectedData(item.data);
-    setSelectedScanResult(item.scanResult);
-    setSelectedType(item.type);
-    console.log('Selected QR code data:', item.data);
-    console.log('Selected QR code type:', item.type);
+  console.log("filtered", filteredQrCodes);
+  console.log("slice", qrCodes.slice().reverse());
+
+  const handleItemPress = (item: QRCodeType) => {
+    // setSelectedData(item.data);
+    // setSelectedScanResult(item.scanResult);
+    // setSelectedType(item.type);
+    //setSelectedData(item.contents);
+    setSelectedType(item.data.type);
+    console.log('Selected QR code data:', item);
+    // console.log('Selected QR code type:', item.type);
  };

  const confirmDelete = (index: number) => {
@@ -78,17 +116,18 @@ const HistoryScreen: React.FC = () => {
        data={filteredQrCodes}
        renderItem={({ item, index }) => {
          console.log('Rendering QR code item:', item);
-          const itemData = item.data;
          return (
            <View style={styles.itemContainer}>
              <View style={styles.itemLeft}>
                <TouchableOpacity onPress={() => handleItemPress(item)} style={styles.itemContent}>
                  <Image source={require('../assets/ScanIcon3.png')} style={styles.scanIcon} />
-                  <Text style={styles.dataText}>{itemData}</Text>
+                  <View style={styles.textContainer}>
+                    <Text style={styles.dataText} numberOfLines={1} ellipsizeMode="tail">{item.data.contents}</Text>
+                  </View>
                </TouchableOpacity>
-                <Text style={styles.dateText}>{new Date().toLocaleDateString('en-GB', {
-                  day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
-                })}</Text>
+                <Text style={styles.dateText}>{new Date(item.data.createdAt).toLocaleDateString('en-GB', {
+                  day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'})}
+                </Text>
              </View>
              <View style={styles.itemRight}>
                <TouchableOpacity onPress={() => dispatch(toggleBookmark(index))}>
@@ -101,7 +140,11 @@ const HistoryScreen: React.FC = () => {
            </View>
          );
        }}
-        keyExtractor={(item, index) => index.toString()}
+        keyExtractor={(item, index) => {
+          //console.log(item, index);
+          
+          return index.toString();
+        }}
        contentContainerStyle={styles.flatListContent}
      />
      {/* Modal for delete confirmation */}
@@ -161,7 +204,8 @@ const styles = StyleSheet.create({
    marginBottom: 10,
  },
  itemLeft: {
-    flexDirection: 'column',
+    flex: 1,
+    marginRight: 2,
  },
  itemContent: {
    flexDirection: 'row',
@@ -171,15 +215,20 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    alignItems: 'center',
  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 0,
+  },
  dataText: {
-    fontSize: 11,
+    fontSize: 12,
    color: '#000',
-    marginLeft: 10,
+    marginBottom: 7
  },
  dateText: {
    fontSize: 12,
-    color: '#000',
+    color: '#666',
    marginLeft: 10,
+    flex: 1
  },
  scanIcon: {
    width: 40,
--- a/screens/QRScannerScreen.tsx
+++ b/screens/QRScannerScreen.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native';
 import { Camera, CameraView, scanFromURLAsync } from 'expo-camera';
 import { QRCodeContext } from '../types';
 import axios from 'axios'; // For URL calls
 import { Ionicons } from '@expo/vector-icons'; // For icons
-import { useNavigation } from '@react-navigation/native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import * as ImagePicker from 'expo-image-picker';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { useDispatch } from 'react-redux';
@@ -25,6 +25,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
  const [scannedData, setScannedData] = useState<string>(''); // State for QR scanned Data
  const [dataType, setDataType] = useState<string>(''); // State for data type
  const [enableTorch, setEnableTorch] = useState<boolean>(false); // State for torch
+  const [cameraVisible, setCameraVisible] = useState<boolean>(true); // State to control camera visibility

  // Add state variables for scan results
  const [secureConnection, setSecureConnection] = useState<boolean | null>(null);
@@ -88,7 +89,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
    console.log('Sending QR code data to backend:', payload);

    try {
-      const response = await axios.post('https://localhost:8443/v1/api/qrcodetypes/detect', {
+      const response = await axios.post('http://192.168.1.30:8080/v1/qrcodetypes/scan', {
        data: payload,
      }, {
        headers: {
@@ -135,8 +136,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
          console.log('QR code data from image:', scannedResult[0].data);
        } else {
          setScannedData("No QR Code Found");
-          setTimeout(() => setScannedData(""), 4000);
+          //setTimeout(() => setScannedData(""), 4000);
          console.log("No QR code found in the selected image");
+          Alert.alert('No QR code found in the selected image.');
        }
      } catch (error) {
        console.error('Error scanning QR code from image:', error);
@@ -145,14 +147,28 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
    }
  };

+  // // Clear scan data when screen is focused
+  // useEffect(() => {
+  //   const unsubscribe = navigation.addListener('focus', () => {
+  //     clearScanDataInternal();
+  //     console.log("Screen focused, scan data cleared");
+  //   });
+  //   return unsubscribe;
+  // }, [navigation]);
+
  // Clear scan data when screen is focused
-  useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
+  useFocusEffect(
+    useCallback(() => {
+      setCameraVisible(true);
      clearScanDataInternal();
-      console.log("Screen focused, scan data cleared");
-    });
-    return unsubscribe;
-  }, [navigation]);
+      console.log("Screen focused, scan data cleared and camera enabled");
+
+      return () => {
+        setCameraVisible(false);
+        console.log("Screen unfocused, camera disabled");
+      };
+    }, [navigation])
+  );

  if (showSplash) {
    return (
@@ -178,12 +194,14 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
      <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>

      <View style={styles.cameraContainer}>
-        <CameraView
-          onBarcodeScanned={scanned ? undefined : ({ data }) => handlePayload(data)}
-          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
-          style={styles.camera}
-          enableTorch={enableTorch}
-        />
+        {cameraVisible && (
+          <CameraView
+            onBarcodeScanned={scanned ? undefined : ({ data }) => handlePayload(data)}
+            barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
+            style={styles.camera}
+            enableTorch={enableTorch}
+          />
+        )}

        <TouchableOpacity onPress={toggleTorch} style={styles.flashButton}>
          <Ionicons name="flashlight" size={24} color="#fff" />
--- a/screens/SettingsScreen.tsx
+++ b/screens/SettingsScreen.tsx
@@ -1,18 +1,7 @@
-import React, { useContext, useState } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
-import { QRCodeContext } from '../types';
 import { useAuthenticator } from '@aws-amplify/ui-react-native';
-import { fetchUserAttributes } from 'aws-amplify/auth';
 import useFetchUserAttributes from '../hooks/useFetchUserAttributes';

-async function handleFetchUserAttributes() {
-  try {
-    const userAttributes = await fetchUserAttributes();
-    console.log(userAttributes);
-  } catch (error) {
-    console.log(error);
-  }
-}

 function SignOutButton() {
  const { signOut } = useAuthenticator();
@@ -20,21 +9,7 @@ function SignOutButton() {
 }

 const SettingsScreen: React.FC = () => {
-  const qrCodeContext = useContext(QRCodeContext);
-  const setQrCodes = qrCodeContext ? qrCodeContext.setQrCodes : () => {};
  const { userAttributes } = useFetchUserAttributes();
-
-  const { user } = useAuthenticator((context) => {
-    console.log(context.user);
-    handleFetchUserAttributes();
-    return [context.user]
-  });
-  
-
-  const clearHistory = () => {
-    setQrCodes([]);
-  };
-
  const handleLinkPress = (url: string) => {
    Linking.openURL(url);
  };
@@ -44,7 +19,7 @@ const SettingsScreen: React.FC = () => {
      <Text style={styles.header}>Settings</Text>
      <View style={styles.profileSection}>
        <Text style={styles.sectionTitle}>Profile</Text>
-        {user ? (
+        {userAttributes ? (
          <View>
            <Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
            <SignOutButton />