isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Isky
2024-08-15 02:39:49 +08:00
parent dcd3399689
commit ecf174e1d6
3 changed files with 103 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ScannedDataBox.tsx
View File

@@ -459,7 +459,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ qrCodeId, clearScanData
{type === 'PHONE' && (
{type === 'PHONE Nume' && (
<TouchableOpacity style={styles.iconButton} onPress={() => Linking.openURL(contents)}>
<View style={styles.dividerHorizontal} />
<Ionicons name="call-outline" size={screenWidth * 0.045} color="#2196F3" />

41
screens/EmailScreen.tsx
View File

@@ -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 */}
<View style={styles.modalContainer}>
<ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={() => setIsModalVisible(false)} />
</View>
</TouchableOpacity>
</Modal>
@@ -295,6 +296,7 @@ useEffect(() => {
animationType="fade"
onRequestClose={() => setIsDeleteModalVisible(false)}
>
<View style={styles.modalOverlay}>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.modalTitle}>Are you sure?</Text>
@@ -315,6 +317,7 @@ useEffect(() => {
</View>
</View>
</View>
</View>
</Modal>
</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',

82
screens/HistoryScreen.tsx
View File

@@ -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);
setIsDeleteModalVisible(true);
}}>
<Ionicons name="close-circle-outline" size={screenWidth * 0.06} color="#ff69b4" />
<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.modalOverlay}>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<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',