diff --git a/CHANGELOG.md b/CHANGELOG.md
index 225c784..2f831ab 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 09d8b4f..e49ca60 100644
--- a/README.md
+++ b/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,
isRead?: boolean } | Updates the read status of notifications.
startDate- To set the read status of notifications up to the specified date.
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,
isRead?: boolean } | Delete all notifications until given start date.
startDate- To specify the date until which notifications are deleted.
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
diff --git a/example/package.json b/example/package.json
index 0e6ac37..cd88757 100644
--- a/example/package.json
+++ b/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",
diff --git a/src/components/SirenProvider.tsx b/src/components/SirenProvider.tsx
index e69b6b5..154de1d 100644
--- a/src/components/SirenProvider.tsx
+++ b/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 = ({ config, children }) => {
const [siren, setSiren] = useState(null);
const [verificationStatus, setVerificationStatus] =
useState(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();
diff --git a/src/types.ts b/src/types.ts
index 294ef35..016fcd7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -229,6 +229,7 @@ export type CustomStyle = {
borderRadius?: number;
paddingY?: number;
paddingX?: number;
+ tabContainerBorderWidth?: number;
};
};
diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index 45bb1c3..f8bafcf 100644
--- a/src/utils/commonUtils.ts
+++ b/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,20 +340,20 @@ 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,
@@ -354,14 +361,14 @@ export const applyTheme = (
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 = void>(
func: F,
delay: number
@@ -498,22 +503,26 @@ export const debounce = 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 };
}, {});
-};
\ No newline at end of file
+};
diff --git a/src/utils/defaultStyles.ts b/src/utils/defaultStyles.ts
index f1bbc02..e82fe44 100644
--- a/src/utils/defaultStyles.ts
+++ b/src/utils/defaultStyles.ts
@@ -61,7 +61,8 @@ const defaultStyles = {
borderWidth: 0,
borderRadius: 0,
paddingX: 10,
- paddingY: 5
+ paddingY: 5,
+ tabContainerBorderWidth: 0.5,
}
}