99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import React, { useEffect, useLayoutEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './notification.styles';
|
|
import { useAppDispatch, useAppSelector, RootState } from '@store';
|
|
import { getStaffNotifications, markNotificationRead, clearNotifications } from './thunk';
|
|
import { NotificationItem as NotificationItemType } from '@interfaces';
|
|
import { Loader, NotificationItem } from '@components';
|
|
|
|
export const NotificationScreen = () => {
|
|
const dispatch = useAppDispatch();
|
|
const navigation = useNavigation();
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const { items, loading, error } = useAppSelector(
|
|
(state: RootState) => state.notifications,
|
|
);
|
|
const user_data = useAppSelector((state: RootState) => state.auth.user_data);
|
|
|
|
useEffect(() => {
|
|
if (user_data?.staffid) {
|
|
dispatch(getStaffNotifications(user_data.staffid));
|
|
}
|
|
}, [dispatch, user_data]);
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: 'Notifications',
|
|
headerRight: () => {
|
|
const hasUnread = items.some(n => String(n.isread) === '0');
|
|
if (!hasUnread) return null;
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.headerRightBtn}
|
|
onPress={() => {
|
|
if (user_data?.staffid) {
|
|
dispatch(clearNotifications(user_data.staffid));
|
|
}
|
|
}}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.clearAllText}>Clear All</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
},
|
|
});
|
|
}, [navigation, items, styles]);
|
|
|
|
const handleNotificationPress = (item: NotificationItemType) => {
|
|
if (String(item.isread) === '0' && user_data?.staffid) {
|
|
dispatch(
|
|
markNotificationRead({
|
|
staffId: user_data.staffid,
|
|
notificationId: item.id,
|
|
}),
|
|
);
|
|
}
|
|
// Note: You can add navigation logic here if `item.link` is provided
|
|
};
|
|
|
|
const renderItem = ({ item }: { item: NotificationItemType }) => {
|
|
return <NotificationItem item={item} onPress={handleNotificationPress} />;
|
|
};
|
|
|
|
if (loading) {
|
|
return <Loader message="Loading notifications..." />;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Icon name="alert-circle-outline" size={48} color={colors.textMuted} />
|
|
<Text style={styles.emptyTitle}>{error}</Text>
|
|
{/* <Text style={styles.emptySubtitle}>{error}</Text> */}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={item => item.id}
|
|
renderItem={renderItem}
|
|
contentContainerStyle={styles.listContent}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|