Fixed UI bugs for PHONE/SMS/TEXT on EmailScreen and History Screen

2024-08-15 02:39:49 +08:00
parent dcd3399689
commit ecf174e1d6
3 changed files with 103 additions and 70 deletions
--- a/screens/EmailScreen.tsx
+++ b/screens/EmailScreen.tsx
@@ -24,10 +24,10 @@ const EmailScreen: React.FC = () => {
  const [messageToDelete, setMessageToDelete] = useState(null);

  // Start scanning inbox only once when the component mounts
-useEffect(() => {
-  startInboxScanning(); 
-  fetchUserEmail();
-}, []);
+  useEffect(() => {
+    startInboxScanning(); 
+    fetchUserEmail();
+  }, []);

  // Function to fetch user email
  const fetchUserEmail = async () => {
@@ -174,7 +174,6 @@ useEffect(() => {
  );

  const handleUrlClick = (id) => {
-    console.log('handleURLClik ID :',)
    setSelectedQrCodeId(id);
    setIsModalVisible(true);
  };
@@ -279,12 +278,14 @@ useEffect(() => {
      >
        {/* The greyspace outside, made clickable to close the modal */}
        <TouchableOpacity
-          style={styles.modalContainer}
+          style={styles.modalOverlay}
          activeOpacity={1}
          onPressOut={() => setIsModalVisible(false)}
        >
          {/* Ensure ScannedDataBox does not render another modal */}
-          <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
+          <View style={styles.modalContainer}>
+            <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
+          </View>
        </TouchableOpacity>
      </Modal>

@@ -295,23 +296,25 @@ useEffect(() => {
        animationType="fade"
        onRequestClose={() => setIsDeleteModalVisible(false)}
      >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Are you sure?</Text>
-            <Text style={styles.modalText}>This will only delete the entry on the app and not the actual email.</Text>
-            <View style={styles.modalButtons}>
-              <TouchableOpacity 
-                style={styles.modalButton} 
-                onPress={confirmDelete}
-              >
-                <Text style={styles.modalButtonText}>Yes, Delete</Text>
-              </TouchableOpacity>
-              <TouchableOpacity 
-                style={styles.modalButton} 
-                onPress={() => setIsDeleteModalVisible(false)}
-              >
-                <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
-              </TouchableOpacity>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalContent}>
+              <Text style={styles.modalTitle}>Are you sure?</Text>
+              <Text style={styles.modalText}>This will only delete the entry on the app and not the actual email.</Text>
+              <View style={styles.modalButtons}>
+                <TouchableOpacity 
+                  style={styles.modalButton} 
+                  onPress={confirmDelete}
+                >
+                  <Text style={styles.modalButtonText}>Yes, Delete</Text>
+                </TouchableOpacity>
+                <TouchableOpacity 
+                  style={styles.modalButton} 
+                  onPress={() => setIsDeleteModalVisible(false)}
+                >
+                  <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
+                </TouchableOpacity>
+              </View>
            </View>
          </View>
        </View>
@@ -416,38 +419,38 @@ const styles = StyleSheet.create({
  },
  banner: {
    position: 'absolute',
-    top: screenHeight * 0.45, // Adjusts the banner to appear in the middle of the screen
-    left: screenWidth * 0.1,  // Adjust these values to center the banner as needed
+    top: screenHeight * 0.45, 
+    left: screenWidth * 0.1,  
    right: screenWidth * 0.1,
    backgroundColor: '#ff69b4',
-    paddingVertical: screenHeight * 0.02, // Adjust the height of the banner
+    paddingVertical: screenHeight * 0.02, 
    paddingHorizontal: screenWidth * 0.05,
    borderRadius: screenWidth * 0.05,
    alignItems: 'center',
    justifyContent: 'center',
-    zIndex: 10, // Ensure it appears above other elements
+    zIndex: 10, 
  },
  errorBanner: {
    position: 'absolute',
-    top: screenHeight * 0.4, // Adjusts the banner to appear in the middle of the screen
-    left: screenWidth * 0.1,  // Adjust these values to center the banner as needed
+    top: screenHeight * 0.4,
+    left: screenWidth * 0.1,
    right: screenWidth * 0.1,
    backgroundColor: '#ff69b4',
-    paddingVertical: screenHeight * 0.02, // Adjust the height of the banner
+    paddingVertical: screenHeight * 0.02,
    paddingHorizontal: screenWidth * 0.05,
    borderRadius: screenWidth * 0.05,
    alignItems: 'center',
    justifyContent: 'center',
-    zIndex: 10, // Ensure it appears above other elements
-  },
-  bannerText: {
+    zIndex: 10,
+  }, bannerText: {
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
    fontSize: screenWidth * 0.04,
  },
+  
  innerModalContainer: {
-    backgroundColor: '#ffe6f0', // pink box color
+    backgroundColor: '#ffe6f0',
    padding: screenWidth * 0.05,
    borderRadius: screenWidth * 0.03,
    alignItems: 'center',
@@ -456,7 +459,7 @@ const styles = StyleSheet.create({
    position: 'absolute',
    top: screenWidth * 0.02,
    right: screenWidth * 0.02,
-    zIndex: 1, // Ensure it is above other content
+    zIndex: 1,
  },
  deleteButtonContainer: {
    flexDirection: 'row',
@@ -469,12 +472,18 @@ const styles = StyleSheet.create({
    color: '#ff69b4',
    fontSize: screenWidth * 0.035,
  },
-  modalContainer: {
+  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
-    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
+  modalContainer: {
+    marginHorizontal: '5%',
+    borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
+    padding: screenWidth * 0.025,
+    elevation: 5,
+  },
  modalContent: {
    width: '80%',
    backgroundColor: 'white',
--- a/screens/HistoryScreen.tsx
+++ b/screens/HistoryScreen.tsx
@@ -16,8 +16,10 @@ const HistoryScreen: React.FC = () => {
  const histories = useSelector((state: RootState) => state.qrCodes.histories);
  const { userAttributes } = useFetchUserAttributes();
  const [showBookmarks, setShowBookmarks] = useState<boolean>(false);
+
  const [qrCodeToDelete, setQrCodeToDelete] = useState<string | null>(null);
-  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState<boolean>(false);
+  const [isScannedDataModalVisible, setIsScannedDataModalVisible] = useState<boolean>(false);
  const [historiesLoading, setHistoriesLoading] = useState(false);
  const [historiesError, setHistoriesError] = useState<string | null>(null);
  const [selectedQrCodeId, setSelectedQrCodeId] = useState<string | null>(null);
@@ -42,30 +44,34 @@ const HistoryScreen: React.FC = () => {
    }
  }, [userAttributes?.sub, fetchHistories]);

-  const handleDelete = useCallback((qrCodeId: string) => {
+  const handleDeleteQrCode = useCallback((qrCodeId: string) => {
    if (userAttributes?.sub) {
      dispatch(deleteQRCode({ userId: userAttributes.sub, qrCodeId }));
-      setIsModalVisible(false);
+      setIsDeleteModalVisible(false);
    }
  }, [dispatch, userAttributes]);

-  const filteredQrCodes = showBookmarks ? histories.filter(qr => qr.bookmarked) : histories;
-
-  const handleItemPress = (item: QRCodeType) => {
+  const handleSelectQrCodeForView = (item: QRCodeType) => {
    setSelectedQrCodeId(item.data.id || null);
+    setIsScannedDataModalVisible(true);
  };

-  const clearSelectedData = () => {
+  const clearSelectedQrCodeData = () => {
    setSelectedQrCodeId(null);
+    setIsScannedDataModalVisible(false);
  };

+  const filteredQrCodes = showBookmarks
+    ? histories.filter((qr) => qr.bookmarked)
+    : histories;
+
  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
-        <TouchableOpacity onPress={() => { setShowBookmarks(false); clearSelectedData(); }}>
+        <TouchableOpacity onPress={() => { setShowBookmarks(false); clearSelectedQrCodeData(); }}>
          <Text style={!showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>History</Text>
        </TouchableOpacity>
-        <TouchableOpacity onPress={() => { setShowBookmarks(true); clearSelectedData(); }}>
+        <TouchableOpacity onPress={() => { setShowBookmarks(true); clearSelectedQrCodeData(); }}>
          <Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
        </TouchableOpacity>
      </View>
@@ -78,18 +84,12 @@ const HistoryScreen: React.FC = () => {
        </Text>
      )}

-      {selectedQrCodeId && (
-        <View style={styles.scannedDataBoxContainer}>
-          <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedData} />
-        </View>
-      )}
-
      <FlatList
        data={filteredQrCodes}
        renderItem={({ item }) => (
          <View style={styles.itemContainer}>
            <View style={styles.itemLeft}>
-              <TouchableOpacity onPress={() => handleItemPress(item)} style={styles.itemContent}>
+              <TouchableOpacity onPress={() => handleSelectQrCodeForView(item)} style={styles.itemContent}>
                <Image source={require('../assets/ScanIcon3.png')} style={styles.scanIcon} />
                <View style={styles.textContainer}>
                  <Text style={styles.dataText} numberOfLines={1} ellipsizeMode="tail">{item.data.contents}</Text>
@@ -105,9 +105,9 @@ const HistoryScreen: React.FC = () => {
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {
                setQrCodeToDelete(item.data.id);
-                setIsModalVisible(true);
-                }}>
-                <Ionicons name="close-circle-outline" size={screenWidth * 0.06} color="#ff69b4" />
+                setIsDeleteModalVisible(true);
+              }}>
+                <Ionicons name="trash-outline" size={screenWidth * 0.06} color="#ff69b4" />
              </TouchableOpacity>
            </View>
          </View>
@@ -116,21 +116,38 @@ const HistoryScreen: React.FC = () => {
        contentContainerStyle={styles.flatListContent}
      />

+      {/* Modal for ScannedDataBox */}
+      <Modal
+        visible={isScannedDataModalVisible}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={clearSelectedQrCodeData}
+      >
+        <View style={styles.modalOverlay}>
+          <TouchableOpacity style={styles.modalOverlayTouchable} onPress={clearSelectedQrCodeData} activeOpacity={1}>
+            <View style={styles.modalContainer}>
+              <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedQrCodeData} />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </Modal>
+
+      {/* Modal to confirm deletion */}
      <Modal
        transparent={true}
-        visible={isModalVisible}
+        visible={isDeleteModalVisible}
        animationType="fade"
-        onRequestClose={() => setIsModalVisible(false)}
+        onRequestClose={() => setIsDeleteModalVisible(false)}
      >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
            <Text style={styles.modalTitle}>Are you sure?</Text>
            <Text style={styles.modalText}>If bookmarked, this will be removed from both History and Bookmarks.</Text>
            <View style={styles.modalButtons}>
-              <TouchableOpacity style={styles.modalButton} onPress={() => handleDelete(qrCodeToDelete!)}>
+              <TouchableOpacity style={styles.modalButton} onPress={() => handleDeleteQrCode(qrCodeToDelete!)}>
                <Text style={styles.modalButtonText}>Yes, Delete</Text>
              </TouchableOpacity>
-              <TouchableOpacity style={styles.modalButton} onPress={() => setIsModalVisible(false)}>
+              <TouchableOpacity style={styles.modalButton} onPress={() => setIsDeleteModalVisible(false)}>
                <Text style={[styles.modalButtonText, { color: '#ff69b4' }]}>No, Keep It</Text>
              </TouchableOpacity>
            </View>
@@ -146,7 +163,7 @@ const styles = StyleSheet.create({
    flex: 1,
    backgroundColor: '#f8f0fc',
    padding: 20,
-    paddingTop: screenHeight * 0.05, // Add padding from the top
+    paddingTop: screenHeight * 0.05,
  },
  headerContainer: {
    flexDirection: 'row',
@@ -212,15 +229,22 @@ const styles = StyleSheet.create({
    color: '#ff69b4',
    marginVertical: screenHeight * 0.02,
  },
-  scannedDataBoxContainer: {
-    marginBottom: screenHeight * 0.02,
-  },
-  modalContainer: {
+  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
-    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
+  modalOverlayTouchable: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  modalContainer: {
+    marginHorizontal: '5%',
+    borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
+    padding: screenWidth * 0.025,
+    elevation: 5,
+  },
  modalContent: {
    width: '80%',
    backgroundColor: 'white',