feat: Group header props, add minimum bound for page size, and expose 'mark as read' functionality on click (#40)

* feat: Group header props, add minimum bound for page size, and expose 'mark as read' functionality on click

* fix: update test cases

* refactor: change inline key extractor function

* fix: Clear notification icon count related bug fix

* fix: update readme

* refactor: Add hideDelete prop in card props and ui refactor

* fix: move title prop inside inboxHeaderProps

Author: abhay-keyvalue

README.md

@@ -110,16 +110,13 @@ Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
 customStyles | Object for custom styling |  StyleProps | {} |
-title |  Title of the notification inbox |  string | "Notifications" |
-hideHeader | Toggle to hide or show the header section |  boolean | false |
-hideClearAll | Toggle to hide or show the clear all button |  boolean | false |
 darkMode |  Toggle to enable dark mode|  boolean | false |
 itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) |  number | 20 |
-cardProps | Props for customizing the notification cards | { hideAvatar: boolean } | { hideAvatar: false } |
+cardProps | Props for customizing the notification cards | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false } |
 customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
 onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
-customHeader | Custom header component | JSX Element | null |
+inboxHeaderProps | Props for customizing the header | InboxHeaderProps | { title: "Notifications", hideHeader: false, hideClearAll: false, customHeader: null, showBackButton:false, backButton: null, onBackPress: ()=> null } |
 customFooter | Custom footer component | JSX Element | null |
 customLoader | Custom component to display the initial loading state| JSX Element | null |
 customErrorWindow | Custom error window | JSX Element | null |
@@ -174,7 +171,7 @@ Here are the available theme options:
 Here are the custom style options for the notification inbox:
 
 ```js
-    export type StyleProps = {
+    type StyleProps = {
       notificationIcon?: {
         size?: number;
       };
@@ -216,6 +213,27 @@ Here are the custom style options for the notification inbox:
       };
     };
 ```
+#### CardProps
+```js
+    type CardProps = {
+      hideAvatar?: boolean;
+      disableAutoMarkAsRead?: boolean;
+      hideDelete?: boolean;
+    };
+```
+
+#### InboxHeaderProps
+```js
+    type InboxHeaderProps = {
+      title?: string;
+      hideHeader?: boolean;
+      hideClearAll?: boolean;
+      customHeader?: JSX.Element | null;
+      showBackButton?: boolean;
+      backButton?: JSX.Element;
+      onBackPress?: () => void;
+    };
+```
 
 ## 3. Hooks
 
@@ -297,7 +315,7 @@ function MyContainer(): React.JSX.Element {
         title="Notifications"
         hideHeader={false}
         darkMode={false}
-        cardProps={{hideAvatar: false}}
+        cardProps={{hideAvatar: false, disableAutoMarkAsRead: false}}
       />
     </View>
   );

example/App.tsx

@@ -11,7 +11,13 @@ const Stack = createNativeStackNavigator();
 function MyStack() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name='Home' component={Home} />
+      <Stack.Screen
+        name='Home'
+        options={{
+          headerShown: false
+        }}
+        component={Home}
+      />
       <Stack.Screen
         name='Notifications'
         options={{
@@ -31,11 +37,7 @@ function App(): React.JSX.Element {
 
   return (
     <NavigationContainer>
-      <SirenProvider
-        config={config}
-      >
-        {MyStack()}
-      </SirenProvider>
+      <SirenProvider config={config}>{MyStack()}</SirenProvider>
     </NavigationContainer>
   );
 }

example/screens/home.tsx

@@ -19,24 +19,24 @@ const badgeThemes = [
   {
     light: {
       badgeStyle: {
-        color: 'black',
-      }, 
+        color: 'black'
+      }
     },
     dark: {
       badgeStyle: {
-        color: 'green', 
+        color: 'green'
       }
     }
   },
   {
     light: {
       badgeStyle: {
-        color: 'blue',
+        color: 'blue'
       }
     },
     dark: {
       badgeStyle: {
-        color: 'pink',
+        color: 'pink'
       }
     }
   }
@@ -48,7 +48,7 @@ function Home(): React.JSX.Element {
   const [showTestingWindow, setShowTestingWindow] = useState(false);
   const [showCustomNotification, setShowCustomNotification] = useState(false);
   const [badgeThemeIndex, setBadgeThemeIndex] = useState(0);
-  const [showNetwork, setShowNetwork] = useState(true);
+  const [showNetwork, setShowNetwork] = useState(false);
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? '#000' : '#FFF'
@@ -79,12 +79,9 @@ function Home(): React.JSX.Element {
         </View>
         {showTestingWindow && (
           <View style={styles.testingWindowInnerContainer}>
-            {renderButton(
-              `${showNetwork ? 'Hide' : 'Show'} network`,
-              () => {
-                setShowNetwork((showNetwork) => !showNetwork);
-              }
-            )}
+            {renderButton(`${showNetwork ? 'Hide' : 'Show'} network`, () => {
+              setShowNetwork((showNetwork) => !showNetwork);
+            })}
             {renderButton(`${showCustomNotification ? 'Default' : 'Custom'}-N-Icon`, () =>
               setShowCustomNotification((showCustomNotification) => !showCustomNotification)
             )}
@@ -120,20 +117,24 @@ function Home(): React.JSX.Element {
         backgroundColor={backgroundStyle.backgroundColor}
       />
       <View style={styles.contentContainer}>
-        <SirenInboxIcon
-          theme={badgeThemes[badgeThemeIndex]}
-          customStyles={{
-            notificationIcon: {
-              size: 60
-            }
-          }}
-          notificationIcon={showCustomNotification ? renderNotificationIcon() : undefined}
-          onPress={() => navigation.navigate('Notifications')}
-        />
-        <Text>Siren Notification Icon Theme Testing</Text>
-        {showNetwork && <NetworkLogDebugModal />}
+        <View style={styles.iconContainer}>
+          <SirenInboxIcon
+            theme={badgeThemes[badgeThemeIndex]}
+            customStyles={{
+              notificationIcon: {
+                size: 30
+              }
+            }}
+            notificationIcon={showCustomNotification ? renderNotificationIcon() : undefined}
+            onPress={() => navigation.navigate('Notifications')}
+          />
+        </View>
+        <View style={styles.contentContainer}>
+          <Text>Home screen</Text>
+          {showNetwork && <NetworkLogDebugModal />}
+        </View>
+        {testingWindow()}
       </View>
-      {testingWindow()}
     </SafeAreaView>
   );
 }
@@ -171,7 +172,7 @@ const styles = StyleSheet.create({
   },
   testingWindowInnerContainer: {
     flexWrap: 'wrap',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   whiteLabel: {
     color: '#fff',
@@ -187,6 +188,12 @@ const styles = StyleSheet.create({
     margin: 6,
     borderRadius: 4,
     height: 30
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 10,
+    zIndex:2,
   }
 });
 

example/screens/notifications.tsx

@@ -40,10 +40,10 @@ function Notifications(): React.JSX.Element {
   const [showTestingWindow, setShowTestingWindow] = useState(false);
   const [sdkDarkModeEnabled, setSdkDarkModeEnabled] = useState(false);
   const [showCustomHeader, setShowCustomHeader] = useState(false);
-  const [showCustomFooter, setShowCustomFooter] = useState(true);
+  const [showCustomFooter, setShowCustomFooter] = useState(false);
   const [hideHeader, setHideHeader] = useState(false);
   const [hideAvatar, setHideAvatar] = useState(false);
-  const [showNetwork, setShowNetwork] = useState(true);
+  const [showNetwork, setShowNetwork] = useState(false);
   const [windowThemeIndex, setWindowThemeIndex] = useState(0);
   const [showCustomEmptyComponent, setShowCustomEmptyComponent] = useState(false);
   const [showCustomNotificationCard, setShowCustomNotificationCard] = useState(false);
@@ -52,7 +52,7 @@ function Notifications(): React.JSX.Element {
     backgroundColor: isDarkMode ? '#000' : '#FFF'
   };
 
-  const { markNotificationsAsReadByDate, markAsRead } = useSiren();
+  const { markNotificationsAsReadByDate } = useSiren();
 
   const renderListEmpty = () => {
     return (
@@ -164,13 +164,17 @@ function Notifications(): React.JSX.Element {
       <View style={styles.contentContainer}>
         <SirenInbox
           title='Siren Notifications'
-          hideHeader={hideHeader}
+          inboxHeaderProps={{
+            hideHeader: hideHeader,
+            customHeader: showCustomHeader ? renderCustomHeader() : undefined,
+            showBackButton: true,
+            onBackPress: () => navigation.goBack(),
+          }}
           darkMode={sdkDarkModeEnabled}
-          cardProps={{ hideAvatar: hideAvatar, showMedia: true }}
+          cardProps={{ hideAvatar: hideAvatar, disableAutoMarkAsRead: false }}
           theme={windowThemes[windowThemeIndex]}
           customFooter={showCustomFooter ? renderCustomFooter() : undefined}
           listEmptyComponent={showCustomEmptyComponent ? renderListEmpty() : undefined}
-          customHeader={showCustomHeader ? renderCustomHeader() : undefined}
           customStyles={{
             notificationCard: {
               avatarSize: 30,
@@ -183,7 +187,6 @@ function Notifications(): React.JSX.Element {
           }
           onNotificationCardClick={(notification: NotificationDataType) => {
             console.log('click on notification');
-            markAsRead(notification.id);
           }}
           onError={(error: SirenErrorType) => {
             console.log(`error: ${error}`);

package.json

@@ -29,7 +29,7 @@
     "lint": "eslint src",
     "lint:fix": "npm run lint -- --fix",
     "build": "bob build",
-    "test-build": "npm run build && npm pack && mv siren-react-native-inbox-1.0.0.tgz example/siren-sdk01.tgz && cd example && npm install",
+    "test-build": "npm run build && npm pack && mv sirenapp-react-native-inbox-0.0.1.tgz example/siren-sdk01.tgz && cd example && npm install",
     "test": "npx jest",
     "coverage": "npm run test -- --coverage"
   },

src/components/backIcon.tsx

@@ -0,0 +1,41 @@
+import React, { type ReactElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { SirenStyleProps } from '../types';
+
+const BackIcon = ({ styles }: { styles: Partial<SirenStyleProps> }): ReactElement => {
+  return (
+    <View style={style.backIconContainer}>
+      <View style={[style.backIconLine1, styles.backIcon]} />
+      <View style={[style.backIconLine2, styles.backIcon]} />
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  backIconContainer: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    height: 30,
+    width: 20,
+  },
+  backIconLine1: {
+    width: 12,
+    height: 2,
+    backgroundColor: 'red',
+    transform: [{
+      rotate: '130deg'
+    }]
+  },
+  backIconLine2: {
+    marginTop: 6,
+    width: 12,
+    height: 2,
+    backgroundColor: 'red',
+    transform: [{
+      rotate: '230deg'
+    }]
+  }
+});
+
+export default BackIcon;