refactor: Code refactor and optimisation

Author: reshmarevi17

src/components/BellIcon.tsx

@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-interface IconProps {
-  color?: string;
-  size?: number
-}
+import type { IconProps } from '../types';
+
 
 const BellIcon: FC<IconProps> = ({ color = '#232326', size = 30 }: { color?: string, size?: number}) => {
   return (

src/components/Card.tsx

@@ -1,5 +1,5 @@
-import type { CSSProperties } from "react";
-import React, { type FC, useState } from "react";
+import type { CSSProperties , FC} from "react";
+import React, { useState } from "react";
 
 import CloseIcon from "./CloseIcon";
 import { useSirenContext } from "./SirenProvider";
@@ -32,17 +32,19 @@ import useSiren from "../utils/sirenHook";
  * <Card
  *   notification={notification}
  *   cardProps={{ hideAvatar: false }}
+ *   darkMode={false}
  *   styles={customStyles}
  *   onCardClick={(notification) => console.log('Notification clicked', notification)}
- *   deleteById={(id) => console.log('Notification deleted', id)}
+ *   deleteNotificationById={(id) => console.log('Notification deleted', id)}
  * />
  *
  * @param {NotificationCardProps} props - The properties passed to the Card component.
  * @param {Object} props.notification - The notification data to display in the card.
  * @param {Object} [props.cardProps] - Optional properties to customize the appearance of the card.
  * @param {Object} props.styles - Custom styles applied to the card and its elements.
+ * @param {boolean} props.darkMode - Flag to determine the dark mode status.
  * @param {Function} [props.onCardClick] - Callback function executed when the card is clicked.
- * @param {Function} [props.deleteById] - Callback function executed when the delete action is triggered.
+ * @param {Function} [props.deleteNotificationById] - Callback function executed when the delete action is triggered.
  * @returns {ReactElement} The rendered Card component.
  */
 
@@ -63,6 +65,8 @@ const Card: FC<NotificationCardProps> = ({
   const { id } = useSirenContext();
 
   const [deleteAnimationStyle, setDeleteAnimationStyle] = useState('');
+  const [imageLoaded, setImageLoaded] = useState(true);
+  const [imageSource, setImageSource] = useState(thumbnailUrl ?? '');
 
   const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
   const failedImage = darkMode ? failedImageDark: failedImageLight;
@@ -113,10 +117,6 @@ const Card: FC<NotificationCardProps> = ({
     event.stopPropagation();
   };
 
-  const [imageLoaded, setImageLoaded] = useState(true); // Initially assume image is loaded
-
-  const [imageSource, setImageSource] = useState(thumbnailUrl ? thumbnailUrl : '');
-
   const onErrorMedia = (): void => {
     setImageLoaded(false);
     setImageSource(failedImage);
@@ -133,6 +133,7 @@ const Card: FC<NotificationCardProps> = ({
       onClick={handleNotificationCardClick}
       aria-label={`siren-notification-card-${notification.id}`}
       data-testid={`card-${notification.id}`}
+      role="button"
     >
       {!hideAvatar && (
         <div
@@ -145,6 +146,7 @@ const Card: FC<NotificationCardProps> = ({
           }}
           aria-label={`siren-notification-avatar-${notification.id}`}
           onClick={handleAvatarClick}
+          role="button"
         />
       )}
       <div className="siren-sdk-card-content-wrapper">
@@ -168,7 +170,9 @@ const Card: FC<NotificationCardProps> = ({
             className="siren-sdk-card-thumbnail-container" 
             style={{...(onMediaThumbnailClick && { cursor: "pointer" }),
               backgroundColor: darkMode ? '#4C4C4C' : '#F0F2F5'}}
-            onClick={handleMediaClick}>
+            onClick={handleMediaClick}
+            role="button"
+          >
             <img
               className={`siren-sdk-card-thumbnail-image ${thumbnailUrl && imageLoaded ? 'siren-sdk-card-thumbnail-with-image' : ''}`}
               src={imageSource}
@@ -192,6 +196,7 @@ const Card: FC<NotificationCardProps> = ({
           className="siren-sdk-delete-button"
           onClick={onDelete}
           aria-label={`siren-notification-delete-${notification.id}`}
+          role="button"
         >
           <CloseIcon
             color={styles?.deleteIcon.color}

src/components/ClearAllIcon.tsx

@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-interface IconProps {
-  color?: string;
-  size?: number;
-}
+import type { IconProps } from '../types';
+
 
 const ClearAllIcon: FC<IconProps> = ({ color = '#667185', size = 24 }) => {
   return (

src/components/CloseIcon.tsx

@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-interface IconProps {
-  color?: string;
-  size?: number;
-}
+import type { IconProps } from '../types';
+
 
 const CloseIcon: FC<IconProps> = ({ color = '#98A2B3', size= 20 }) => {
   return (

src/components/EmptyList.tsx

@@ -1,8 +1,9 @@
+import type { FC } from "react";
 import React from "react";
 
 import darkModeIcon from "../assets/dark/emptyIconDark.svg";
 import lightModeIcon from "../assets/light/emptyIconLight.svg";
-import type { SirenStyleProps } from "../types";
+import type { EmptyListProps } from "../types";
 import { Constants } from "../utils";
 import { LIST_EMPTY_SUB_TEXT, LIST_EMPTY_TEXT } from "../utils/constants";
 import "../styles/emptyList.css";
@@ -14,14 +15,18 @@ import "../styles/emptyList.css";
  * @example
  * <EmptyList
  *   styles={customStyles}
+ *   darkMode={false}
  * />
  *
- * @param {Object} props - The properties passed to the EmptyList component.
+ * @param {EmptyListProps} props - The properties passed to the EmptyList component.
  * @param {Object} props.styles - The styles object to customize the appearance of the empty list.
+ * @param {boolean} [props.darkMode] - Flag indicating if the component is in dark mode
  * @returns {ReactElement} The rendered EmptyList component.
  */
-const EmptyList = (props: { styles: SirenStyleProps, darkMode: boolean }) => {
-  const { styles, darkMode } = props;
+const EmptyList: FC<EmptyListProps> = ({
+  styles,
+  darkMode
+}) => {
 
   const containerStyle = { backgroundColor: darkMode ? Constants.COLORS.dark.iconColor : Constants.COLORS.light.iconColor };
 

src/components/ErrorWindow.tsx

@@ -1,7 +1,8 @@
+import type { FC } from "react";
 import React from "react";
 
 import errorIcon from "../assets/errorIcon.svg";
-import type { SirenStyleProps } from "../types";
+import type { ErrorWindowProps } from "../types";
 import { Constants } from "../utils";
 import { ERROR_SUB_TEXT, ERROR_TEXT } from "../utils/constants";
 import "../styles/errorWindow.css";
@@ -13,20 +14,22 @@ import "../styles/errorWindow.css";
  * @example
  * <ErrorWindow
  *   styles={customStyles}
+ *   error="An error occurred while fetching data."
+ *   darkMode={false}
  *   onRefresh={() => console.log('Refresh button clicked')}
  * />
  *
- * @param {Object} props - The properties passed to the ErrorWindow component.
+ * @param {ErrorWindowProps} props - The properties passed to the ErrorWindow component.
  * @param {Object} props.styles - The styles object to customize the appearance of the error window.
+ * @param {Object} props.error - The error message to display in the window.
  * @param {boolean} props.darkMode - Flag for whether the selected theme is dark mode
  * @returns {ReactElement} The rendered ErrorWindow component.
  */
-const ErrorWindow = (props: {
-  styles: SirenStyleProps;
-  error: string;
-  darkMode: boolean;
+const ErrorWindow: FC<ErrorWindowProps> = ({
+  styles,
+  error,
+  darkMode
 }) => {
-  const { styles, error, darkMode } = props;
   const containerStyle = {
     backgroundColor: darkMode
       ? Constants.COLORS.dark.iconColor

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from "react";
+import React, { type FC, useMemo } from "react";
 
 import ClearAllIcon from "./ClearAllIcon";
 import type { HeaderProps } from "../types";
@@ -16,14 +16,18 @@ const { CLEAR_ALL_LABEL } = Constants;
  *   title="Notifications"
  *   styles={customStyles}
  *   enableClearAll={true}
+ *   hideClearAll={false}
  *   handleClearAllNotification={() => console.log('Clear all notifications')}
+ *   fullScreen={false}
  * />
  *
  * @param {HeaderProps} props - The properties passed to the Header component.
  * @param {string} props.title - The title to be displayed in the header.
  * @param {Object} props.styles - The styles object to customize the appearance of the header.
  * @param {boolean} props.enableClearAll - Whether to enable the "Clear All" action in the header.
+ * @param {boolean} props.hideClearAll - Flag indicating if the "Clear All" action should be hidden.
  * @param {Function} props.handleClearAllNotification - Callback function executed when the "Clear All" action is clicked.
+ * @param {boolean} props.fullScreen - Flag indicating if the component is in full screen mode.
  * @returns {ReactElement} The rendered Header component.
  */
 const Header: FC<HeaderProps> = ({
@@ -34,37 +38,41 @@ const Header: FC<HeaderProps> = ({
   handleClearAllNotification,
   fullScreen
 }) => {
-  return (
-    <>
-      <div
-        style={{...(!fullScreen && styles.windowTopBorder),...styles.headerContainer}}
-        className="siren-sdk-header-container"
-        data-testid="header"
-      >
-        <p style={styles.headerTitle} className="siren-sdk-text-break">{title}</p>
-        {!hideClearAll && (
-          <div
-            className="siren-sdk-header-right-container"
-            style={{
-              opacity: !enableClearAll ? 0.5 : 1,
-              cursor: enableClearAll ? "pointer" : "default",
-            }}
-            onClick={handleClearAllNotification}
-            data-testid="clear-all"
-            aria-disabled={!enableClearAll}
-            aria-label="siren-header-clear-all"
+
+  const headerRightContainerStyle = useMemo(() => ({
+    ...(!enableClearAll && {
+      opacity: 0.5,
+      cursor: 'default'
+    })
+  }), [enableClearAll]);
+  
+  return (  
+    <div
+      style={{...(!fullScreen && styles.windowTopBorder),...styles.headerContainer}}
+      className="siren-sdk-header-container"
+      data-testid="header"
+    >
+      <p style={styles.headerTitle} className="siren-sdk-text-break">{title}</p>
+      {!hideClearAll && (
+        <div
+          className="siren-sdk-header-right-container"
+          style={headerRightContainerStyle}
+          onClick={handleClearAllNotification}
+          data-testid="clear-all"
+          aria-disabled={!enableClearAll}
+          aria-label="siren-header-clear-all"
+          role="button"
+        >
+          <ClearAllIcon color={styles.clearIcon.color} size={styles.clearIcon.size}/>
+          <p
+            className="siren-sdk-header-clear-all-text"
+            style={styles.headerAction}
           >
-            <ClearAllIcon color={styles.clearIcon.color} size={styles.clearIcon.size}/>
-            <p
-              className="siren-sdk-header-clear-all-text"
-              style={styles.headerAction}
-            >
-              {CLEAR_ALL_LABEL}
-            </p>
-          </div>
-        )}
-      </div>
-    </>
+            {CLEAR_ALL_LABEL}
+          </p>
+        </div>
+      )}
+    </div>
   );
 };
 

src/components/Loader.tsx

@@ -3,6 +3,22 @@ import React, { type FC } from "react";
 import "../styles/loader.css";
 import type { LoaderProps } from "../types";
 
+/**
+ * Loader component represents a skeleton loader for the notification card.
+ *
+ * @component
+ * @example
+ * <Loader
+ *   hideAvatar={false}
+ *   styles={customStyles}
+ * />
+ *
+ * @param {LoaderProps} props - The properties passed to the Loader component.
+ * @param {boolean} props.hideAvatar - Flag to determine if the avatar should be hidden.
+ * @param {Object} props.styles - Custom styles applied to the loader.
+ * @returns {ReactElement} The rendered Loader component.
+ */
+
 const Loader : FC<LoaderProps> = ({
   hideAvatar,
   styles,

src/components/ShowMore.tsx

@@ -3,6 +3,26 @@ import React from "react";
 import "../styles/showMore.css";
 import type { LoadMoreProps } from "../types";
 
+/**
+ * ShowMoreButton component represents the button to load more items in the notification panel.
+ *
+ * @component
+ * @example
+ * <ShowMoreButton
+ *   styles={customStyles}
+ *   customComponent={<button>Load More</button>}
+ *   onClick={() => console.log('Load more clicked')}
+ *   loadMoreLabel="Load More"
+ * />
+ *
+ * @param {LoadMoreProps} props - The properties passed to the ShowMoreButton component.
+ * @param {Object} props.styles - The styles object to customize the appearance of the button.
+ * @param {ReactElement} props.customComponent - Custom component to be rendered as the load more button.
+ * @param {Function} props.onClick - Callback function executed when the button is clicked.
+ * @param {string} props.loadMoreLabel - The label to be displayed on the button.
+ * @returns {ReactElement} The rendered ShowMoreButton component.
+ */
+
 const ShowMoreButton = (props: LoadMoreProps) => {
   const { styles, customComponent, onClick, loadMoreLabel } = props;
 
@@ -23,7 +43,7 @@ const ShowMoreButton = (props: LoadMoreProps) => {
       style={styles.loadMoreButton}
       aria-label="siren-load-more"
     >
-      {loadMoreLabel || "Load More"}
+      {loadMoreLabel ?? "Load More"}
     </button>
   );
 };