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, } }