Fix performance issue with SerializableStateInvariantMiddleware

src/app.tsx

@@ -24,11 +24,9 @@ function App() {
           <BrowserRouter>
             <SettingProvider>
               <SnackProvider>
-                <AppNavBar />
                 <ErrorBoundary fallback={<Fallback fallbackTitle={FALLBACK.BAD_REQUEST.MESSAGE} errorCode={FALLBACK.BAD_REQUEST.CODE} />}>
                   <Router />
                 </ErrorBoundary>
-                <AppFooter />
               </SnackProvider>
             </SettingProvider>
           </BrowserRouter>

src/auth/utility.ts

@@ -56,7 +56,6 @@ export const setSession = (token: string | null) => {
     localStorage.setItem(LOCAL_STORAGE.TOKEN, token)
 
     axios.defaults.headers.common.Authorization = `${token}`
-    console.log(axios.defaults.headers.common.Authorization, 'axios.defaults.headers.common.Authorization')
     const { exp } = jwtDecode(token)
     tokenExpired(exp)
   } else {

src/component/button/back/back.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect, useRef, Fragment, MouseEvent } from 'react'
+import { m } from 'framer-motion'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { ICON_NAME, useIcon } from 'hook'
+import { useSettingContext } from 'component/setting'
+import { Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { KEY, LABEL, TYPOGRAPHY, VARIANT } from 'constant'
+import { SPopover, SBackIconButton } from 'component/button'
+
+const BackButton = () => {
+  const [open, setOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<EventTarget | null>(null)
+
+  const { themeMode } = useSettingContext()
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const navRef = useRef(null)
+  const theme = useTheme()
+
+  const { Icon, iconSrc: backIconSrc } = useIcon(ICON_NAME.BACK)
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+    navigate(-1)
+  }
+
+  useEffect(() => {
+    if (open) {
+      handleClose()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  useEffect(() => {
+    const appBarEl = Array.from(document.querySelectorAll('.MuiAppBar-root')) as HTMLElement[]
+
+    const styles = () => {
+      document.body.style.overflow = ''
+      document.body.style.padding = ''
+
+      appBarEl.forEach((elem) => {
+        elem.style.padding = ''
+      })
+    }
+
+    if (open) {
+      styles()
+    } else {
+      styles()
+    }
+  }, [open])
+
+  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <Fragment>
+      <SBackIconButton onClick={handleClick} aria-label={LABEL.GO_BACK} onMouseEnter={handleOpen} onMouseLeave={handleClose}>
+        <Icon icon={backIconSrc} width={50} />
+      </SBackIconButton>
+      <SPopover
+        open={open}
+        anchorEl={anchorEl as Element}
+        anchorOrigin={{ vertical: KEY.CENTER, horizontal: KEY.RIGHT }}
+        transformOrigin={{ vertical: KEY.CENTER, horizontal: KEY.LEFT }}
+        sx={{
+          marginLeft: 3
+        }}>
+        <m.div>
+          <Typography variant={TYPOGRAPHY.BODY1} color={themeMode === KEY.LIGHT ? theme.palette.grey[700] : theme.palette.grey[400]}>
+            {LABEL.GO_BACK}
+          </Typography>
+        </m.div>
+      </SPopover>
+    </Fragment>
+  )
+}
+
+export default BackButton

src/component/button/back/index.ts

@@ -0,0 +1 @@
+export { default as BackButton } from './back'

src/component/button/index.ts

@@ -1,2 +1,4 @@
 export { default as Button } from './button'
+export { default as BackButton } from './back/back'
 export { default as AnimatedButton } from './button-animated'
+export * from './style'

src/component/button/style.tsx

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles'
+import { Popover, IconButton } from '@mui/material'
+
+export const SPopover = styled(Popover)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    size: '100%',
+    overflow: 'hidden',
+    borderRadius: 0
+  },
+  '& .MuiPopover-paper': {
+    overflow: 'hidden'
+  },
+  '& .MuiPopover-paper .MuiList-root': {
+    padding: '0px'
+  },
+  '& .MuiPopover-paper .MuiTypography-root': {
+    fontSize: '1rem'
+  },
+  boxShadow: 'none',
+  pointerEvents: 'none'
+}))
+
+export const SBackIconButton = styled(IconButton)(({ theme }) => ({
+  borderRadius: 2,
+  padding: 1,
+  marginBottom: 2
+}))

src/component/index.ts

@@ -10,6 +10,7 @@ export { default as Paper } from './paper/paper'
 export { default as Snackbar } from './snackbar/snackbar'
 // button
 export { default as Button } from './button/button'
+export { default as BackButton } from './button/back/back'
 //  typography
 export { default as Typography } from './typography/typography'
 // markdown

src/component/navbar/index.ts

@@ -1,5 +1,6 @@
 export { default as Navbar } from './navbar'
-export { default as AppNavBar } from './appbar'
+export { default as AppBar } from './appbar'
+export { default as AppNavBar } from './app-appbar'
 export { default as AppFooter } from './footer'
 export { default as NavDrawer } from './nav-drawer'
 export { default as AccountPopover } from './account-popover'

src/component/navbar/nav-drawer.tsx

@@ -24,7 +24,7 @@ const NavDrawer = ({ open, onClose }: NavDrawerProps) => {
               sx={{ pl: 0.5 }}
             />
             <SListItem>
-              <Link to='/find-bootcamp-by-course' style={{ textDecoration: 'none', color: 'inherit' }}>
+              <Link to='/bootcamp/all' style={{ textDecoration: 'none', color: 'inherit' }}>
                 <ListItemText primary={<Typography variant='subtitle2'>Find a Bootcamp</Typography>} />
               </Link>
             </SListItem>
@@ -53,7 +53,7 @@ const NavDrawer = ({ open, onClose }: NavDrawerProps) => {
               </Link>
             </SListItem>
             <SListItem>
-              <Link to='/course' style={{ textDecoration: 'none', color: 'inherit' }}>
+              <Link to='/course/all' style={{ textDecoration: 'none', color: 'inherit' }}>
                 <ListItemText primary={<Typography variant='subtitle2'>Find a Course</Typography>} />
               </Link>
             </SListItem>

src/config/icon-directory.ts

@@ -20,21 +20,28 @@ function _getWebIcon(icon: string) {
 const ICON_WEB = {
   ALERT_OUTLINE: _getWebIcon('alert-triangle-outline'),
   ARROW_FORWARD: _getWebIcon('arrow-ios-forward'),
+  BACK: _getWebIcon('arrow-ios-back-outline'),
   CHEVRON_RIGHT: _getWebIcon('chevron-right-outline'),
   CHEVRON_DOWN: _getWebIcon('chevron-down-outline'),
   CLOSE: _getWebIcon('close-fill'),
   CHECKMARK_CIRCLE: _getWebIcon('checkmark-circle-outline'),
+  CHECK_OUTLINE: _getWebIcon('checkmark-outline'),
+  CLOSE_OUTLINE: _getWebIcon('close-outline'),
   CONTRAST_BOX: _getWebIcon('contrast-box'),
   EDIT: _getWebIcon('edit-2-outline'),
   ERROR_OUTLINE: _getWebIcon('alert-circle-outline'),
   ERROR: _getWebIcon('alert-circle'),
+  PLUS: _getWebIcon('plus-outline'),
+  RETRACT: _getWebIcon('minus-outline'),
   INFO: _getWebIcon('info'),
 
   EYE_OFF: _getWebIcon('eye-off-outline'),
   EYE_HIDE: _getWebIcon('eye-outline'),
 
   FULLSCREEN: _getWebIcon('fullscreen'),
   FULLSCREEN_EXIT: _getWebIcon('fullscreen-exit'),
+  GLOBE: _getWebIcon('globe-2-outline'),
+  PHONE: _getWebIcon('phone-outline'),
   REFRESH: _getWebIcon('refresh'),
 
   MODE_LIGHT: _getWebIcon('sun'),
@@ -69,7 +76,10 @@ export enum ICON_WEB_NAME {
   // @web
   ALERT_OUTLINE = 'ALERT_OUTLINE',
   ARROW_FORWARD = 'ARROW_FORWARD',
+  BACK = 'BACK',
   CHECKMARK_CIRCLE = 'CHECKMARK_CIRCLE',
+  CHECK_OUTLINE = 'CHECK_OUTLINE',
+  CLOSE_OUTLINE = 'CLOSE_OUTLINE',
   CHEVRON_RIGHT = 'CHEVRON_RIGHT',
   CHEVRON_DOWN = 'CHEVRON_DOWN',
   CLOSE = 'CLOSE',
@@ -80,12 +90,15 @@ export enum ICON_WEB_NAME {
   EYE_OFF = 'EYE_OFF',
   EYE_HIDE = 'EYE_HIDE',
   INFO = 'INFO',
-
+  PHONE = 'PHONE',
+  GLOBE = 'GLOBE',
   MODE_LIGHT = 'MODE_LIGHT',
   MODE_DARK = 'MODE_DARK',
 
   FULLSCREEN = 'FULLSCREEN',
   FULLSCREEN_EXIT = 'FULLSCREEN_EXIT',
+  PLUS = 'PLUS',
+  RETRACT = 'RETRACT',
   REFRESH = 'REFRESH',
 
   SAVE = 'SAVE',

src/config/layout.ts

@@ -1,3 +1,31 @@
+/**
+ * Layout configuration for the application
+ *
+ * Dimensions are in pixels
+ *
+ */
+export const HEADER = {
+  H_MOBILE: 64,
+  H_MAIN_DESKTOP: 88,
+  H_DASHBOARD_DESKTOP: 65,
+  H_DASHBOARD_DESKTOP_OFFSET: 92 - 32
+}
+
+export const FOOTER = {
+  H: 64
+}
+
+export const SPACING = {
+  XS: 4,
+  SM: 8,
+  MD: 16,
+  LG: 24,
+  XL: 32,
+  XXL: 40,
+  XXXL: 48,
+  DESKTOP: 80
+}
+
 export const NAV = {
   W_BASE: 260,
   W_DASHBOARD: 300,

src/constant/aria.ts

@@ -5,7 +5,8 @@ enum ARIA {
   LAST_NAME = 'Last name',
   TOGGLE_PASSWORD = 'toggle password visibility',
   TABS = 'tabs',
-  COMPANY_BADGE = 'company badge'
+  COMPANY_BADGE = 'company badge',
+  COURSE_TABLE = 'course table'
 }
 
 export default ARIA

src/constant/index.ts

@@ -12,7 +12,6 @@ export { default as MENU_POPOVER_ARROW } from './menu-popover-arrow'
 export { default as TITLE } from './title'
 export { default as ARIA } from './aria'
 export { BUTTON } from './button'
-export * from './typography'
 export * from './size'
 export * from './color'
 export * from './component'

src/constant/label.ts

@@ -1,6 +1,7 @@
 import { KEY } from 'constant'
 
 const LABEL = {
+  GO_BACK: 'Go Back',
   LOG_IN: 'Log In',
   LOG_OUT: 'Log Out',
   DISPLAY_SETTINGS: 'Display Settings',
@@ -12,20 +13,31 @@ const LABEL = {
   },
   REGISTER: 'Register',
   RESET_PASSWORD: 'Reset Password',
+  COURSE_COVERED: 'Course certifications covered',
   HOME: 'Home',
-
+  LOCATION: 'Location',
+  CAREER: 'Careers',
+  CONTACT: 'Contact',
   ALREADY_MEMBER: `Already a member? `,
   NOT_A_MEMBER: `Not a member yet? `,
   LOGIN_Sub: 'Log in here ',
   REGISTER_Sub: 'Register for free',
   FORGOT_PASSWORD: 'Forgot password?',
-
+  RATING: 'Rating',
   SELECT_ROLE: 'Select your role',
-
+  WEBSITE: 'Website',
+  VISIT_WEBSITE: 'Visit Website',
   ADMIN: 'Admin',
   STUDENT: 'Student',
   TRAINER: 'Trainer',
 
+  TITLE: 'Title',
+  DESCRIPTION: 'Description',
+  DURATION: 'Duration',
+  COST: 'Cost',
+  SKILL_REQUIRED: 'Skill Required',
+  SCHOLARSHIP: 'Scholarship',
+
   BOOTCAMP_PAGE_TITLE: 'Worldclass Bootcamps Worldwide',
   COURSE_PAGE_TITLE: 'World Class Courses',
 

src/constant/placeholder.ts

@@ -14,6 +14,9 @@ enum PLACEHOLDER {
   NO_DURATION = 'No duration specified',
   NO_TUITION = 'No tuition specified',
   NO_MINIMUM_SKILL = 'No minimum skill required',
+  NO_COURSE_AVAILABLE = 'No course available',
+  NO_LOCATION = 'No location provided',
+  NO_CAREER = 'No career provided',
 
   // @bootcamp search form
   MILES_FROM = 'Miles From',

src/constant/routing/routing.ts

@@ -1,6 +1,8 @@
 enum ROUTING {
   ROOT = '/',
+  ALL = 'all',
   ID = ':id',
+  VIEW = 'view',
   DASHBOARD = 'dashboard',
   // :bootcamp
   BOOTCAMP = 'bootcamp',