feat(alert): implement global alert container for toast notifications

Author: crsstha

.github/workflows/ci.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Generate Type
+        run: pnpm generate:type
+
       - name: Lint
         run: pnpm lint
   build:
@@ -58,5 +61,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Generate Type
+        run: pnpm generate:type
+
       - name: Build
         run: pnpm build

app/components/Navbar/index.tsx

@@ -12,6 +12,7 @@ import { gql } from 'urql';
 
 import UserContext from '#contexts/UserContext';
 import { useLogoutMutation } from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
 
 import styles from './styles.module.css';
 
@@ -24,18 +25,20 @@ const LOGOUT = gql`
 
 function Navbar() {
     const { user, setUser } = use(UserContext);
+    const alert = useAlert();
     const navigate = useNavigate();
 
-    const [{ fetching }, triggerLogout] = useLogoutMutation();
+    const [{ fetching: pendingLogout }, triggerLogout] = useLogoutMutation();
 
     const handleLogout = useCallback(async () => {
         const res = await triggerLogout({});
         const logoutResponse = res.data?.logout;
         if (logoutResponse) {
             setUser(undefined);
             navigate('/login');
+            alert.show('Logout Successful', { variant: 'success' });
         }
-    }, [navigate, triggerLogout, setUser]);
+    }, [navigate, triggerLogout, setUser, alert]);
 
     return (
         <nav className={styles.navbar}>
@@ -61,8 +64,9 @@ function Navbar() {
                         variant="tertiary"
                         className={styles.dropdownOption}
                         onClick={handleLogout}
+                        disabled={pendingLogout}
                     >
-                        {fetching ? 'Logging out' : 'Logout'}
+                        {pendingLogout ? 'Logging out' : 'Logout'}
                     </Button>
                 </React.Fragment>
             </DropdownMenu>

app/components/Navbar/styles.module.css

@@ -20,8 +20,10 @@
 }
 .dropdown-option {
     padding: var(--go-ui-spacing-xs);
-    margin-left: var(--go-ui-spacing-md);
+    padding-left: var(--go-ui-spacing-md);
     cursor: pointer;
+    overflow: hidden;
+    width: 100%;
     &:hover {
         color: var(--go-ui-color-primary-red);
     }

app/components/Navigation/index.tsx

@@ -1,5 +1,6 @@
 import {
     ReactNode,
+    useCallback,
     useState,
 } from 'react';
 import {
@@ -20,21 +21,24 @@ export interface NavigationItem {
     children?: NavigationItem[];
 
 }
-function Navigation({ navigationItem }: { navigationItem: NavigationItem[] }) {
-    const [openIndexes, setOpenIndexes] = useState(
+interface NavigationProps {
+    navigationItem: NavigationItem[];
+}
+function Navigation({ navigationItem }: NavigationProps) {
+    const [openAccordion, setOpenAccordion] = useState(
         navigationItem.map((_, i) => i),
     );
 
-    const toggleAccordion = (index: number) => {
-        setOpenIndexes((prev) => (prev.includes(index)
+    const toggleAccordion = useCallback((index: number) => {
+        setOpenAccordion((prev) => (prev.includes(index)
             ? prev.filter((i) => i !== index)
             : [...prev, index]));
-    };
+    }, []);
 
     return (
         <nav className={styles.nav}>
             {navigationItem.map((item, index) => {
-                const isOpen = openIndexes.includes(index);
+                const isOpen = openAccordion.includes(index);
                 return (
                     <div
                         key={item.title}
@@ -43,11 +47,11 @@ function Navigation({ navigationItem }: { navigationItem: NavigationItem[] }) {
                         )}
                     >
                         <Button
-                            name={item.title}
+                            name={index}
                             type="button"
                             className={styles.navHeaderContainer}
                             childrenContainerClassName={styles.navHeader}
-                            onClick={() => toggleAccordion(index)}
+                            onClick={toggleAccordion}
                             variant="tertiary"
                             icons={item.icon}
                         >

app/components/Page/styles.module.css

@@ -7,7 +7,6 @@
     .leftPane {
         display: flex;
         flex-direction: column;
-        box-shadow: 0px 4px 4px 0px rgba(227, 227, 227, 0.25);
         background-color: var(--go-ui-color-white);
         gap: var(--go-ui-spacing-md);
     }

app/hooks/useAlert.ts

@@ -0,0 +1,50 @@
+import {
+    use,
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    AlertContext,
+    AlertType,
+} from '@ifrc-go/ui/contexts';
+import { randomString } from '@togglecorp/fujs';
+
+const DEFAULT_ALERT_DISMISS_DURATION = 4500;
+
+interface AddAlertOption {
+    name?: string;
+    variant?: AlertType;
+    duration?: number;
+    description?: React.ReactNode;
+    nonDismissable?: boolean;
+    debugMessage?: string;
+}
+
+function useAlert() {
+    const {
+        addAlert,
+        // removeAlert,
+        // updateAlert,
+    } = use(AlertContext);
+
+    const show = useCallback((title: React.ReactNode, options?: AddAlertOption) => {
+        const name = options?.name ?? randomString(16);
+        addAlert({
+            variant: options?.variant ?? 'info',
+            duration: options?.duration ?? DEFAULT_ALERT_DISMISS_DURATION,
+            name: options?.name ?? name,
+            title,
+            description: options?.description,
+            nonDismissable: options?.nonDismissable ?? false,
+            debugMessage: options?.debugMessage,
+        });
+
+        return name;
+    }, [addAlert]);
+
+    return useMemo(() => ({
+        show,
+    }), [show]);
+}
+
+export default useAlert;

app/hooks/useAlertContextProviderValue.ts

@@ -0,0 +1,65 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    AlertContextProps,
+    AlertParams,
+} from '@ifrc-go/ui/contexts';
+import { unique } from '@togglecorp/fujs';
+
+function useAlertContextProviderValue() {
+    const [alerts, setAlerts] = useState<AlertParams[]>([]);
+
+    const addAlert = useCallback((alert: AlertParams) => {
+        setAlerts((prevAlerts) => unique(
+            [...prevAlerts, alert],
+            (a) => a.name,
+        ) ?? prevAlerts);
+    }, [setAlerts]);
+
+    const removeAlert = useCallback((name: AlertParams['name']) => {
+        setAlerts((prevAlerts) => {
+            const i = prevAlerts.findIndex((a) => a.name === name);
+            if (i === -1) {
+                return prevAlerts;
+            }
+
+            const newAlerts = [...prevAlerts];
+            newAlerts.splice(i, 1);
+
+            return newAlerts;
+        });
+    }, [setAlerts]);
+
+    const updateAlert = useCallback((name: AlertParams['name'], paramsWithoutName: Omit<AlertParams, 'name'>) => {
+        setAlerts((prevAlerts) => {
+            const i = prevAlerts.findIndex((a) => a.name === name);
+            if (i === -1) {
+                return prevAlerts;
+            }
+
+            const updatedAlert = {
+                ...prevAlerts[i],
+                paramsWithoutName,
+            };
+
+            const newAlerts = [...prevAlerts];
+            newAlerts.splice(i, 1, updatedAlert);
+
+            return newAlerts;
+        });
+    }, [setAlerts]);
+
+    const alertContextValue: AlertContextProps = useMemo(() => ({
+        alerts,
+        addAlert,
+        updateAlert,
+        removeAlert,
+    }), [alerts, addAlert, updateAlert, removeAlert]);
+
+    return alertContextValue;
+}
+
+export default useAlertContextProviderValue;

app/root/index.tsx

@@ -4,6 +4,8 @@ import {
 } from 'react';
 import { Cookies } from 'react-cookie';
 import { Outlet } from 'react-router';
+import { AlertContainer } from '@ifrc-go/ui';
+import { AlertContext } from '@ifrc-go/ui/contexts';
 import {
     cacheExchange,
     Client,
@@ -12,6 +14,7 @@ import {
 } from 'urql';
 
 import UserContext, { type UserContextInterface } from '#contexts/UserContext';
+import useAlertContextProviderValue from '#hooks/useAlertContextProviderValue';
 
 import type { User } from './types/user';
 
@@ -32,6 +35,7 @@ const gqlClient = new Client({
         credentials: 'include',
     }),
     requestPolicy: 'cache-and-network',
+    suspense: false,
 });
 
 function Root() {
@@ -50,10 +54,15 @@ function Root() {
             setUser,
         ],
     );
+    const alertContextValue = useAlertContextProviderValue();
+
     return (
         <UrqlProvider value={gqlClient}>
             <UserContext.Provider value={userContext}>
-                <Outlet />
+                <AlertContext.Provider value={alertContextValue}>
+                    <AlertContainer />
+                    <Outlet />
+                </AlertContext.Provider>
             </UserContext.Provider>
         </UrqlProvider>
     );