From 3862aa4e2276245947fb854deeb9ba5a6b131745 Mon Sep 17 00:00:00 2001
From: Sam Liu <luu.dat.tham@gmail.com>
Date: Thu, 13 Jun 2024 04:29:58 +0000
Subject: [PATCH] Update 404 page

---
 frontend/src/components/Header.jsx        | 12 ++++++----
 frontend/src/components/Navbar/Navbar.jsx | 16 +++++++------
 frontend/src/components/Navbar/index.js   |  1 +
 frontend/src/hooks/useAuth.js             |  2 +-
 frontend/src/index.jsx                    | 16 +++++++------
 frontend/src/pages/Home.jsx               | 15 ++++++++++--
 frontend/src/pages/NotFound.jsx           |  3 ---
 frontend/src/pages/NotFound/NotFound.jsx  | 25 +++++++++++++++++++
 frontend/src/pages/NotFound/index.js      |  1 +
 frontend/src/routes/routes.js             | 29 +++++++++++------------
 10 files changed, 80 insertions(+), 40 deletions(-)
 delete mode 100644 frontend/src/pages/NotFound.jsx
 create mode 100644 frontend/src/pages/NotFound/NotFound.jsx
 create mode 100644 frontend/src/pages/NotFound/index.js

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 50df9d0..53ff432 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -49,12 +49,14 @@ export default function Header() {
       </div>
       <Show when={store.auth}>
         <div class="flex items-center justify-end">
-          <div class="avatar hidden lg:block">
+          <div class="avatar">
             <div class="w-9 rounded-full">
-              <img
-                src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
-                alt="avatar"
-              />
+              <A href="/me" class="hidden lg:block">
+                <img
+                  src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
+                  alt="avatar"
+                />
+              </A>
             </div>
           </div>
           <A
diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
index 64fe85f..d0cfe8d 100644
--- a/frontend/src/components/Navbar/Navbar.jsx
+++ b/frontend/src/components/Navbar/Navbar.jsx
@@ -3,20 +3,16 @@ import useAuth from '@hooks/useAuth'
 import useLanguage from '@hooks/useLanguage'
 import { A } from '@solidjs/router'
 import { IconDashboard, IconLogout, IconTriangle } from '@tabler/icons-solidjs'
-import UserHelper from '@utils/auth'
 import { For, Show, mergeProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import './navbar.scss'
 
 const language = useLanguage()
-const userHelper = new UserHelper()
 
-console.log(userHelper.isAdmin)
-
-const NAV_ITEM = [
+export const NAV_ITEM = (admin = false) => [
   {
     path: '/dashboard',
-    show: true,
+    show: admin,
     icon: IconDashboard,
     text: language?.ui.dashboard,
   },
@@ -30,6 +26,12 @@ const NAV_ITEM = [
         icon: IconDashboard,
         text: 'Test',
         children: [
+          {
+            path: '/dashboard',
+            show: true,
+            icon: IconDashboard,
+            text: language?.ui.dashboard,
+          },
           {
             path: '/test',
             show: true,
@@ -142,7 +144,7 @@ export default function Navbar() {
           </div>
         </Show>
         <ul class="menu w-80 text-base-content pt-3 px-3 pb-6">
-          <For each={NAV_ITEM}>
+          <For each={NAV_ITEM(store?.userInfo?.isAdmin)}>
             {(item) => {
               if (!item.show) return
               if (item.children) {
diff --git a/frontend/src/components/Navbar/index.js b/frontend/src/components/Navbar/index.js
index e6400ae..44e0194 100644
--- a/frontend/src/components/Navbar/index.js
+++ b/frontend/src/components/Navbar/index.js
@@ -1 +1,2 @@
+export * from './Navbar'
 export { default } from './Navbar'
diff --git a/frontend/src/hooks/useAuth.js b/frontend/src/hooks/useAuth.js
index 68bba11..05da760 100644
--- a/frontend/src/hooks/useAuth.js
+++ b/frontend/src/hooks/useAuth.js
@@ -26,7 +26,7 @@ export default function useAuth(setAuth) {
     await getLogout()
     Helpers.clearStorage()
     setAuth({ auth: false, user: null })
-    navigate('/login', { replace: false })
+    navigate('/login', { replace: true })
   }
 
   return {
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 73ac930..6d96415 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -14,13 +14,15 @@ render(
       <Route path="/login" component={lazy(() => import('@pages/Login'))} />
       <Route path="/" component={Layout}>
         <For each={ROUTES}>
-          {(route) => (
-            <Route
-              path={route.path}
-              component={route.components}
-              matchFilters={route.filter}
-            />
-          )}
+          {(route) =>
+            route.show && (
+              <Route
+                path={route.path}
+                component={route.components}
+                matchFilters={route.filter}
+              />
+            )
+          }
         </For>
       </Route>
       <Route path="*" component={lazy(() => import('@pages/NotFound'))} />
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index ef07ed7..fe9ebaa 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,12 +1,23 @@
+import { NAV_ITEM } from '@components/Navbar'
+import { useSiteContext } from '@context/SiteContext'
 import { useNavigate } from '@solidjs/router'
 import { onMount } from 'solid-js'
 
+function getFirstItem(array) {
+  const first = array.filter((item) => item.show)[0]
+  if (first.children) {
+    return getFirstItem(first.children)
+  }
+  return first
+}
+
 export default function Home() {
+  const { store } = useSiteContext()
   const navigate = useNavigate()
 
   onMount(() => {
-    // const first = NAV_ROUTES.filter((item) => item.show)[0]?.path || '/me'
-    navigate('/me', { replace: true })
+    const first = getFirstItem(NAV_ITEM(store?.userInfo?.isAdmin))
+    navigate(first ? first.path : '/me', { replace: true })
   })
 
   return <></>
diff --git a/frontend/src/pages/NotFound.jsx b/frontend/src/pages/NotFound.jsx
deleted file mode 100644
index 5757a78..0000000
--- a/frontend/src/pages/NotFound.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function NotFound() {
-  return <>404</>
-}
diff --git a/frontend/src/pages/NotFound/NotFound.jsx b/frontend/src/pages/NotFound/NotFound.jsx
new file mode 100644
index 0000000..8c5b210
--- /dev/null
+++ b/frontend/src/pages/NotFound/NotFound.jsx
@@ -0,0 +1,25 @@
+import { A } from '@solidjs/router'
+
+export default function NotFound() {
+  return (
+    <div class="flex items-center justify-center min-h-screen bg-fu-green  bg-fixed bg-cover bg-bottom error-bg">
+      <div class="flex flex-col items-center text-white">
+        <div class="relative text-center">
+          <h1 class="relative text-9xl tracking-tighter-less text-shadow font-sans font-bold">
+            <span>4</span>
+            <span>0</span>
+            <span>4</span>
+          </h1>
+          <span class="absolute top-0 -ml-12 font-semibold">Oops!</span>
+        </div>
+        <h5 class="font-semibold">Page not found</h5>
+        <p class="mt-2 mb-6">
+          we are sorry, but the page you requested was not found
+        </p>
+        <A href="/" class="btn btn-secondary btn-sm hover:text-white">
+          Got to Home
+        </A>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/NotFound/index.js b/frontend/src/pages/NotFound/index.js
new file mode 100644
index 0000000..2893216
--- /dev/null
+++ b/frontend/src/pages/NotFound/index.js
@@ -0,0 +1 @@
+export { default } from './NotFound'
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 6f07c67..6e91dfd 100644
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -5,25 +5,24 @@ export const ROUTES = [
     path: '/',
     components: lazy(() => import('@pages/Home')),
     filter: {},
-  },
-  {
-    path: '/dashboard',
-    components: lazy(() => import('@pages/Dashboard')),
-    filter: {},
-  },
-  {
-    path: '/profile',
-    components: lazy(() => import('@pages/Profile')),
-    filter: {},
-  },
-  {
-    path: '/ware-house',
-    components: lazy(() => import('@pages/WareHouse')),
-    filter: {},
+    show: true,
   },
   {
     path: '/me',
     components: lazy(() => import('@pages/Profile')),
     filter: {},
+    show: true,
+  },
+  {
+    path: '/dashboard',
+    components: lazy(() => import('@pages/Dashboard')),
+    filter: {},
+    show: true,
+  },
+  {
+    path: '/ware-house',
+    components: lazy(() => import('@pages/WareHouse')),
+    filter: {},
+    show: true,
   },
 ]