refactor: Update readme and UI fix on inbox header title

Author: abhay-keyvalue

README.md

@@ -112,10 +112,10 @@ theme | Object for custom themes |  Theme | {} |
 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 } |
-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 |
+cardProps | Props for customizing the card | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: JSX.Element, onAvatarClick: ()=> null } |
+customCard | Function for rendering custom card | (notification)=> JSX Element | null |
+onCardClick | Custom click handler for card | (notification)=> void | ()=>null |
+listEmptyComponent | Custom component for empty list | JSX Element | 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 |
@@ -171,9 +171,6 @@ Here are the custom style options for the notification inbox:
 
 ```js
     type CustomStyleProps = {
-      notificationIcon?: {
-        size?: number;
-      };
       window?: {
         width?: DimensionValue;
         height?: DimensionValue;
@@ -194,18 +191,12 @@ Here are the custom style options for the notification inbox:
         avatarSize?: number;
         titleFontWeight?: TextStyle['fontWeight'];
         titleSize?: number;
-        subTitleFontWeight?: TextStyle['fontWeight'];
-        subTitleSize?: number
+        subtitleFontWeight?: TextStyle['fontWeight'];
+        subtitleSize?: number
         descriptionFontWeight?: TextStyle['fontWeight'];
         descriptionSize?: number;
         dateSize?: number;
       };
-      badgeStyle?: {
-        size?: number;
-        textSize?: number;
-        top?: number;
-        right?: number;
-      };
       deleteIcon?:{
         size?: number
       };
@@ -249,10 +240,10 @@ Here are the custom style options for the notification inbox:
 import { useSiren } from '@sirenapp/react-native-inbox';
 
 function MyComponent() {
-  const { markAsRead, deleteById } = useSiren();
+  const { markAsReadById, deleteById } = useSiren();
 
   function handleMarkAsRead(id) {
-    markAsRead(id);
+    markAsReadById(id);
   }
 
   function handleDeleteNotification(id) {
@@ -269,32 +260,11 @@ function MyComponent() {
 Functions | Parameters | Type | Description |
 ----------|------------|-------|------------|
 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          |
+markAsReadById | id | string | Set read status of a notification to true          |
 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 |
---- | --- |
-AUTHENTICATION_FAILED | Failed to authenticate given credentials |
-TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed |
-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
 ```js

src/components/card.tsx

@@ -49,7 +49,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
     onAvatarClick,
     deleteIcon = null
   } = cardProps;
-  const { markAsRead } = useSiren();
+  const { markAsReadById } = useSiren();
 
   const opacity = useRef(new Animated.Value(1)).current;
 
@@ -73,7 +73,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
 
   const cardClick = (): void => {
     onCardClick(notification);
-    if (!disableAutoMarkAsRead) markAsRead(notification.id);
+    if (!disableAutoMarkAsRead) markAsReadById(notification.id);
   };
 
   const onError = (): void => {

src/components/header.tsx

@@ -96,14 +96,16 @@ const style = StyleSheet.create({
     paddingRight: 18
   },
   clearIconContainer: {
+    width: '20%',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center'
   },
   headerTitle: {
-    width: '70%'
+    width: '95%',
   },
   rowContainer: {
+    width: '80%',
     flexDirection: 'row',
     alignItems: 'center'
   },

src/types.ts

@@ -167,8 +167,8 @@ export type CustomStyleProps = {
     avatarSize?: number;
     titleFontWeight?: TextStyle['fontWeight'];
     titleSize?: number;
-    subTitleFontWeight?: TextStyle['fontWeight'];
-    subTitleSize?: number
+    subtitleFontWeight?: TextStyle['fontWeight'];
+    subtitleSize?: number
     descriptionFontWeight?: TextStyle['fontWeight'];
     descriptionSize?: number;
     dateSize?: number;

src/utils/commonUtils.ts

@@ -223,12 +223,12 @@ export const applyTheme = (
       theme.colors?.textColor ||
       DefaultTheme[mode].notificationCard.subTitleColor,
     fontSize:
-      customStyles.notificationCard?.subTitleSize || defaultStyles.notificationCard.subTitleSize,
+      customStyles.notificationCard?.subtitleSize || defaultStyles.notificationCard.subtitleSize,
     fontWeight:
-      customStyles.notificationCard?.subTitleFontWeight ||
-      defaultStyles.notificationCard.subTitleFontWeight,
+      customStyles.notificationCard?.subtitleFontWeight ||
+      defaultStyles.notificationCard.subtitleFontWeight,
     lineHeight:
-      (customStyles.notificationCard?.subTitleSize || defaultStyles.notificationCard.subTitleSize) +
+      (customStyles.notificationCard?.subtitleSize || defaultStyles.notificationCard.subtitleSize) +
       8
   },
   cardDescription: {

src/utils/constants.ts

@@ -124,8 +124,8 @@ export const defaultStyles = {
     avatarSize: 40,
     titleFontWeight: '600',
     titleSize: 14,
-    subTitleFontWeight: '500',
-    subTitleSize: 14,
+    subtitleFontWeight: '500',
+    subtitleSize: 14,
     descriptionSize: 14,
     descriptionFontWeight: '400',
     dateSize: 12

src/utils/sirenHook.ts

@@ -6,7 +6,7 @@ import { useSirenContext } from '../components/sirenProvider';
 const useSiren = () => {
   const { siren } = useSirenContext();
 
-  const markAsRead = async (id: string) => {
+  const markAsReadById = async (id: string) => {
     if (siren)
       if (id?.length > 0) {
         const response = await siren?.markNotificationAsReadById(id);
@@ -94,7 +94,7 @@ const useSiren = () => {
 
   return {
     markAsReadByDate,
-    markAsRead,
+    markAsReadById,
     deleteById,
     deleteByDate,
     markAllAsViewed

tests/utils/sirenHook.test.ts

@@ -95,8 +95,8 @@ describe('useSiren hook', () => {
       verificationStatus: VerificationStatus.SUCCESS
     });
 
-    const { markAsRead } = useSiren();
-    const response = await markAsRead('xyz');
+    const { markAsReadById } = useSiren();
+    const response = await markAsReadById('xyz');
 
     expect(mockSiren.markNotificationAsReadById).toHaveBeenCalledWith('xyz');
     expect(response).toEqual(Response);