RSKU97iw/2104-react-sdk-bug-invalid-react-hook

.github/workflows/pull_request.yml

@@ -0,0 +1,31 @@
+name: Pull Request CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Prettier Check
+        run: npm run prettier-check
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Build Project
+        run: npm run build

.github/workflows/push_pipeline.yml

@@ -0,0 +1,70 @@
+name: Push Pipeline
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  Release:
+    name: Test, Build & Publish
+    runs-on: ubuntu-latest
+    outputs:
+      releaseType: ${{ steps.publish.outputs.type }}
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: 18.17.x-${{ runner.OS }}-build-${{ hashFiles('package.json') }}
+
+      - name: Install Dependencies
+        if: steps.cache-modules.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Check Prettier Formatting
+        run: npm run prettier-check
+
+      - name: Build Project
+        run: npm run build
+
+      - name: Send Slack Notification (Pre-Publish)
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,action,took
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        if: always() # Send notifications even if the job fails or is canceled.
+
+      - name: Publish to npm
+        id: publish
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_AUTH_TOKEN }}
+        env:
+          NODE_ENV: production
+
+      - name: Send Slack Notification (Post-Publish)
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          fields: repo
+          text: Published to NPM ${{ steps.publish.outputs.old-version }} -> ${{ steps.publish.outputs.version }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        if: steps.publish.outputs.type != 'none' && always()

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

lib/api.ts

@@ -1,23 +1,26 @@
+const USER_AGENT = 'notificationapi-react-client-sdk';
+const VERSION = '0.0.25';
 export const api = async (
   endpoint: string,
-  method: "GET" | "POST" | "PATCH",
+  method: 'GET' | 'POST' | 'PATCH',
   resource: string,
   clientId: string,
   userId: string,
   hashedUserId?: string,
-  data?: any
-): Promise<any> => {
+  data?: unknown
+): Promise<unknown> => {
   const token = hashedUserId
-    ? btoa(clientId + ":" + userId + ":" + hashedUserId)
-    : btoa(clientId + ":" + userId);
+    ? btoa(clientId + ':' + userId + ':' + hashedUserId)
+    : btoa(clientId + ':' + userId);
   const res = await fetch(
     `${endpoint}/${clientId}/users/${encodeURIComponent(userId)}/${resource}`,
     {
       method,
       body: JSON.stringify(data),
       headers: {
         Authorization: `Basic ${token}`,
-      },
+        'User-Agent': `${USER_AGENT}/${VERSION}`
+      }
     }
   );
 

lib/components/Notifications/Inbox.tsx

@@ -1,29 +1,25 @@
-import { Empty, List } from "antd";
-import { InboxHeader } from "./InboxHeader";
-import VirtualList from "rc-virtual-list";
-import { ImageShape, Notification } from "./Notification";
-import { NotificationAPIContext } from "../Provider";
-import { useContext } from "react";
-import { Filter, NotificationPopupProps } from "./NotificationPopup";
-
-export enum Pagination {
-  INFINITE_SCROLL = "infinite_scroll",
-  PAGINATED = "paginated",
-}
+import { Empty, List } from 'antd';
+import { InboxHeader } from './InboxHeader';
+import VirtualList from 'rc-virtual-list';
+import { Notification } from './Notification';
+import { InappNotification, NotificationAPIContext } from '../Provider';
+import { useContext } from 'react';
+import { NotificationPopupProps } from './NotificationPopup';
+import { Filter, ImageShape, Pagination } from './interface';
 
 type InboxProps = {
   pagination: keyof typeof Pagination;
   maxHeight: number;
-  filter: NotificationPopupProps["filter"];
+  filter: NotificationPopupProps['filter'];
   imageShape: keyof typeof ImageShape;
   pageSize: number;
-  pagePosition: NotificationPopupProps["pagePosition"];
+  pagePosition: NotificationPopupProps['pagePosition'];
 };
 
 export const Inbox: React.FC<InboxProps> = (props) => {
   const context = useContext(NotificationAPIContext);
 
-  const filterFunction = (notifications: any[]) => {
+  const filterFunction = (notifications: InappNotification[]) => {
     if (props.filter === Filter.ALL || !props.filter) {
       return notifications;
     } else if (props.filter === Filter.UNARCHIVED) {
@@ -41,7 +37,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
 
   return (
     <div>
-      {props.pagination === "INFINITE_SCROLL" ? (
+      {props.pagination === 'INFINITE_SCROLL' ? (
         <List
           header={<InboxHeader markAsArchived={context.markAsArchived} />}
           dataSource={filterFunction(context.notifications)}
@@ -70,7 +66,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
               }
             }}
           >
-            {(n: any) => (
+            {(n: InappNotification) => (
               <List.Item key={n.id} style={{ padding: 0 }}>
                 <Notification
                   imageShape={props.imageShape}
@@ -86,7 +82,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
         <List
           header={<InboxHeader markAsArchived={context.markAsArchived} />}
           dataSource={filterFunction(context.notifications)}
-          renderItem={(n: any) => (
+          renderItem={(n: InappNotification) => (
             <List.Item key={n.id} style={{ padding: 0 }}>
               <Notification
                 imageShape={props.imageShape}
@@ -98,7 +94,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
           )}
           pagination={{
             pageSize: props.pageSize,
-            align: "center",
+            align: 'center',
             position: props.pagePosition,
             showSizeChanger: false,
             simple: true,
@@ -108,7 +104,7 @@ export const Inbox: React.FC<InboxProps> = (props) => {
               ) {
                 context.loadNotifications();
               }
-            },
+            }
           }}
         >
           {filterFunction(context.notifications).length === 0 && (

lib/components/Notifications/InboxHeader.tsx

@@ -1,15 +1,15 @@
-import { CheckOutlined, SettingOutlined } from "@ant-design/icons";
-import { Button, Popover, Typography } from "antd";
+import { CheckOutlined, SettingOutlined } from '@ant-design/icons';
+import { Button, Popover, Typography } from 'antd';
 
 export const InboxHeader = (props: {
-  markAsArchived: (ids: string[] | "ALL") => void;
+  markAsArchived: (ids: string[] | 'ALL') => void;
 }) => {
   return (
     <div
       style={{
-        display: "flex",
-        justifyContent: "space-between",
-        paddingRight: 5,
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingRight: 5
       }}
     >
       <Typography.Text strong>Notifications</Typography.Text>
@@ -21,7 +21,7 @@ export const InboxHeader = (props: {
             size="small"
             type="text"
             onClick={() => {
-              props.markAsArchived("ALL");
+              props.markAsArchived('ALL');
             }}
           />
         </Popover>

lib/components/Notifications/Notification.tsx

@@ -1,24 +1,21 @@
-import { CheckOutlined } from "@ant-design/icons";
-import { Avatar, Badge, Button, Typography } from "antd";
-import { styled } from "styled-components";
-import TimeAgo from "javascript-time-ago";
-import en from "javascript-time-ago/locale/en";
-import ReactTimeAgo from "react-time-ago";
+import { CheckOutlined } from '@ant-design/icons';
+import { Avatar, Badge, Button, Typography } from 'antd';
+import { styled } from 'styled-components';
+import TimeAgo from 'javascript-time-ago';
+import en from 'javascript-time-ago/locale/en';
+import ReactTimeAgo from 'react-time-ago';
+import { InappNotification } from '../Provider';
+import { ImageShape } from './interface';
 
 TimeAgo.addDefaultLocale(en);
 TimeAgo.addLocale(en);
 
-export enum ImageShape {
-  square = "square",
-  circle = "circle",
-}
-
 const NotificationDiv = styled.div<{
   $redirect: boolean;
   $seen: boolean;
   $archived: boolean;
 }>`
-  cursor: ${(props) => (props.$redirect ? "pointer" : "default")};
+  cursor: ${(props) => (props.$redirect ? 'pointer' : 'default')};
 
   &:hover {
     background: #eee !important;
@@ -30,34 +27,34 @@ const NotificationDiv = styled.div<{
   }
 
   &:hover .notification-archive-button {
-    visibility: ${(props) => (props.$archived ? "hidden" : "visible")};
+    visibility: ${(props) => (props.$archived ? 'hidden' : 'visible')};
   }
 `;
 
 export const Notification = (props: {
-  notification: any;
-  markAsArchived: (ids: string[] | "ALL") => void;
+  notification: InappNotification;
+  markAsArchived: (ids: string[] | 'ALL') => void;
   markAsClicked: (id: string) => void;
   imageShape: keyof typeof ImageShape;
 }) => {
   return (
     <NotificationDiv
-      $redirect={props.notification.redirectURL ? true : false}
-      $seen={props.notification.seen || props.notification.opened}
-      $archived={props.notification.archived}
+      $redirect={!!props.notification.redirectURL} // Ensuring boolean type
+      $seen={!!(props.notification.seen || props.notification.opened)} // Ensuring boolean type
+      $archived={!!props.notification.archived} // Ensuring boolean type
       onClick={() => {
         props.markAsClicked(props.notification.id);
         if (props.notification.redirectURL) {
           window.location.href = props.notification.redirectURL;
         }
       }}
       style={{
-        padding: "16px 6px 16px 0",
-        background: "#fff",
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        width: "100%",
+        padding: '16px 6px 16px 0',
+        background: '#fff',
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%'
       }}
     >
       <div>
@@ -66,15 +63,15 @@ export const Notification = (props: {
           size="large"
           style={{
             marginRight: 8,
-            marginLeft: 12,
+            marginLeft: 12
           }}
           shape={props.imageShape}
         />
       </div>
 
       <div
         style={{
-          flexGrow: 1,
+          flexGrow: 1
         }}
       >
         <div>
@@ -92,11 +89,11 @@ export const Notification = (props: {
 
       <div
         style={{
-          position: "relative",
+          position: 'relative',
           width: 48,
           height: 32,
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center'
         }}
       >
         <Button
@@ -116,11 +113,11 @@ export const Notification = (props: {
           dot
           className="notification-highlight"
           style={{
-            visibility: props.notification.archived ? "hidden" : "visible",
+            visibility: props.notification.archived ? 'hidden' : 'visible',
             marginRight: 10,
             marginLeft: 8,
             marginTop: 6,
-            right: 0,
+            right: 0
           }}
         />
       </div>