lint fixes

Author: vas3a

src/apps/platform/src/PlatformApp.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
 
-import { useViewportUnitsFix, NotificationsContainer } from '~/libs/shared'
+import { NotificationsContainer, useViewportUnitsFix } from '~/libs/shared'
 
 import { AppFooter } from './components/app-footer'
 import { AppHeader } from './components/app-header'

src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx

@@ -13,6 +13,7 @@ import { TableLoading } from '~/apps/admin/src/lib'
 import { handleError } from '~/apps/admin/src/lib/utils'
 import { EnvironmentConfig } from '~/config'
 import { BaseModal, Button, InputCheckbox, InputText } from '~/libs/ui'
+import { NotificationContextType, useNotification } from '~/libs/shared'
 
 import {
     useFetchScreeningReview,
@@ -60,7 +61,6 @@ import {
 } from '../../../config/routes.config'
 
 import styles from './ChallengeDetailsPage.module.scss'
-import { useNotification } from '~/libs/shared'
 
 interface Props {
     className?: string
@@ -227,7 +227,7 @@ const computePhaseCompletionFromScreenings = (
 
 // eslint-disable-next-line complexity
 export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
-    const { showBannerNotification, removeNotification } = useNotification();
+    const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
     const [searchParams, setSearchParams] = useSearchParams()
     const location = useLocation()
     const navigate = useNavigate()
@@ -1328,10 +1328,12 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
     useEffect(() => {
         const notification = showBannerNotification({
             id: 'ai-review-scores-warning',
-            message: 'AI Review Scores are advisory only to provide immediate, educational, and actionable feedback to members. AI Review Scores are not influence winner selection.',
+            message: `AI Review Scores are advisory only to provide immediate,
+                educational, and actionable feedback to members.
+                AI Review Scores are not influence winner selection.`,
         })
-      return () => notification && removeNotification(notification.id);
-    }, [showBannerNotification]);
+        return () => notification && removeNotification(notification.id)
+    }, [showBannerNotification])
 
     return (
         <PageWrapper

src/libs/core/lib/profile/profile-context/profile.context.tsx

@@ -12,6 +12,6 @@ export const defaultProfileContextData: ProfileContextData = {
 
 const profileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
 
-export const useProfileContext = () => useContext(profileContext);
+export const useProfileContext = (): ProfileContextData => useContext(profileContext)
 
 export default profileContext

src/libs/shared/lib/components/notifications/Notifications.container.tsx

@@ -2,10 +2,10 @@ import { FC } from 'react'
 
 import { Notification } from '~/libs/ui'
 
-import { useNotification } from './Notifications.context';
+import { NotificationContextType, useNotification } from './Notifications.context'
 
 const NotificationsContainer: FC = () => {
-    const { notifications, removeNotification } = useNotification();
+    const { notifications, removeNotification }: NotificationContextType = useNotification()
 
     return (
         <div>

src/libs/shared/lib/components/notifications/Notifications.context.tsx

@@ -1,8 +1,10 @@
-import React, { createContext, useContext, useState, useCallback, ReactNode } from "react";
-import { useProfileContext } from "~/libs/core";
-import { dismiss, wasDismissed } from "./localstorage.utils";
+import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
 
-export type NotificationType = "success" | "error" | "info" | "warning" | "banner";
+import { useProfileContext } from '~/libs/core'
+
+import { dismiss, wasDismissed } from './localstorage.utils'
+
+export type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'banner';
 
 export interface Notification {
     id: string;
@@ -13,62 +15,77 @@ export interface Notification {
 
 type NotifyPayload = string | (Partial<Notification> & { message: string })
 
-interface NotificationContextType {
+export interface NotificationContextType {
     notifications: Notification[];
     notify: (message: NotifyPayload, type?: NotificationType, duration?: number) => Notification | void;
     showBannerNotification: (message: NotifyPayload) => Notification | void;
     removeNotification: (id: string) => void;
 }
 
-const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
 
 export const useNotification = (): NotificationContextType => {
-    const context = useContext(NotificationContext);
-    if (!context) throw new Error("useNotification must be used within a NotificationProvider");
-    return context;
-};
+    const context = useContext(NotificationContext)
+    if (!context) throw new Error('useNotification must be used within a NotificationProvider')
+    return context
+}
 
 export const NotificationProvider: React.FC<{
     children: ReactNode,
-}> = ({ children }) => {
+}> = props => {
     const profileCtx = useProfileContext()
-    const uuid = profileCtx.profile?.userId ?? 'annon';
-    const [notifications, setNotifications] = useState<Notification[]>([]);
+    const uuid = profileCtx.profile?.userId ?? 'annon'
+    const [notifications, setNotifications] = useState<Notification[]>([])
 
     const removeNotification = useCallback((id: string, persist?: boolean) => {
-        setNotifications(prev => prev.filter(n => n.id !== id));
+        setNotifications(prev => prev.filter(n => n.id !== id))
         if (persist) {
-            dismiss(id);
+            dismiss(id)
         }
-    }, []);
+    }, [])
 
     const notify = useCallback(
-        (message: NotifyPayload, type: NotificationType = "info", duration = 3000) => {
-            const id = `${uuid}[${typeof message === 'string' ? message : message.id}]`;
-            const newNotification: Notification = typeof message === 'string' ? { id, message, type, duration } : { type, duration, ...message, id };
+        (message: NotifyPayload, type: NotificationType = 'info', duration = 3000) => {
+            const id = `${uuid}[${typeof message === 'string' ? message : message.id}]`
+            const newNotification: Notification
+                = typeof message === 'string'
+                    ? { duration, id, message, type }
+                    : { duration, type, ...message, id }
 
             if (wasDismissed(id)) {
-                return;
+                return undefined
             }
 
-            setNotifications(prev => [...prev, newNotification]);
+            setNotifications(prev => [...prev, newNotification])
 
             if (duration > 0) {
-                setTimeout(() => removeNotification(id), duration);
+                setTimeout(() => removeNotification(id), duration)
             }
 
-            return newNotification;
+            return newNotification
         },
-        [uuid]
-    );
+        [uuid],
+    )
 
     const showBannerNotification = useCallback((
         message: NotifyPayload,
-    ) => notify(message, 'banner', 0), [notify]);
+    ) => notify(message, 'banner', 0), [notify])
+
+    const ctxValue = useMemo(() => ({
+        notifications,
+        notify,
+        removeNotification,
+        showBannerNotification,
+    }), [
+        notifications,
+        notify,
+        removeNotification,
+        showBannerNotification,
+    ])
 
     return (
-        <NotificationContext.Provider value={{ notifications, notify, showBannerNotification, removeNotification }}>
-            {children}
+        <NotificationContext.Provider value={ctxValue}>
+            {props.children}
         </NotificationContext.Provider>
-    );
-};
+    )
+}

src/libs/ui/lib/components/notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useCallback } from 'react'
 
 import { NotificationBanner } from './banner'
 
@@ -8,12 +8,20 @@ interface NotificationProps {
 }
 
 const Notification: FC<NotificationProps> = props => {
+    const handleClose = useCallback((save?: boolean) => {
+        props.onClose(props.notification.id, save)
+    }, [props.onClose])
 
     if (props.notification.type === 'banner') {
-        return <NotificationBanner content={props.notification.message} onClose={(save?: boolean) => props.onClose(props.notification.id, save)} />
+        return (
+            <NotificationBanner
+                content={props.notification.message}
+                onClose={handleClose}
+            />
+        )
     }
 
-    return null;
+    return <></>
 }
 
 export default Notification

src/libs/ui/lib/components/notification/banner/NotificationBanner.stories.tsx

@@ -1,19 +1,16 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable camelcase */
-
 import { Meta, StoryObj } from '@storybook/react'
 
 import NotificationBanner from './NotificationBanner'
 
 const meta: Meta<typeof NotificationBanner> = {
     argTypes: {
+        content: {
+            description: 'Content displayed inside the tooltip',
+        },
         persistent: {
             defaultValue: false,
             description: 'Set to true to allow clicks inside the tooltip',
         },
-        content: {
-            description: 'Content displayed inside the tooltip',
-        },
     },
     component: NotificationBanner,
     excludeStories: /.*Decorator$/,
@@ -27,7 +24,6 @@ type Story = StoryObj<typeof NotificationBanner>;
 
 export const Primary: Story = {
     args: {
-        // children: <IconOutline.QuestionMarkCircleIcon width='35' />,
         content: 'Help tooltip',
     },
 }

src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx

@@ -1,8 +1,9 @@
 import { FC, ReactNode, useCallback } from 'react'
 
-import styles from './NotificationBanner.module.scss'
 import { InformationCircleIcon, XCircleIcon } from '@heroicons/react/outline'
 
+import styles from './NotificationBanner.module.scss'
+
 interface NotificationBannerProps {
     persistent?: boolean
     content: ReactNode
@@ -11,6 +12,9 @@ interface NotificationBannerProps {
 }
 
 const NotificationBanner: FC<NotificationBannerProps> = props => {
+    const handleClose = useCallback(() => {
+        props.onClose?.(true)
+    }, [props.onClose])
 
     return (
         <div className={styles.wrap}>
@@ -24,7 +28,7 @@ const NotificationBanner: FC<NotificationBannerProps> = props => {
                 {props.content}
 
                 {!props.persistent && (
-                    <div className={styles.close} onClick={() => props.onClose?.(true)}>
+                    <div className={styles.close} onClick={handleClose}>
                         <XCircleIcon className='icon-xl' />
                     </div>
                 )}