106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import React, { useLayoutEffect, useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
StatusBar,
|
|
} 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 { INITIAL_NOTIFICATIONS } from '@mock-data';
|
|
|
|
export const NotificationScreen = () => {
|
|
const navigation = useNavigation();
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS);
|
|
|
|
// Mark all as read header button action
|
|
const handleMarkAllRead = () => {
|
|
setNotifications(prev =>
|
|
prev.map(item => ({ ...item, unread: false }))
|
|
);
|
|
};
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: 'Notifications',
|
|
headerRight: () => {
|
|
const hasUnread = notifications.some(n => n.unread);
|
|
if (!hasUnread) return null;
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.headerRightBtn}
|
|
onPress={handleMarkAllRead}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.clearAllText}>Read All</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
},
|
|
});
|
|
}, [navigation, notifications, styles]);
|
|
|
|
const toggleSingleRead = (id: string) => {
|
|
setNotifications(prev =>
|
|
prev.map(item =>
|
|
item.id === id ? { ...item, unread: !item.unread } : item
|
|
)
|
|
);
|
|
};
|
|
|
|
const renderItem = ({ item }: { item: typeof INITIAL_NOTIFICATIONS[0] }) => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.card, item.unread && styles.unreadCard]}
|
|
activeOpacity={0.7}
|
|
onPress={() => toggleSingleRead(item.id)}
|
|
>
|
|
{/* Left Side Styled Icon Circle */}
|
|
<View style={[styles.iconWrapper, { backgroundColor: `${item.iconColor}12` }]}>
|
|
<Icon name={item.iconName} size={18} color={item.iconColor} />
|
|
</View>
|
|
|
|
{/* Content Section */}
|
|
<View style={styles.contentContainer}>
|
|
<View style={styles.titleRow}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{item.title}
|
|
</Text>
|
|
{item.unread && <View style={styles.unreadDot} />}
|
|
</View>
|
|
<Text style={styles.description}>{item.description}</Text>
|
|
<Text style={styles.time}>{item.time}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* <StatusBar barStyle="light-content" /> */}
|
|
{notifications.length > 0 ? (
|
|
<FlatList
|
|
data={notifications}
|
|
keyExtractor={item => item.id}
|
|
renderItem={renderItem}
|
|
contentContainerStyle={styles.listContent}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
) : (
|
|
<View style={styles.emptyContainer}>
|
|
<Icon name="notifications-off-outline" size={48} color={colors.textMuted} />
|
|
<Text style={styles.emptyTitle}>All caught up!</Text>
|
|
<Text style={styles.emptySubtitle}>
|
|
When you get new updates or alerts, they will show up here.
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|