refactor: Updated props names

* refactor: Updated props name to meaningful names

* refactor: update style props

* refactor: updated error codes in readme

Author: abhay-keyvalue

README.md

@@ -51,7 +51,7 @@ Below are optional props available for the icon component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
-customStyles | Object for custom styling |  StyleProps | {} |
+customStyles | Object for custom styling |  CustomStyleProps | {} |
 notificationIcon | Option to use custom notification icon |  JSX Element | null |
 darkMode | Toggle to enable dark mode |  boolean | false |
 onError | Callback for handling errors | (error:  SirenErrorType)=> void | null |
@@ -80,7 +80,7 @@ Here are the available theme options:
 Here are the custom style options for the notification icon:
 ```js
 
-    type StyleProps = {
+    type CustomStyleProps = {
         notificationIcon?: {
           size?: number,
         };
@@ -109,14 +109,14 @@ Below are optional props available for the inbox component:
 Prop | Description | Type | Default value |
 --- | --- | --- | --- |
 theme | Object for custom themes |  Theme | {} |
-customStyles | Object for custom styling |  StyleProps | {} |
+customStyles | Object for custom styling |  CustomStyleProps | {} |
 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 | 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 |
+customCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
+onCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
-inboxHeaderProps | Props for customizing the header | InboxHeaderProps | { title: "Notifications", hideHeader: false, hideClearAll: false, customHeader: null, showBackButton:false, backButton: null, onBackPress: ()=> null } |
+headerProps | Props for customizing the header | HeaderProps | { 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 |
@@ -170,7 +170,7 @@ Here are the available theme options:
 Here are the custom style options for the notification inbox:
 
 ```js
-    type StyleProps = {
+    type CustomStyleProps = {
       notificationIcon?: {
         size?: number;
       };
@@ -228,9 +228,9 @@ Here are the custom style options for the notification inbox:
     };
 ```
 
-#### InboxHeaderProps
+#### HeaderProps
 ```js
-    type InboxHeaderProps = {
+    type HeaderProps = {
       title?: string;
       hideHeader?: boolean;
       hideClearAll?: boolean;
@@ -249,14 +249,14 @@ Here are the custom style options for the notification inbox:
 import { useSiren } from '@sirenapp/react-native-inbox';
 
 function MyComponent() {
-  const { markAsRead, deleteNotification } = useSiren();
+  const { markAsRead, deleteById } = useSiren();
 
   function handleMarkAsRead(id) {
     markAsRead(id);
   }
 
   function handleDeleteNotification(id) {
-    deleteNotification(id);
+    deleteById(id);
   }
 
   return (
@@ -268,23 +268,32 @@ function MyComponent() {
 
 Functions | Parameters | Type | Description |
 ----------|------------|-------|------------|
-markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
+markAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
 markAsRead | id | string | Set read status of a notification to true          |
-deleteNotification |  id | string  | Delete a notification by id |
-deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date |
-markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
+deleteById |  id | string  | Delete a notification by id |
+deleteByDate | startDate | ISO date string | Delete all notifications until given date |
+markAllAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |
 
 ## 4. Error codes
 Given below are all possible error codes thrown by sdk:
 
 Error code  | Description |
 --- | --- |
-INVALID_TOKEN | The token passed in the provider is invalid |
-INVALID_RECIPIENT_ID | The recipient id passed in the provider is invalid |
+AUTHENTICATION_FAILED | Failed to authenticate given credentials |
 TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed |
-GENERIC_API_ERROR | Occurrence of an unexpected api error |
+TOKEN_VERIFICATION_PENDING | Authentication in progress |
+API_ERROR | Occurrence of an unexpected api error |
+UNVIEWED_COUNT_FETCH_FAILED | Failed to fetch unviewed notifications count |
+NOTIFICATION_FETCH_FAILED | Failed to fetch notifications |
+DELETE_FAILED | Failed to delete notification |
+MARK_AS_READ_FAILED | Failed to mark notification as read |
+BULK_DELETE_FAILED | Bulk deletion of notifications failed |
+MARK_ALL_AS_READ_FAILED | Failed to mark all notifications as read |
+MARK_ALL_AS_VIEWED_FAILED | Failed to mark notification as viewed |
 OUTSIDE_SIREN_CONTEXT | Attempting to invoke the functions outside the siren inbox context |
 MISSING_PARAMETER | The required parameter is missing |
+UNAUTHORIZED_OPERATION | This operation require valid credentials |
+INVALID_ERROR_FUNCTION | The error function passed to sdk is invalid |
 
 ## Example
 Here's a basic example to help you get started

example/screens/notifications.tsx

@@ -52,7 +52,7 @@ function Notifications(): React.JSX.Element {
     backgroundColor: isDarkMode ? '#000' : '#FFF'
   };
 
-  const { markNotificationsAsReadByDate } = useSiren();
+  const { markAsReadByDate } = useSiren();
 
   const renderListEmpty = () => {
     return (
@@ -76,7 +76,9 @@ function Notifications(): React.JSX.Element {
         <TouchableOpacity onPress={() => navigation.goBack()}>
           <Text style={styles.whiteLabel}>Back</Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => markNotificationsAsReadByDate(String(new Date().getTime()))}>
+        <TouchableOpacity
+          onPress={() => markAsReadByDate(String(new Date().getTime()))}
+        >
           <Text style={styles.whiteLabel}>Mark allAsRead</Text>
         </TouchableOpacity>
       </View>
@@ -108,12 +110,9 @@ function Notifications(): 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('Theme-Mode', () =>
               setSdkDarkModeEnabled((sdkDarkModeEnabled) => !sdkDarkModeEnabled)
             )}
@@ -163,29 +162,34 @@ function Notifications(): React.JSX.Element {
       />
       <View style={styles.contentContainer}>
         <SirenInbox
-          inboxHeaderProps={{
+          headerProps={{
             hideHeader: hideHeader,
             customHeader: showCustomHeader ? renderCustomHeader() : undefined,
             showBackButton: true,
             onBackPress: () => navigation.goBack(),
-            title: 'Siren Inbox',
+            title: 'Siren Inbox'
           }}
           darkMode={sdkDarkModeEnabled}
-          cardProps={{ hideAvatar: hideAvatar, disableAutoMarkAsRead: false, onAvatarClick: (notification: NotificationDataType) => console.log('avatar click', notification) }}
+          cardProps={{
+            hideAvatar: hideAvatar,
+            disableAutoMarkAsRead: false,
+            onAvatarClick: (notification: NotificationDataType) =>
+              console.log('avatar click', notification)
+          }}
           theme={windowThemes[windowThemeIndex]}
           customFooter={showCustomFooter ? renderCustomFooter() : undefined}
           listEmptyComponent={showCustomEmptyComponent ? renderListEmpty() : undefined}
           customStyles={{
             notificationCard: {
-              avatarSize: 30,
+              avatarSize: 30
             }
           }}
-          customNotificationCard={
+          customCard={
             showCustomNotificationCard
               ? (notification: NotificationDataType) => renderCustomNotificationCard(notification)
               : undefined
           }
-          onNotificationCardClick={(notification: NotificationDataType) => {
+          onCardClick={(notification: NotificationDataType) => {
             console.log('click on notification');
           }}
           onError={(error: SirenErrorType) => {

src/components/backIcon.tsx

@@ -1,9 +1,9 @@
 import React, { type ReactElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 
-const BackIcon = ({ styles }: { styles: Partial<SirenStyleProps> }): ReactElement => {
+const BackIcon = ({ styles }: { styles: Partial<StyleProps> }): ReactElement => {
   return (
     <View style={style.backIconContainer}>
       <View style={[style.backIconLine1, styles.backIcon]} />

src/components/clearIcon.tsx

@@ -1,9 +1,9 @@
 import React, { type ReactElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 
-const ClearIcon = ({ styles }: { styles: Partial<SirenStyleProps> }): ReactElement => {
+const ClearIcon = ({ styles }: { styles: Partial<StyleProps> }): ReactElement => {
   const icon: JSX.Element[] = [];
 
   for (let i = 0; i < 3; i++)

src/components/closeIcon.tsx

@@ -3,15 +3,15 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import type { NotificationDataType } from '@sirenapp/js-sdk/dist/esm/types';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 
 const CloseIcon = ({
   notification,
   styles,
   onDelete
 }: {
   notification: NotificationDataType;
-  styles: Partial<SirenStyleProps>;
+  styles: Partial<StyleProps>;
   onDelete: (id: string) => void;
 }): ReactElement => {
   const icon: JSX.Element[] = [];

src/components/emptyWindow.tsx

@@ -1,7 +1,7 @@
 import React, { type ReactElement } from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 import { Constants } from '../utils';
 
 const { LIST_EMPTY_TEXT, LIST_EMPTY_DESCRIPTION } = Constants;
@@ -18,7 +18,7 @@ const { LIST_EMPTY_TEXT, LIST_EMPTY_DESCRIPTION } = Constants;
  * @param {Object} props.styles - Custom styles applied to the empty window.
  */
 const EmptyWindow = (props: {
-  styles: Partial<SirenStyleProps>;
+  styles: Partial<StyleProps>;
   darkMode: boolean;
 }): ReactElement => {
   const { styles, darkMode } = props;

src/components/errorWindow.tsx

@@ -1,7 +1,7 @@
 import React, { type ReactElement } from 'react';
 import { StyleSheet, Text, Image, View } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 import { Constants } from '../utils';
 import { ERROR_DESCRIPTION } from '../utils/constants';
 
@@ -21,7 +21,7 @@ const { ERROR_TEXT } = Constants;
  * @param {Function} props.onRetry - A callback function that is invoked when the user presses the refresh button.
  */
 const ErrorWindow = (props: {
-  styles: Partial<SirenStyleProps>;
+  styles: Partial<StyleProps>;
   darkMode: boolean;
   customErrorWindow?: JSX.Element | null;
 }): ReactElement => {

src/components/header.tsx

@@ -1,7 +1,7 @@
 import React, { type ReactElement } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 import { Constants } from '../utils';
 import ClearIcon from './clearIcon';
 import BackIcon from './backIcon';
@@ -30,7 +30,7 @@ import BackIcon from './backIcon';
 
 type HeaderProps = {
   title: string;
-  styles: Partial<SirenStyleProps>;
+  styles: Partial<StyleProps>;
   onPressClearAll: () => void;
   clearAllDisabled: boolean;
   hideClearAll?: boolean;

src/components/loadingWindow.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, type ReactElement, useRef } from 'react';
 import { Animated, Easing, FlatList, StyleSheet, View } from 'react-native';
 
-import type { SirenStyleProps } from '../types';
+import type { StyleProps } from '../types';
 
 type LoadingWindowProps = {
-  styles: Partial<SirenStyleProps>;
+  styles: Partial<StyleProps>;
   customLoader?: JSX.Element | null;
   hideAvatar?: boolean;
   hideDelete?: boolean;

src/components/sirenInbox.tsx

@@ -59,12 +59,12 @@ type NotificationFetchParams = {
  * @param {boolean} [props.darkMode=false] - Flag to enable dark mode.
  * @param {Object} [props.cardProps={ hideAvatar: false, showMedia: true }] - Props for customizing the notification cards.
  * @param {JSX.Element} [props.listEmptyComponent=null] - Custom component to display when the notification list is empty.
- * @param {CardProps} [props.inboxHeaderProps] - Object containing props related to the inbox header
+ * @param {CardProps} [props.headerProps] - Object containing props related to the inbox header
  * @param {JSX.Element} [props.customFooter=null] - Custom footer component.
  * @param {JSX.Element} [props.customLoader=null] - Custom loader component.
  * @param {JSX.Element} [props.customErrorWindow=null] - Custom error component.
- * @param {Function} [props.customNotificationCard=null] - Custom function for rendering notification cards.
- * @param {Function} [props.onNotificationCardClick=() => null] - Callback for handling notification card clicks.
+ * @param {Function} [props.customCard=null] - Custom function for rendering notification cards.
+ * @param {Function} [props.onCardClick=() => null] - Callback for handling notification card clicks.
  * @param {Function} [props.onError] - Callback for handling errors.
  */
 const SirenInbox = (props: SirenInboxProps): ReactElement => {
@@ -78,12 +78,12 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
       hideDelete: false
     },
     listEmptyComponent = null,
-    inboxHeaderProps = {},
+    headerProps = {},
     customFooter = null,
     customLoader = null,
     customErrorWindow = null,
-    customNotificationCard = null,
-    onNotificationCardClick = () => null,
+    customCard = null,
+    onCardClick = () => null,
     onError = () => {},
     itemsPerFetch = 20
   } = props;
@@ -96,15 +96,15 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     showBackButton,
     backButton,
     onBackPress
-  } = inboxHeaderProps;
+  } = headerProps;
   const notificationsPerPage = Math.max(
     0,
     itemsPerFetch > MAXIMUM_ITEMS_PER_FETCH ? MAXIMUM_ITEMS_PER_FETCH : itemsPerFetch
   );
 
   const { siren, verificationStatus } = useSirenContext();
 
-  const { deleteNotification, deleteNotificationsByDate, markNotificationsAsViewed } = useSiren();
+  const { deleteById, deleteByDate, markAllAsViewed } = useSiren();
 
   const [notifications, setNotifications] = useState<NotificationDataType[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -145,7 +145,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
   const handleMarkNotificationsAsViewed = async (newNotifications = notifications) => {
     const currentTimestamp = new Date().getTime();
     const isoString = new Date(currentTimestamp).toISOString();
-    const response = await markNotificationsAsViewed(
+    const response = await markAllAsViewed(
       isNonEmptyArray(newNotifications) ? newNotifications[0].createdAt : isoString
     );
 
@@ -319,7 +319,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     if (!disableCardDelete.current) {
       disableCardDelete.current = true;
 
-      const response = await deleteNotification(id, shouldUpdateList);
+      const response = await deleteById(id, shouldUpdateList);
 
       if (response?.data) isSuccess = true;
       processError(response?.error);
@@ -331,7 +331,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
 
   const onPressClearAll = async (): Promise<void> => {
     if (isNonEmptyArray(notifications)) {
-      const response = await deleteNotificationsByDate(notifications[0].createdAt);
+      const response = await deleteByDate(notifications[0].createdAt);
 
       if (response?.error) {
         processError(response?.error);
@@ -346,7 +346,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
   const renderDefaultNotificationCard = (item: NotificationDataType) => {
     return (
       <Card
-        onCardClick={onNotificationCardClick}
+        onCardClick={onCardClick}
         notification={item}
         cardProps={cardProps}
         styles={styles}
@@ -358,7 +358,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
 
   // Render notification card
   const renderCard = ({ item }: { item: NotificationDataType }): JSX.Element => {
-    if (customNotificationCard) return customNotificationCard(item);
+    if (customCard) return customCard(item);
 
     return renderDefaultNotificationCard(item);
   };