304 lines
9.8 KiB
TypeScript
304 lines
9.8 KiB
TypeScript
import React, { useCallback, useState, useEffect } from 'react';
|
|
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Modal, ActivityIndicator, Dimensions, Animated } from 'react-native';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import ScannedDataBox from '../components/ScannedDataBox';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { RootState, AppDispatch } from '../store';
|
|
import { QRCodeType } from '../types';
|
|
import { toggleBookmark, deleteQRCode, setScannedHistories } from '../reducers/qrCodesReducer';
|
|
import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
|
|
import { getScannedHistories } from '../api/qrCodeAPI';
|
|
|
|
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
|
|
|
|
const HistoryScreen: React.FC = () => {
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
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 [isDeleteModalVisible, setIsDeleteModalVisible] = useState<boolean>(false);
|
|
const [historiesLoading, setHistoriesLoading] = useState(false);
|
|
const [historiesError, setHistoriesError] = useState<string | null>(null);
|
|
const [selectedQrCodeId, setSelectedQrCodeId] = useState<string | null>(null);
|
|
const [isModalVisible, setIsModalVisible] = useState<boolean>(false); // Modal for ScannedDataBox
|
|
|
|
|
|
const fetchHistories = useCallback(async () => {
|
|
if (!userAttributes?.sub) return;
|
|
|
|
try {
|
|
setHistoriesLoading(true);
|
|
const historiesData = await getScannedHistories();
|
|
dispatch(setScannedHistories(historiesData));
|
|
} catch (error: any) {
|
|
setHistoriesError(error.message);
|
|
} finally {
|
|
setHistoriesLoading(false);
|
|
}
|
|
}, [userAttributes?.sub, dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (userAttributes?.sub) {
|
|
fetchHistories();
|
|
}
|
|
}, [userAttributes?.sub, fetchHistories]);
|
|
|
|
const handleDeleteQrCode = useCallback((qrCodeId: string) => {
|
|
if (userAttributes?.sub) {
|
|
dispatch(deleteQRCode({ userId: userAttributes.sub, qrCodeId }));
|
|
setIsDeleteModalVisible(false);
|
|
}
|
|
}, [dispatch, userAttributes]);
|
|
|
|
|
|
const handleSelectQrCodeForView = (item: QRCodeType) => {
|
|
setSelectedQrCodeId(item.data.id || null);
|
|
setIsModalVisible(true); // Show ScannedDataBox Modal
|
|
};
|
|
|
|
const clearSelectedQrCodeData = () => {
|
|
setSelectedQrCodeId(null);
|
|
setIsModalVisible(false); // Close ScannedDataBox Modal
|
|
};
|
|
const filteredQrCodes = showBookmarks
|
|
? histories.filter((qr) => qr.bookmarked)
|
|
: histories;
|
|
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.headerContainer}>
|
|
<TouchableOpacity onPress={() => { setShowBookmarks(false); clearSelectedQrCodeData(); }}>
|
|
<Text style={!showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>History</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => { setShowBookmarks(true); clearSelectedQrCodeData(); }}>
|
|
<Text style={showBookmarks ? styles.headerTextActive : styles.headerTextInactive}>Bookmarks</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{historiesLoading && <ActivityIndicator size="large" color="#ff69b4" />}
|
|
|
|
{!historiesLoading && filteredQrCodes.length === 0 && (
|
|
<Text style={styles.emptyMessage}>
|
|
{showBookmarks ? 'No bookmarks available' : 'No history available'}
|
|
</Text>
|
|
)}
|
|
|
|
<FlatList
|
|
data={filteredQrCodes}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.itemContainer}>
|
|
<View style={styles.itemLeft}>
|
|
<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>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<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({ userId: userAttributes.sub, qrCode: item}))}>
|
|
<Ionicons name={item.bookmarked ? "bookmark" : "bookmark-outline"} size={screenWidth * 0.06} color={item.bookmarked ? "#2196F3" : "#ff69b4"} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => {
|
|
setQrCodeToDelete(item.data.id);
|
|
setIsDeleteModalVisible(true);
|
|
}}>
|
|
<Ionicons name="trash-outline" size={screenWidth * 0.06} color="#ff69b4" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
keyExtractor={(item, index) => index.toString()}
|
|
contentContainerStyle={styles.flatListContent}
|
|
/>
|
|
|
|
{/* Modal for ScannedDataBox */}
|
|
<Modal
|
|
visible={isModalVisible}
|
|
transparent={true}
|
|
animationType="slide"
|
|
onRequestClose={clearSelectedQrCodeData}
|
|
>
|
|
{/* The greyspace outside, made clickable to close the modal */}
|
|
<TouchableOpacity
|
|
style={styles.scannedDataBoxModalOverlay}
|
|
activeOpacity={1}
|
|
onPressOut={clearSelectedQrCodeData}
|
|
>
|
|
{/* Ensure ScannedDataBox does not render another modal */}
|
|
<View style={styles.scannedDataBoxModalContainer}>
|
|
<ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedQrCodeData} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
{/* Modal to confirm deletion */}
|
|
<Modal
|
|
transparent={true}
|
|
visible={isDeleteModalVisible}
|
|
animationType="fade"
|
|
onRequestClose={() => setIsDeleteModalVisible(false)}
|
|
>
|
|
<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={() => handleDeleteQrCode(qrCodeToDelete!)}>
|
|
<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>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f8f0fc',
|
|
padding: 20,
|
|
paddingTop: screenHeight * 0.05,
|
|
},
|
|
headerContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
marginBottom: 20,
|
|
},
|
|
headerTextActive: {
|
|
fontSize: screenWidth * 0.06,
|
|
fontWeight: 'bold',
|
|
color: '#ff69b4',
|
|
},
|
|
headerTextInactive: {
|
|
fontSize: screenWidth * 0.06,
|
|
fontWeight: 'bold',
|
|
color: '#ccc',
|
|
},
|
|
itemContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
backgroundColor: '#ffe6f0',
|
|
padding: screenWidth * 0.025,
|
|
borderRadius: screenWidth * 0.025,
|
|
marginBottom: screenWidth * 0.025,
|
|
},
|
|
itemLeft: {
|
|
flex: 1,
|
|
marginRight: 2,
|
|
},
|
|
itemContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
itemRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
marginLeft: 0,
|
|
},
|
|
dataText: {
|
|
fontSize: screenWidth * 0.03,
|
|
color: '#000',
|
|
marginBottom: screenWidth * 0.02,
|
|
},
|
|
dateText: {
|
|
fontSize: screenWidth * 0.03,
|
|
color: '#666',
|
|
marginLeft: screenWidth * 0.02,
|
|
flex: 1,
|
|
},
|
|
scanIcon: {
|
|
width: screenWidth * 0.1,
|
|
height: screenWidth * 0.1,
|
|
},
|
|
flatListContent: {
|
|
paddingBottom: screenHeight * 0.1,
|
|
},
|
|
emptyMessage: {
|
|
textAlign: 'center',
|
|
fontSize: screenWidth * 0.04,
|
|
color: '#ff69b4',
|
|
marginVertical: screenHeight * 0.02,
|
|
},
|
|
modalOverlay: {
|
|
flex: 1,
|
|
justifyContent: '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',
|
|
borderRadius: screenWidth * 0.025,
|
|
padding: screenWidth * 0.05,
|
|
alignItems: 'center',
|
|
},
|
|
modalTitle: {
|
|
fontSize: screenWidth * 0.05,
|
|
fontWeight: 'bold',
|
|
marginBottom: screenHeight * 0.01,
|
|
},
|
|
modalText: {
|
|
color: '#ff69b4',
|
|
fontSize: screenWidth * 0.04,
|
|
marginBottom: screenHeight * 0.02,
|
|
textAlign: 'center',
|
|
},
|
|
modalButtons: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
},
|
|
modalButton: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
padding: screenWidth * 0.025,
|
|
},
|
|
modalButtonText: {
|
|
fontSize: screenWidth * 0.04,
|
|
color: '#000',
|
|
},
|
|
scannedDataBoxModalOverlay: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
scannedDataBoxModalContainer: {
|
|
marginHorizontal: '5%',
|
|
borderRadius: screenWidth * 0.025,
|
|
backgroundColor: 'white',
|
|
padding: screenWidth * 0.025,
|
|
elevation: 5,
|
|
},
|
|
});
|
|
|
|
export default HistoryScreen;
|