From 1699a843eab0f5c3d0973e5e43ae2d66e55615dd Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Wed, 26 Jun 2024 14:39:28 +0530 Subject: [PATCH 1/6] feat: Add tabContainerBorderWidth and fix tab padding --- README.md | 3 +- src/types.ts | 1 + src/utils/commonUtils.ts | 73 ++++++++++++++++++++++---------------- src/utils/defaultStyles.ts | 3 +- 4 files changed, 47 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 09d8b4f..c25289b 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 }; } ``` 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..24f0203 100644 --- a/src/utils/commonUtils.ts +++ b/src/utils/commonUtils.ts @@ -197,7 +197,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 +228,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 +261,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 +320,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 +333,25 @@ 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 + (customStyle.tabs?.tabContainerBorderWidth === undefined || customStyle.tabs?.tabContainerBorderWidth === null)? + DefaultStyle.tabs.tabContainerBorderWidth : + customStyle.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 ${ + customStyle.tabs?.tabPadding === undefined || + customStyle.tabs?.tabPadding === null + ? DefaultStyle.tabs.tabPadding + : customStyle.tabs?.tabPadding + }px`, + gap: customStyle.tabs?.headingGap || DefaultStyle.tabs.headingGap, }, activeTabStyle:{ backgroundColor: theme.tabs?.activeTabBackgroundColor || DefaultTheme[mode].tabs.activeTabBackgroundColor, @@ -354,14 +359,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 +377,26 @@ 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: + customStyle.tabs?.indicatorHeight === undefined || + customStyle.tabs?.indicatorHeight === null + ? DefaultStyle.tabs.indicatorHeight + : customStyle.tabs?.indicatorHeight, + }, }; }; @@ -429,7 +437,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 +491,6 @@ export const calculateModalWidth = (containerWidth: DimensionValue): number => { return modalWidth; }; - export const debounce = void>( func: F, delay: number @@ -498,22 +505,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, } } From b764e169fb96fbe72db2d5328326f06d27f0666c Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Thu, 27 Jun 2024 13:23:00 +0530 Subject: [PATCH 2/6] fix: Add a function to return value for styles --- src/utils/commonUtils.ts | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts index 24f0203..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, @@ -337,19 +344,14 @@ export const applyTheme = ( height: customStyle.tabs?.containerHeight || DefaultStyle.tabs.containerHeight, backgroundColor: theme.tabs?.containerBackgroundColor || DefaultTheme[mode].tabs.containerBackgroundColor, borderBottom: `${ - (customStyle.tabs?.tabContainerBorderWidth === undefined || customStyle.tabs?.tabContainerBorderWidth === null)? - DefaultStyle.tabs.tabContainerBorderWidth : - customStyle.tabs?.tabContainerBorderWidth + 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 === undefined || - customStyle.tabs?.tabPadding === null - ? DefaultStyle.tabs.tabPadding - : customStyle.tabs?.tabPadding + getCustomStyleValues(customStyle.tabs?.tabPadding, DefaultStyle.tabs.tabPadding) }px`, gap: customStyle.tabs?.headingGap || DefaultStyle.tabs.headingGap, }, @@ -391,11 +393,7 @@ export const applyTheme = ( }, 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) }, }; }; From 662b14fb18c908cc00b122890e780e80880d2fa4 Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Wed, 7 Aug 2024 11:13:15 +0530 Subject: [PATCH 3/6] fix: Resolve verify-token issue for strict mode --- src/components/SirenProvider.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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(); From 823d1e5151a432f8820ec0b0b1953973b567409f Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Wed, 7 Aug 2024 11:53:22 +0530 Subject: [PATCH 4/6] feat: Update changelog --- CHANGELOG.md | 7 +++++++ example/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 225c784..adf3c3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. +## 1.3.0 + +### Fixed + +- Fixed styles for tab filters +- Resolved multiple verify token calls + ## 1.2.0 ### Added diff --git a/example/package.json b/example/package.json index 0e6ac37..d2af94d 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.3.0" }, "scripts": { "dev": "PORT=9902 react-scripts start", From f2df97bd2caaba8d6aac86d91ab79798092d1a6d Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Wed, 7 Aug 2024 12:27:18 +0530 Subject: [PATCH 5/6] feat: Update readme --- CHANGELOG.md | 4 ++-- README.md | 8 ++++---- example/package.json | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index adf3c3e..2f831ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,12 @@ All notable changes to this project will be documented in this file. -## 1.3.0 +## 1.2.1 ### Fixed - Fixed styles for tab filters -- Resolved multiple verify token calls +- Restricted redundant verify token calls to avoid unnecessary network requests and enhance overall efficiency. ## 1.2.0 diff --git a/README.md b/README.md index c25289b..d47e198 100644 --- a/README.md +++ b/README.md @@ -265,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 } | Sets the read status of notifications until the given start 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 | +deleteById | id, shouldUpdateList | id: string,
shouldUpdateList?: boolean | Delete a notification by id | +deleteByDate | options | { startDate: ISO date string,
isRead?: boolean } | Delete all notifications until given start date.
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 d2af94d..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.3.0" + "@sirenapp/react-inbox": "^1.2.1" }, "scripts": { "dev": "PORT=9902 react-scripts start", From fd55bd9d4f744433dc7e01ee7a0ec82b85e50482 Mon Sep 17 00:00:00 2001 From: cizil-keyvalue Date: Wed, 7 Aug 2024 12:40:18 +0530 Subject: [PATCH 6/6] feat: Update readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d47e198..e49ca60 100644 --- a/README.md +++ b/README.md @@ -265,10 +265,10 @@ function MyComponent() { Functions | Parameters | Type | Description | ----------|------------|-------|------------| -markAsReadByDate | options | { startDate: ISO date string,
isRead?: boolean } | Sets the read status of notifications until the given start date.
isRead filters notifications based on their read status. | +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, shouldUpdateList | id: string,
shouldUpdateList?: boolean | Delete a notification by id | -deleteByDate | options | { startDate: ISO date string,
isRead?: boolean } | Delete all notifications until given start date.
isRead filters notifications based on their read status. | +deleteById | id | string | Delete a notification by id | +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 |