feat: refactor hook useAlertBar and add close icon

Author: AlexStack

src/components/homepage/DisplayRandomPicture.tsx

@@ -16,6 +16,7 @@ import { useSharedUtilContext } from '@/hooks/useSharedUtilContext';
 import SubmitButton from '@/components/shared/SubmitButton';
 
 import { FetchApiContext } from '@/constants';
+import { consoleLog } from '@/utils/shared/console-log';
 import { getApiResponse } from '@/utils/shared/get-api-response';
 
 const DisplayRandomPicture = () => {
@@ -52,6 +53,9 @@ const DisplayRandomPicture = () => {
         setAlertBarProps({
           message: 'A random picture fetched successfully',
           severity: 'info',
+          onClose: () => {
+            consoleLog('Alert bar closed');
+          },
         });
       } catch (error) {
         const errorMsg =

src/components/shared/AlertBar.tsx

@@ -1,21 +1,77 @@
 'use client';
 
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  Alert,
+  AlertColor,
+  IconButton,
+  Slide,
+  Snackbar,
+  SnackbarOrigin,
+} from '@mui/material';
 import React, { useState } from 'react';
 
-import { AlertBar, AlertBarProps } from '@/components/shared/AlertBar';
+export interface AlertBarProps {
+  message: React.ReactNode;
+  onClose?: () => void;
+  severity?: AlertColor;
+  vertical?: SnackbarOrigin['vertical'];
+  horizontal?: SnackbarOrigin['horizontal'];
+  autoHideSeconds?: number;
+  transitionSeconds?: number;
+}
 
+// my personal alert bar, feel free to use it, examples are in ReactHookForm.tsx
 export const useAlertBar = () => {
   const [alertBarProps, setAlertBarProps] = useState<AlertBarProps>({
     message: '',
     severity: 'info',
   });
+  const onAlertClose = () => {
+    setAlertBarProps({ message: '' });
+    alertBarProps.onClose?.();
+  };
+
+  const renderAlertBar = () => {
+    const {
+      message,
+      severity,
+      vertical = 'bottom',
+      horizontal = 'center',
+      autoHideSeconds = 5,
+      transitionSeconds = 0.5,
+    } = alertBarProps;
 
-  const renderAlertBar = () => (
-    <AlertBar
-      onClose={() => setAlertBarProps({ message: '' })}
-      {...alertBarProps}
-    />
-  );
+    return message ? (
+      <Snackbar
+        anchorOrigin={{ vertical, horizontal }}
+        open={!!message}
+        onClose={onAlertClose}
+        autoHideDuration={autoHideSeconds * 1000}
+        TransitionComponent={(props) => <Slide {...props} direction='up' />}
+        transitionDuration={transitionSeconds * 1000}
+        action={
+          <IconButton
+            size='small'
+            aria-label='close'
+            color='inherit'
+            onClick={onAlertClose}
+          >
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      >
+        <Alert
+          onClose={onAlertClose}
+          severity={severity}
+          variant='filled'
+          sx={{ width: '100%' }}
+        >
+          {message}
+        </Alert>
+      </Snackbar>
+    ) : null;
+  };
 
   return {
     setAlertBarProps,

src/hooks/useAlertBar.tsx

@@ -44,6 +44,7 @@ const StyledContentDiv = styled.div`
   }
 `;
 
+// my personal confirmation dialog, feel free to use it, examples are in ReactHookForm.tsx
 const useConfirmationDialog = () => {
   const defaultDialogProps: ConfirmationDialogProps = {
     title: '',

src/hooks/useConfirmDialog.tsx

@@ -2,15 +2,13 @@
 
 import React, { createContext, ReactNode, useContext } from 'react';
 
-import { useAlertBar } from '@/hooks/useAlertBar';
+import { AlertBarProps, useAlertBar } from '@/hooks/useAlertBar';
 import useConfirmationDialog, {
   ConfirmationDialogProps,
 } from '@/hooks/useConfirmDialog';
 
-import { AlertBarProps } from '@/components/shared/AlertBar';
-
-export const OUTSIDE_CLIENT_PROVIDER_ERROR =
-  'Cannot be used outside ClientProvider!';
+export const OUTSIDE_SHARED_UTIL_PROVIDER_ERROR =
+  'Cannot be used outside SharedUtilProvider!';
 
 export interface SharedUtilContextType {
   setAlertBarProps: (props: AlertBarProps) => void;
@@ -24,7 +22,7 @@ export const SharedUtilContext = createContext<
 export const useSharedUtilContext = (): SharedUtilContextType => {
   const context = useContext(SharedUtilContext);
   if (context === undefined) {
-    throw new Error(OUTSIDE_CLIENT_PROVIDER_ERROR);
+    throw new Error(OUTSIDE_SHARED_UTIL_PROVIDER_ERROR);
   }
 
   return context as SharedUtilContextType;