From d081194efea29dff4ec1b18a4b0a8e1efd59f195 Mon Sep 17 00:00:00 2001 From: reshmarevi17 <72592634+reshmarevi17@users.noreply.github.com> Date: Wed, 3 Apr 2024 14:57:46 +0530 Subject: [PATCH 1/5] docs: Correct installation command in readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dd66a96..fc4c473 100644 --- a/README.md +++ b/README.md @@ -9,12 +9,12 @@ The `@sirenapp/react-inbox` sdk is a comprehensive and customizable React UI kit You can install the react sdk from npm ```bash -npm @sirenapp/react-inbox +npm install @sirenapp/react-inbox ``` or from yarn ```bash -yarn @sirenapp/react-inbox +yarn add @sirenapp/react-inbox ``` #### Prerequisites From 656e487ec7f99c9b66a0df786be4a88e8843727a Mon Sep 17 00:00:00 2001 From: reshmarevi17 <72592634+reshmarevi17@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:40:26 +0530 Subject: [PATCH 2/5] fix: Set initial loading state value to false in example app --- src/components/SirenPanel.tsx | 2 +- .../__snapshots__/sirenPanel.spec.tsx.snap | 193 ++---------------- 2 files changed, 20 insertions(+), 175 deletions(-) diff --git a/src/components/SirenPanel.tsx b/src/components/SirenPanel.tsx index 57ded89..301bbde 100644 --- a/src/components/SirenPanel.tsx +++ b/src/components/SirenPanel.tsx @@ -102,7 +102,7 @@ const SirenPanel: FC = ({ ); const [error, setError] = useState(""); - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(false); const [endReached, setEndReached] = useState(false); const [eventListenerData, setEventListenerData] = useState(null); diff --git a/tests/components/__snapshots__/sirenPanel.spec.tsx.snap b/tests/components/__snapshots__/sirenPanel.spec.tsx.snap index 82ed4fb..0422a58 100644 --- a/tests/components/__snapshots__/sirenPanel.spec.tsx.snap +++ b/tests/components/__snapshots__/sirenPanel.spec.tsx.snap @@ -49,196 +49,41 @@ exports[`matches snapshot 1`] = ` style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: rgb(35, 35, 38); padding: 0px; border-radius: 0 0 10px 10px;" >
-
-
-
-
-
-
-
-
-
+ empty-icon
-
-
-
-
-
-
-
-
-
+ No new notifications
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Check back later for updates and alerts.
-
+
From 1e501464849d7e22335f423bb6a440e6be961145 Mon Sep 17 00:00:00 2001 From: reshmarevi17 <72592634+reshmarevi17@users.noreply.github.com> Date: Mon, 8 Apr 2024 17:00:05 +0530 Subject: [PATCH 3/5] feat: Add minimum bound for page size, group header props, and expose 'mark as read' functionality on click --- README.md | 95 +++++++++++++++++----------- example/src/App.tsx | 15 +++-- src/components/Card.tsx | 19 ++++-- src/components/SirenInbox.tsx | 32 +++++----- src/components/SirenPanel.tsx | 15 ++--- src/types.ts | 16 ++--- tests/components/sirenPanel.spec.tsx | 10 +-- 7 files changed, 114 insertions(+), 88 deletions(-) diff --git a/README.md b/README.md index fc4c473..d3ea391 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,12 @@ The `@sirenapp/react-inbox` sdk is a comprehensive and customizable React UI kit ## 1. Installation -You can install the react sdk from npm +You can install the react sdk from npm ```bash npm install @sirenapp/react-inbox ``` + or from yarn ```bash @@ -22,7 +23,9 @@ yarn add @sirenapp/react-inbox - React v16.8+ ## 2. Configuration + ### 2.1 Initialization + Initialize the sdk with user token and recipient id. Wrap the provider around your App's root. ```js @@ -37,15 +40,15 @@ const config = { ``` ### 2.2 Configure notification inbox + Once the provider is configured, next step is to configure the notification inbox Inbox is a paginated list view for displaying notifications. ```js -import { SirenInbox } from '@sirenapp/react-inbox'; +import { SirenInbox } from "@sirenapp/react-inbox"; - ``` #### Props for the notification inbox @@ -55,20 +58,17 @@ Below are optional props available for the inbox component: Prop | Description | Type | Default value | --- | --- | --- | --- | theme | Object for custom themes | Theme | {} | -title | Title of the notification inbox | string | "Notifications" | -loadMoreLabel | Text shown on the load more component | string | "Load More" -hideHeader | Toggle to hide or show the header section | boolean | false | -hideClearAll | Toggle to hide or show the clear all button | boolean | false | +loadMoreLabel | Text shown on the load more component | string | "Load More" | hideBadge | Toggle to hide or show the badge | boolean | false | darkMode | Toggle to enable dark mode | boolean | false | itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 | windowViewOnly | Toggle to enable fit-to-screen window or modal view | boolean | false | notificationIcon | Option to use custom notification Icon | JSX Element | null | -cardProps | Props for customizing the notification cards | { hideAvatar: boolean } | { hideAvatar: false } | +inboxHeaderProps | Props for customizing the header.
title - Title of the notification inbox
hideHeader - Toggle to hide or show the header section.
hideClearAll - Toggle to hide or show the clear all button.
customHeader - Custom header component. | InboxHeaderProps| { title: '', hideHeader: false, hideClearAll: false, customHeader: null } | +cardProps | Props for customizing the notification cards..
hideAvatar - Toggle to hide or show the avatar.
disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false } | customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null | onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null | listEmptyComponent | Custom component for empty notification list | JSX Element | null | -customHeader | Custom header component | JSX Element | null | customFooter | Custom footer component | JSX Element | null | customLoader | Custom loader component | JSX Element | null | loadMoreComponent | Custom load more component | JSX Element | null | @@ -76,6 +76,7 @@ customErrorWindow | Custom error window | JSX Element | null | onError | Callback for handling errors | (error: SirenErrorType)=> void | null | ## 3. Customization + ### 3.1 Themes Here are the available theme options: @@ -101,7 +102,7 @@ type ThemeProps = { timerIcon?: string, clearAllIcon?: string, infiniteLoader?: string, - windowShadowColor?: string + windowShadowColor?: string, }, badgeStyle?: { color?: string, @@ -128,9 +129,10 @@ type ThemeProps = { loadMoreButton: { color?: string, background?: string, - } + }, }; ``` + ### 3.2 Style options Here are the custom style options for the notification inbox @@ -187,6 +189,26 @@ Please note that the badgeStyle, window shadow and border props are only applica } ``` +#### CardProps + +```js + type CardProps = { + hideAvatar?: boolean, + disableAutoMarkAsRead?: boolean, + }; +``` + +#### InboxHeaderProps + +```js + type InboxHeaderProps = { + title?: string; + hideHeader?: boolean, + hideClearAll?: boolean, + customHeader?: JSX.Element | null, + }; +``` + ## 4. Hooks `useSiren` is a hook that provides utility functions for modifying notifications. @@ -229,43 +251,41 @@ function MyComponent() { } ``` -#### useSiren functions +### useSiren functions -| Functions | Parameters | Type | Description | -| ----------------------------- | ----------------- |---------| ----------------------------------------------------------- | -| markNotificationsAsReadByDate | 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 | -| deleteNotification | id | string | Delete a notification by id | -| deleteNotificationsByDate | startDate | ISO date string| Delete all notifications until given date | -| markNotificationsAsViewed | startDate | ISO date string | Sets the viewed status of notifications to true until the given date | +Functions | Parameters | Type | Description | +----------|------------|-------|------------| +markNotificationsAsReadByDate | 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 | +deleteNotification | id | string | Delete a notification by id | +deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date | +markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date | ## 5. Error codes Given below are all possible error codes thrown by sdk. -| Error code | Description | -| ------------------------- | ------------------------------------------------------------------| -| INVALID_TOKEN | The token passed in the provider is invalid | -| INVALID_RECIPIENT_ID | The recipient id passed in the provider is invalid | -| TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed | -| GENERIC_API_ERROR | Occurrence of an unexpected api error | -| OUTSIDE_SIREN_CONTEXT | Attempting to invoke the functions outside the siren inbox context| -| MISSING_PARAMETER | The required parameter is missing | +Error code | Description | +------------------------- | ------------------------------------------------------------------| +INVALID_TOKEN | The token passed in the provider is invalid | +INVALID_RECIPIENT_ID | The recipient id passed in the provider is invalid | +TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed | +GENERIC_API_ERROR | Occurrence of an unexpected api error | +OUTSIDE_SIREN_CONTEXT | Attempting to invoke the functions outside the siren inbox context| +MISSING_PARAMETER | The required parameter is missing | ## Example Here's a basic example to help you get started ```js - -import React from 'react'; -import {SirenInbox,SirenProvider} from '@sirenapp/react-inbox'; +import React from "react"; +import { SirenInbox, SirenProvider } from "@sirenapp/react-inbox"; function App(): React.JSX.Element { - const config = { - userToken: 'your_user_token', - recipientId: 'your_recipient_id', + userToken: "your_user_token", + recipientId: "your_recipient_id", }; return ( @@ -278,15 +298,18 @@ function App(): React.JSX.Element { export default App; export function MyContainer(): React.JSX.Element { - return (
); -} \ No newline at end of file +} +``` diff --git a/example/src/App.tsx b/example/src/App.tsx index 5a4517c..f204c45 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -37,7 +37,7 @@ const App: React.FC = () => { const [showCustomNotificationCard, setShowCustomNotificationCard] = useState(false); - const { markNotificationsAsReadByDate, markAsRead } = useSiren(); + const { markNotificationsAsReadByDate } = useSiren(); const renderListEmpty = () => { return ( @@ -248,9 +248,12 @@ const App: React.FC = () => { return (
- { listEmptyComponent={ showCustomEmptyComponent ? renderListEmpty() : undefined } - customHeader={showCustomHeader ? renderCustomHeader() : undefined} customNotificationCard={ showCustomNotificationCard ? (notification: any) => renderCustomNotificationCard(notification) : undefined } - onNotificationCardClick={(notification: { id: any; }) => { + onNotificationCardClick={() => { console.log("click on notification"); - markAsRead(notification.id); }} onError={(error: any) => { console.log(`error: ${error}`); diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 4cfc0a8..14e7726 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -8,6 +8,7 @@ import defaultAvatarLight from "../assets/light/defaultAvatarLight.png"; import type { NotificationCardProps } from "../types"; import { generateElapsedTimeText } from "../utils/commonUtils"; import "../styles/card.css"; +import useSiren from "../utils/sirenHook"; /** * Card component represents an individual notification card in the notification list. @@ -51,7 +52,10 @@ const Card: FC = ({ }) => { const { id, createdAt, message, isRead } = notification; const { avatar, header, subHeader, body } = message; - + const { hideAvatar, disableAutoMarkAsRead } = cardProps ?? {}; + const { + markAsRead + } = useSiren(); const onDelete = (event: React.MouseEvent) => { deleteNotificationById(id); event.stopPropagation(); @@ -69,20 +73,23 @@ const Card: FC = ({ backgroundColor: styles.activeCardMarker.backgroundColor, }; + const handleNotificationCardClick = () => { + onNotificationCardClick && onNotificationCardClick(notification); + !disableAutoMarkAsRead && markAsRead(notification.id); + } + return (
- onNotificationCardClick && onNotificationCardClick(notification) - } + onClick={handleNotificationCardClick} data-testid={`card-${notification.id}`} > - {!cardProps?.hideAvatar && ( + {!hideAvatar && (