Merge pull request #122 from ballyalley-o/development

Feat/TCCP117-feature-snackbar-hook: Implement Snackbar hook

package.json

@@ -26,6 +26,7 @@
     "axios": "^1.6.8",
     "framer-motion": "^11.0.8",
     "markdown-to-jsx": "^7.4.1",
+    "notistack": "^3.0.1",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.2",

src/app.tsx

@@ -5,6 +5,7 @@ import { AppNavBar, AppFooter } from 'component'
 import { Fallback } from 'page'
 import { AuthProvider } from 'auth/auth-provider'
 import { SettingProvider } from 'component/setting'
+import { SnackProvider } from 'hook'
 import ErrorBoundary from 'util/error-boundary'
 import Router from 'route'
 import withRoot from 'withroot'
@@ -22,11 +23,13 @@ function App() {
         <HelmetProvider>
           <BrowserRouter>
             <SettingProvider>
-              <AppNavBar />
-              <ErrorBoundary fallback={<Fallback fallbackTitle={FALLBACK.BAD_REQUEST.MESSAGE} errorCode={FALLBACK.BAD_REQUEST.CODE} />}>
-                <Router />
-              </ErrorBoundary>
-              <AppFooter />
+              <SnackProvider>
+                <AppNavBar />
+                <ErrorBoundary fallback={<Fallback fallbackTitle={FALLBACK.BAD_REQUEST.MESSAGE} errorCode={FALLBACK.BAD_REQUEST.CODE} />}>
+                  <Router />
+                </ErrorBoundary>
+                <AppFooter />
+              </SnackProvider>
             </SettingProvider>
           </BrowserRouter>
         </HelmetProvider>

src/auth/auth-provider.tsx

@@ -1,14 +1,15 @@
-import { LOCAL_STORAGE } from 'constant'
+import { COLOR, LOCAL_STORAGE } from 'constant'
 import React, { FC, createContext, useEffect, useState, useMemo, useCallback } from 'react'
 import { createAsyncThunk } from '@reduxjs/toolkit'
 import localStorageSpace from 'util/local-storage-space'
 import storage from 'redux-persist/lib/storage'
 import { setInitial, setCredential } from 'store/slice/auth'
 import { useLoginMutation, useLogoutMutation } from 'store/slice/auth/endpoint'
+import { useSelector, dispatch } from 'store'
 import { isValidToken, setSession } from 'auth/utility'
 import { AuthPath } from 'route/path'
 import { RESPONSE } from 'constant'
-import { useSelector, dispatch } from 'store'
+import { snack } from 'hook'
 
 export const AuthContext = createContext<{
   isAuthenticated: boolean
@@ -32,30 +33,10 @@ export const AuthProvider: FC<AuthProviderProps> = ({ children }) => {
   // const [isAuthenticated, setIsAuthenticated] = useState(false)
   const { user, isAuthenticated } = useSelector((state: RootState) => state.auth || {})
   const [logoutCall] = useLogoutMutation()
-  const [loginCall, { isLoading }] = useLoginMutation()
+  const [loginCall, { isLoading, error }] = useLoginMutation()
 
   const storageAvailable = useMemo(() => localStorageSpace(), [])
 
-  const token = storageAvailable ? localStorage.getItem(LOCAL_STORAGE.TOKEN) : ''
-
-  if (token && isValidToken(token)) {
-    setSession(token)
-  }
-
-  // useEffect(() => {
-  //   const expirationTime = localStorage.getItem('expirationTime')
-  //   const user = JSON.parse(localStorage.getItem(LOCAL_STORAGE.USER) || '{}')
-
-  //   if (user.user !== null) {
-  //     dispatch(setCredential({ user: null, isAuthenticated: false, token: null, isInitialized: false }))
-  //     localStorage.removeItem('expirationTime')
-  //   } else {
-  //     console.log('user', user)
-  //     setIsAuthenticated(false)
-  //     dispatch(setCredential({ user: null, isAuthenticated: false, token: null, isInitialized: false }))
-  //   }
-  // }, [dispatch])
-
   const initialize = useCallback(async () => {
     try {
       const token = storageAvailable ? localStorage.getItem(LOCAL_STORAGE.TOKEN) : ''
@@ -116,13 +97,26 @@ export const AuthProvider: FC<AuthProviderProps> = ({ children }) => {
   const login = useCallback(
     async (credentials: { email: string; password: string; name?: string; token?: string }) => {
       const { email, password } = credentials
-      const res = await loginCall({
+
+      if (error) {
+        snack(error || RESPONSE.error.INVALID_CREDENTIAL)
+        dispatch(setCredential({ isAuthenticated: false, ...(credentials || {}) }))
+        throw new Error(RESPONSE.error.INVALID_CREDENTIAL)
+      }
+
+      const res = (await loginCall({
         email,
         password
-      }).unwrap()
+      }).unwrap()) as any
 
-      dispatch(setCredential({ isAuthenticated: true, ...(res || {}) }))
-      // setIsAuthenticated(true)
+      if (res && res.success && res.user) {
+        snack(RESPONSE.success.LOGIN, { variant: COLOR.SUCCESS })
+        dispatch(setCredential({ isAuthenticated: true, ...res }))
+      } else {
+        snack(RESPONSE.error.LOGIN_UNABLE, { variant: COLOR.ERROR })
+        dispatch(setCredential({ isAuthenticated: false, ...(res || {}) }))
+        throw new Error(RESPONSE.error.INVALID_CREDENTIAL)
+      }
     },
     [dispatch]
   )

src/component/navbar/account-popover.tsx

@@ -3,6 +3,7 @@ import { useNavigate, Link as RouterLink } from 'react-router-dom'
 import { alpha, useTheme } from '@mui/material/styles'
 import { Box, Divider, Dialog, Typography, Stack, MenuItem, Link } from '@mui/material'
 import { useAuthContext } from 'auth'
+import { useSnackbar } from 'hook/use-snack'
 import { DefaultAvatar, Avatar } from 'component/avatar'
 import { MenuPopover } from 'component/menu-popover'
 import { MotionButton } from 'component/motion'
@@ -22,7 +23,7 @@ export default function AccountPopover({ user }: { user: any }) {
   const email = user?.email
   const displayName = user?.firstname + ' ' + user?.lastname
 
-  //   const { enqueueSnackbar } = useSnackbar()
+  const { enqueueSnackbar: snack } = useSnackbar()
 
   const { themeMode, themeStretch, themeContrast, onResetSetting } = useSettingContext()
 
@@ -39,8 +40,10 @@ export default function AccountPopover({ user }: { user: any }) {
       if (logout) {
         logout()
       }
+      snack('Logout Successful')
       handleClosePopover()
     } catch (error) {
+      snack('Unable to logout', { variant: 'error' })
       console.error(error)
       //   enqueueSnackbar('Unable to logout', { variant: 'error' })
     }

src/config/icon-directory.ts

@@ -20,8 +20,11 @@ function _getWebIcon(icon: string) {
 const ICON_WEB = {
   ALERT_OUTLINE: _getWebIcon('alert-triangle-outline'),
   ARROW_FORWARD: _getWebIcon('arrow-ios-forward'),
+  CHEVRON_RIGHT: _getWebIcon('chevron-right-outline'),
   CLOSE: _getWebIcon('close-fill'),
+  CHECKMARK_CIRCLE: _getWebIcon('checkmark-circle-outline'),
   CONTRAST_BOX: _getWebIcon('contrast-box'),
+  ERROR_OUTLINE: _getWebIcon('alert-circle-outline'),
   ERROR: _getWebIcon('alert-circle'),
   INFO: _getWebIcon('info'),
 
@@ -63,9 +66,12 @@ export enum ICON_WEB_NAME {
   // @web
   ALERT_OUTLINE = 'ALERT_OUTLINE',
   ARROW_FORWARD = 'ARROW_FORWARD',
+  CHECKMARK_CIRCLE = 'CHECKMARK_CIRCLE',
+  CHEVRON_RIGHT = 'CHEVRON_RIGHT',
   CLOSE = 'CLOSE',
   CONTRAST_BOX = 'CONTRAST_BOX',
   ERROR = 'ERROR',
+  ERROR_OUTLINE = 'ERROR_OUTLINE',
   EYE_OFF = 'EYE_OFF',
   EYE_HIDE = 'EYE_HIDE',
   INFO = 'INFO',

src/constant/response.ts

@@ -57,6 +57,7 @@ const RESPONSE = {
     INVALID_TOKEN: 'Invalid token',
     NOT_OWNER: (user: string, course: string) => `User ${user} is unauthorized to update course ${course}`,
     ROLE_NOT_ALLOWED: (data: string) => `Current role ${data} is unauthorized to access this route`,
+    LOGIN_UNABLE: 'Unable to login',
     parseErr: (err: any) => `Error parsing JSON: ${err}`,
     NotInstance: 'This class cannot be instantiated',
     PASSWORD_MATCH: 'Passwords do not match',

src/constant/size.ts

@@ -1,15 +1,15 @@
 export enum SIZE {
   SMALL = 'small',
   MEDIUM = 'medium',
-  LARGE = 'large',
+  LARGE = 'large'
 }
 
 type SizeMapType = 'small' | 'medium' | 'large'
 
 export const SIZE_MAP: Record<SizeMapType, string> = {
   [SIZE.SMALL]: 'small',
   [SIZE.MEDIUM]: 'medium',
-  [SIZE.LARGE]: 'large',
+  [SIZE.LARGE]: 'large'
 }
 
 export type SizeType = {
@@ -25,5 +25,5 @@ export const SIZE_TYPE: SizeType = {
   sm: 'sm',
   md: 'md',
   lg: 'lg',
-  xl: 'xl',
+  xl: 'xl'
 }

src/hook/index.ts

@@ -1,3 +1,4 @@
+export { default as useLocalStorage } from './use-local-storage'
+export * from './use-snack'
 export { useResponsive } from './use-responsive'
 export * from './use-icon'
-export { default as useLocalStorage } from './use-local-storage'

src/hook/use-snack/index.ts

@@ -0,0 +1,3 @@
+export * from 'notistack'
+export { enqueueSnackbar as snack } from 'notistack'
+export { default as SnackProvider } from './use-snack'

src/hook/use-snack/style.tsx

@@ -0,0 +1,42 @@
+import { m } from 'framer-motion'
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { MaterialDesignContent } from 'notistack'
+
+export const SSnackContent = styled(MaterialDesignContent)(({ theme }) => ({
+  '&.notistack-MuiContent': {
+    backgroundColor: theme.palette.common.white,
+    display: 'flex',
+    flexDirection: 'row',
+    objectFit: 'cover',
+    justifyContent: 'space-evenly',
+    fontSize: theme.typography.overline.fontSize,
+    color: theme.palette.common.black,
+    padding: theme.spacing(2)
+  },
+  '&.notistack-MuiContent-error': {
+    backgroundColor: theme.palette.error.dark,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    color: theme.palette.common.white,
+    padding: 0
+  },
+  '&.notistack-MuiContent-success': {
+    flexDirection: 'row',
+    padding: 0
+  },
+  '&.notistack-MuiContent-warning': {
+    backgroundColor: theme.palette.common.white,
+    flexDirection: 'row',
+    padding: 0
+  }
+}))
+
+export const SSnackIconMDiv = styled(Box)(({ theme, color }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: theme.palette.grey[500],
+  width: 30,
+  height: 30
+}))