notification store and update in local storage

2025-10-07 15:33:24 +05:30
parent d197e31acb
commit 80fdb77590
12 changed files with 375 additions and 47 deletions
@@ -0,0 +1,170 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    FlatList,
+    StyleSheet,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+    addNotification,
+    removeNotification,
+    clearAllNotifications,
+} from '../../redux/notificationSlice';
+import LinearGradient from 'react-native-linear-gradient';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
+import AppView from '../../components/AppView';
+import Header from '../../components/common/Header';
+
+const Notification = () => {
+    const dispatch = useDispatch();
+    const notifications = useSelector(
+        (state: any) => state.notifications.notifications
+    );
+
+    const handleAdd = () => {
+        const newNotification = {
+            id: Date.now().toString(),
+            title: 'New Message',
+            message: 'You have a new message in your inbox.',
+            time: new Date().toLocaleString(),
+            read: false,
+        };
+        dispatch(addNotification(newNotification));
+    };
+
+    const handleDelete = (id: string) => {
+        dispatch(removeNotification(id));
+    };
+
+    const handleClearAll = () => {
+        dispatch(clearAllNotifications());
+    };
+
+    return (
+        <AppView>
+            {/* Header with Add and Clear All */}
+            <Header  title='Notifications' rightAction={<LinearGradient
+                colors={['#FF6B6B', '#FF8E53']}
+                style={styles.clearButtonGradient}>
+                <TouchableOpacity onPress={handleClearAll}>
+                    <Text style={styles.clearButtonText}>Delete All</Text>
+                </TouchableOpacity>
+            </LinearGradient>} 
+            />
+           
+
+            {/* Add Notification Button */}
+            {/* <LinearGradient
+        colors={['#4facfe', '#00f2fe']}
+        style={styles.addButtonGradient}>
+        <TouchableOpacity onPress={handleAdd}>
+          <Text style={styles.addButtonText}>Add Notification</Text>
+        </TouchableOpacity>
+      </LinearGradient> */}
+
+            {/* Notification List */}
+            <FlatList
+                data={notifications}
+                keyExtractor={(item) => item.id}
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.listContainer}
+                renderItem={({ item }) => (
+                    <LinearGradient
+                        colors={['#f5f7fa', '#c3cfe2']}
+                        style={styles.notificationCard}>
+                        <View style={styles.notificationContent}>
+                            <View style={{ flex: 1 }}>
+                                <Text style={styles.title}>{item.title}</Text>
+                                <Text style={styles.message}>{item.message}</Text>
+                                <Text style={styles.time}>{item.time}</Text>
+                            </View>
+                            <TouchableOpacity onPress={() => handleDelete(item.id)}>
+                                <Ionicons name="trash-outline" size={22} color="#e63946" />
+                            </TouchableOpacity>
+                        </View>
+                    </LinearGradient>
+                )}
+                ListEmptyComponent={
+                    <Text style={styles.emptyText}>No notifications found.</Text>
+                }
+            />
+        </AppView>
+    );
+};
+
+export default Notification;
+
+const styles = StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingTop: 12,
+    },
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#222',
+    },
+    clearButtonGradient: {
+        borderRadius: 8,
+        paddingVertical: 6,
+        paddingHorizontal: 14,
+    },
+    clearButtonText: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+    addButtonGradient: {
+        margin: 16,
+        borderRadius: 8,
+        paddingVertical: 10,
+        alignItems: 'center',
+    },
+    addButtonText: {
+        color: '#fff',
+        fontWeight: '600',
+        fontSize: 16,
+    },
+    listContainer: {
+        paddingHorizontal: 12,
+        paddingBottom: 30,
+    },
+    notificationCard: {
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 10,
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 5,
+        elevation: 2,
+    },
+    notificationContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    title: {
+        fontWeight: '700',
+        fontSize: 16,
+        color: '#333',
+    },
+    message: {
+        fontSize: 14,
+        color: '#555',
+        marginTop: 2,
+    },
+    time: {
+        fontSize: 12,
+        color: '#888',
+        marginTop: 4,
+    },
+    emptyText: {
+        textAlign: 'center',
+        marginTop: 60,
+        fontSize: 16,
+        color: '#999',
+    },
+});