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
@@ -20,7 +20,7 @@ import { setUserData } from "../../redux/userSlice";
 import { TabNavigationProp } from "../../navigation/BottomTabs";
 import UserProfileStatus from "./UserProfileStatus";
 import AnimatedCard from "../../components/common/AnimatedCard";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
+import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
 import { apiCall } from "../../utils/ApiHelper";

 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -49,16 +49,16 @@ interface ActionItem {

 // Updated action items with a prettier pastel palette
 const organizerActions: ActionItem[] = [
-    { id: "1", title: "My Groups", subtitle: "Manage your groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
-    { id: "2", title: "Joined Groups", subtitle: "View member groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
-    { id: "3", title: "Requests", subtitle: "Check new requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
-    { id: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
+  { id: "1", title: "My Groups", subtitle: "Manage your groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
+  { id: "2", title: "Joined Groups", subtitle: "View member groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+  { id: "3", title: "Requests", subtitle: "Check new requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
+  { id: "4", title: "Create Group", subtitle: "Create a new group", action: "NAVIGATE_CREATE_GROUP", tab: "Requests", iconName: "people-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
 ];

 const userActions: ActionItem[] = [
-    { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "person-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
-    { id: "2", title: "Your Requests", subtitle: "Track your requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: '#FFF4D2', backTwo: '#FFB344' },
-    { id: "3", title: "Transactions", subtitle: "View your history", action: "TRANSACTION", iconName: "receipt-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
+  { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "person-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+  { id: "2", title: "Your Requests", subtitle: "Track your requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: '#FFF4D2', backTwo: '#FFB344' },
+  { id: "3", title: "Transactions", subtitle: "View your history", action: "TRANSACTION", iconName: "receipt-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
 ];

 const Home: React.FC = () => {
@@ -100,15 +100,15 @@ const Home: React.FC = () => {

  const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
    <View style={styles.cardWrapper}>
-        <AnimatedCard
-          key={item.id}
-          title={item.title}
-          subtitle={item.subtitle}
-          iconName={item.iconName}
-          backOne={item.backOne}
-          backTwo={item.backTwo}
-          onPress={() => handleActionPress(item)}
-        />
+      <AnimatedCard
+        key={item.id}
+        title={item.title}
+        subtitle={item.subtitle}
+        iconName={item.iconName}
+        backOne={item.backOne}
+        backTwo={item.backTwo}
+        onPress={() => handleActionPress(item)}
+      />
    </View>
  );

@@ -124,15 +124,16 @@ const Home: React.FC = () => {
          <Text style={styles.greeting}>Hello,</Text>
          <Text style={styles.userName}>{user.firstName || apiUser?.firstName || 'User'}</Text>
        </View>
-        <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
-          <Image source={getProfileImageUri()} style={styles.profileImage} />
+        <TouchableOpacity onPress={() => navigation.navigate("Notification" as never)}>
+          {/* <Image source={getProfileImageUri()} style={styles.profileImage} /> */}
+          <Ionicons name="notifications-outline" size={30} color={colors.textDark} />
        </TouchableOpacity>
      </View>
-      
+
      <UserProfileStatus />

      <Text style={styles.sectionTitle}>Quick Actions</Text>
-      
+
      <FlatList
        data={actions}
        renderItem={renderGridItem}
@@ -184,6 +185,7 @@ const styles = StyleSheet.create({
  },
  cardWrapper: {
    flex: 1,
-    marginHorizontal: 8,
+    // marginHorizontal: 8,
+    // backgroundColor:'red'
  },
 });
@@ -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',
+    },
+});
@@ -377,7 +377,7 @@ const Profile = () => {
      <View style={styles.header}>
        <Text style={styles.headerTitle}>User Profile</Text>
        <TouchableOpacity onPress={() => confirmLogout(navigation)} style={styles.refreshButton}>
-          <Ionicons name="log-out-outline" size={24} color={colors.Profile} />
+          <Ionicons name="log-out-outline" size={24} color={colors.primary} />
        </TouchableOpacity>
      </View>
      {/* if (fetching || !user) {
@@ -701,7 +701,7 @@ const styles = StyleSheet.create({
    borderBottomRightRadius: 20,
  },
  headerTitle: {
-    fontSize: 22, fontWeight: "600", color: colors.Profile
+    fontSize: 22, fontWeight: "600", color: colors.primary
  },
  refreshButton: {
    padding: 4,