v1.2.1

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.2.1
+
+### Fixed
+
+- Fixed styles for tab filters
+- Restricted redundant verify token calls to avoid unnecessary network requests and enhance overall efficiency.
+
 ## 1.2.0
 
 ### Added

README.md

@@ -208,7 +208,8 @@ Please note that the badgeStyle, window shadow and border props are only applica
     borderWidth?: number,
     borderRadius?: number,
     paddingY?: number,
-    paddingX?: number
+    paddingX?: number,
+    tabContainerBorderWidth?: number
   };
 }
 ```
@@ -264,11 +265,11 @@ function MyComponent() {
 
 Functions | Parameters | Type | Description |
 ----------|------------|-------|------------|
-markAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date |
+markAsReadByDate | options | { startDate: ISO date string, <br>isRead?: boolean } |  Updates the read status of notifications. <br>startDate- To set the read status of notifications up to the specified date. <br> isRead- Filters notifications based on their read status. |
 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 |
+deleteByDate | options | { startDate: ISO date string, <br>isRead?: boolean } | Delete all notifications until given start date. <br>startDate- To specify the date until which notifications are deleted. <br> isRead- Filters notifications based on their read status. |
+markAllAsViewed | untilDate | ISO date string |Sets the viewed status of notifications to true until the given date |
 
 
 ## Example

example/package.json

@@ -6,7 +6,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
-        "@sirenapp/react-inbox": "^1.2.0"
+        "@sirenapp/react-inbox": "^1.2.1"
     },
     "scripts": {
         "dev": "PORT=9902 react-scripts start",

src/components/SirenProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { Siren } from "@sirenapp/js-sdk";
 import type {
@@ -77,13 +77,15 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   const [siren, setSiren] = useState<Siren | null>(null);
   const [verificationStatus, setVerificationStatus] =
     useState<VerificationStatus>(VerificationStatus.PENDING);
+  const shouldInitialize = useRef(true);
   let retryCount = 0;
 
 
   const [id] = useState(generateUniqueId());
 
   useEffect(() => {
-    if (config?.recipientId && config?.userToken) {
+    if (config?.recipientId && config?.userToken && shouldInitialize.current) {
+      shouldInitialize.current = false;
       stopRealTimeFetch();
       sendResetDataEvents();
       initialize();

src/types.ts

@@ -229,6 +229,7 @@ export type CustomStyle = {
     borderRadius?: number;
     paddingY?: number;
     paddingX?: number;
+    tabContainerBorderWidth?: number;
   };
 };
 

src/utils/commonUtils.ts

@@ -119,6 +119,13 @@ export const logger = {
   },
 };
 
+export const getCustomStyleValues = (customValue?: number, defaultValue?: number) => {
+  return customValue === undefined ||
+        customValue === null
+    ? defaultValue
+    : customValue
+}
+
 export const applyTheme = (
   theme: ThemeProps = {},
   mode: ThemeMode = ThemeMode.DARK,
@@ -197,7 +204,7 @@ export const applyTheme = (
         theme.customCard?.background ||
         DefaultTheme[mode].customCard.background,
       padding:
-        customStyle.customCard?.padding ||
+        customStyle.customCard?.padding || 
         DefaultStyle.customCard.padding,
       borderBottom: `${
         customStyle.customCard?.borderWidth ||
@@ -228,7 +235,7 @@ export const applyTheme = (
         theme.colors?.textColor ||
         DefaultTheme[mode].customCard.titleColor,
       fontSize:
-        customStyle.customCard?.titleSize ||
+        customStyle.customCard?.titleSize || 
         DefaultStyle.customCard.titleSize,
       fontWeight:
         customStyle.customCard?.titleFontWeight ||
@@ -261,13 +268,13 @@ export const applyTheme = (
         customStyle.customCard?.descriptionSize ||
         DefaultStyle.customCard.descriptionSize,
       fontWeight:
-      customStyle.customCard?.descriptionFontWeight ||
-      DefaultStyle.customCard.descriptionFontWeight,
+        customStyle.customCard?.descriptionFontWeight ||
+        DefaultStyle.customCard.descriptionFontWeight,
     },
     dateStyle: {
       color: theme.colors?.dateColor || DefaultTheme[mode].colors.dateColor,
       fontSize:
-        customStyle.customCard?.dateSize ||
+        customStyle.customCard?.dateSize || 
         DefaultStyle.customCard.dateSize,
       lineHeight: "16px",
     },
@@ -320,7 +327,7 @@ export const applyTheme = (
       height: customStyle.badgeStyle?.size || defaultBadgeStyle.size,
       backgroundColor: theme.badgeStyle?.color || defaultBadgeStyle.color,
       top:  customStyle?.badgeStyle?.top ? `${customStyle.badgeStyle.top}px` : defaultBadgeStyle.top,
-      right:  customStyle?.badgeStyle?.right ? `${customStyle.badgeStyle.right}px` : defaultBadgeStyle.right,    
+      right:  customStyle?.badgeStyle?.right ? `${customStyle.badgeStyle.right}px` : defaultBadgeStyle.right,
     },
     badgeTextStyle: {
       color: theme.badgeStyle?.textColor || defaultBadgeStyle.textColor,
@@ -333,35 +340,35 @@ export const applyTheme = (
         DefaultTheme[mode].colors.primaryColor
       }`,
     },
-    tabsHeaderContainer:{
+    tabsHeaderContainer: {
       height: customStyle.tabs?.containerHeight || DefaultStyle.tabs.containerHeight,
       backgroundColor: theme.tabs?.containerBackgroundColor || DefaultTheme[mode].tabs.containerBackgroundColor,
       borderBottom: `${
-        customStyle.customCard?.borderWidth ||
-        DefaultStyle.customCard.borderWidth
+        getCustomStyleValues(customStyle.tabs?.tabContainerBorderWidth, DefaultStyle.tabs.tabContainerBorderWidth)
       }px solid`,
       borderColor:
         theme.customCard?.borderColor ||
         theme.colors?.borderColor ||
         DefaultTheme[mode].customCard.borderColor,
-      padding: `0 ${customStyle.tabs?.tabPadding || DefaultStyle.tabs.tabPadding}px`,
-      gap: customStyle.tabs?.headingGap || DefaultStyle.tabs.headingGap
-
+      padding: `0 ${
+        getCustomStyleValues(customStyle.tabs?.tabPadding, DefaultStyle.tabs.tabPadding)
+      }px`,
+      gap: customStyle.tabs?.headingGap || DefaultStyle.tabs.headingGap,
     },
     activeTabStyle:{
       backgroundColor: theme.tabs?.activeTabBackgroundColor || DefaultTheme[mode].tabs.activeTabBackgroundColor,
       color: theme.tabs?.activeTabTextColor || DefaultTheme[mode].tabs.activeTabTextColor,
       fontSize: customStyle.tabs?.activeTabTextSize || DefaultStyle.tabs.activeTabTextSize,
       fontWeight: customStyle.tabs?.activeTabTextWeight || DefaultStyle.tabs.activeTabTextWeight,
       border: `${
-        customStyle.tabs?.borderWidth ||
+        customStyle.tabs?.borderWidth || 
         DefaultStyle.tabs.borderWidth
       }px solid`,
       borderColor:
-      theme.tabs?.borderColor ||
-      theme.colors?.borderColor ||
-      DefaultTheme[mode].tabs?.borderColor,
-      borderRadius: customStyle.tabs?.borderRadius ||
+        theme.tabs?.borderColor ||
+        theme.colors?.borderColor ||
+        DefaultTheme[mode].tabs?.borderColor,
+      borderRadius: customStyle.tabs?.borderRadius || 
       DefaultStyle.tabs.borderRadius,
       padding: `${customStyle.tabs?.paddingY || DefaultStyle.tabs.paddingY}px
        ${customStyle.tabs?.paddingX || DefaultStyle.tabs.paddingX}px`,
@@ -372,23 +379,22 @@ export const applyTheme = (
       fontSize: customStyle.tabs?.inactiveTabTextSize || DefaultStyle.tabs.inactiveTabTextSize,
       fontWeight: customStyle.tabs?.inactiveTabTextWeight || DefaultStyle.tabs.inactiveTabTextWeight,
       border: `${
-        customStyle.tabs?.borderWidth ||
+        customStyle.tabs?.borderWidth || 
         DefaultStyle.tabs.borderWidth
       }px solid`,
       borderColor:
-      theme.tabs?.borderColor ||
-      theme.colors?.borderColor ||
-      DefaultTheme[mode].tabs?.borderColor,
-      borderRadius: customStyle.tabs?.borderRadius ||
+        theme.tabs?.borderColor ||
+        theme.colors?.borderColor ||
+        DefaultTheme[mode].tabs?.borderColor,
+      borderRadius: customStyle.tabs?.borderRadius || 
       DefaultStyle.tabs.borderRadius,
       padding: `${customStyle.tabs?.paddingY || DefaultStyle.tabs.paddingY}px
        ${customStyle.tabs?.paddingX || DefaultStyle.tabs.paddingX}px`,
     },
     activeTabIndicator:{
       backgroundColor: theme.tabs?.indicatorColor || DefaultTheme[mode].tabs.indicatorColor,
-      height: (customStyle.tabs?.indicatorHeight === undefined || customStyle.tabs?.indicatorHeight === null) ? 
-        DefaultStyle.tabs.indicatorHeight : customStyle.tabs?.indicatorHeight,
-    }
+      height: getCustomStyleValues(customStyle.tabs?.indicatorHeight, DefaultStyle.tabs.indicatorHeight)
+    },
   };
 };
 
@@ -429,7 +435,7 @@ export const generateFilterParams = (
     if (fromStart) params = { ...params, start: data[0].createdAt };
     else params = { ...params, end: data[data.length - 1].createdAt };
 
-  if (filterType === Tabs.UNREAD) params = { ...params, isRead: false};
+  if (filterType === Tabs.UNREAD) params = { ...params, isRead: false };
 
   return params;
 };
@@ -483,7 +489,6 @@ export const calculateModalWidth = (containerWidth: DimensionValue): number => {
   return modalWidth;
 };
 
-
 export const debounce = <F extends (...args: unknown[]) => void>(
   func: F,
   delay: number
@@ -498,22 +503,26 @@ export const debounce = <F extends (...args: unknown[]) => void>(
   };
 };
 
-export const getModalContentHeightInFullScreen = (headerHeight: DimensionValue | undefined) =>  {
+export const getModalContentHeightInFullScreen = (
+  headerHeight: DimensionValue | undefined
+) => {
   let updatedHeight = 0;
 
   if (typeof headerHeight === "string")
     updatedHeight = parseInt(headerHeight.slice(0, -2));
   else if (typeof headerHeight === "number") updatedHeight = headerHeight;
 
-  return `calc(100% - ${updatedHeight}px)`
+  return `calc(100% - ${updatedHeight}px)`;
 };
 
 export const generateUniqueId = (): string => {
   return Math.random().toString(36).substring(2, 15);
 };
 
-export const mergeStyles = (...styleObjects: CSSProperties[]): CSSProperties => {
+export const mergeStyles = (
+  ...styleObjects: CSSProperties[]
+): CSSProperties => {
   return styleObjects.reduce((mergedStyles, currentStyle) => {
     return { ...mergedStyles, ...currentStyle };
   }, {});
-};
+};

src/utils/defaultStyles.ts

@@ -61,7 +61,8 @@ const defaultStyles = {
     borderWidth: 0,
     borderRadius: 0,
     paddingX: 10,
-    paddingY: 5
+    paddingY: 5,
+    tabContainerBorderWidth: 0.5,
   }
 }