From 6bd5f9ea909cc83b79f373125b06dde8607490e1 Mon Sep 17 00:00:00 2001
From: Viliam Geffert <60324080+vgeffer@users.noreply.github.com>
Date: Sun, 10 Dec 2023 13:30:18 +0100
Subject: [PATCH] feat(admin): added redirect to main page (#301)

* feat(admin): added redirect to main page

* feat(admin): changed logout behaviour

* feat(admin): changed toolbar

* feat(admin): removed react fragment form component

* feat(admin): removed redundant code
---
 src/components/Admin/Admin.tsx          |  3 +-
 src/components/Admin/AdminLayout.tsx    | 37 +++++++++++++++++++++++++
 src/components/Admin/useAuthProvider.ts |  9 ++++--
 src/utils/AuthContainer.tsx             |  4 +--
 4 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Admin/AdminLayout.tsx

diff --git a/src/components/Admin/Admin.tsx b/src/components/Admin/Admin.tsx
index 1f4868a0..1f1daac1 100644
--- a/src/components/Admin/Admin.tsx
+++ b/src/components/Admin/Admin.tsx
@@ -1,6 +1,7 @@
 import {FC} from 'react'
 import {Admin as ReactAdmin, Resource} from 'react-admin'
 
+import {AdminLayout} from './AdminLayout'
 import {dataProvider} from './dataProvider'
 import {FlatpageCreate} from './resources/base/flat-page/FlatpageCreate'
 import {FlatpageEdit} from './resources/base/flat-page/FlatpageEdit'
@@ -31,7 +32,7 @@ export const Admin: FC = () => {
   const authProvider = useAuthProvider()
 
   return (
-    <ReactAdmin authProvider={authProvider} dataProvider={dataProvider}>
+    <ReactAdmin authProvider={authProvider} dataProvider={dataProvider} layout={AdminLayout}>
       <Resource name="cms/post" list={PostList} edit={PostEdit} show={PostShow} create={PostCreate} />
       <Resource
         name="base/flat-page"
diff --git a/src/components/Admin/AdminLayout.tsx b/src/components/Admin/AdminLayout.tsx
new file mode 100644
index 00000000..f3e181cf
--- /dev/null
+++ b/src/components/Admin/AdminLayout.tsx
@@ -0,0 +1,37 @@
+import {Home, Logout} from '@mui/icons-material/'
+import {Button, Stack, Typography} from '@mui/material'
+import {useRouter} from 'next/router'
+import {AppBar, Layout, LayoutProps, useLogout} from 'react-admin'
+
+const AppMenuBar = () => {
+  const router = useRouter()
+  const logout = useLogout()
+
+  return (
+    <AppBar
+      userMenu={false}
+      position="relative"
+      toolbar={
+        <Stack gap={2} direction="row">
+          <Button color="inherit" onClick={() => router.push('/')}>
+            <Stack gap={1} direction="row">
+              <Home />
+              <Typography variant="body1">Späť na hlavnú stránku</Typography>
+            </Stack>
+          </Button>
+
+          <Button color="inherit" onClick={() => logout()}>
+            <Stack gap={1} direction="row">
+              <Logout />
+              <Typography variant="body1">Odhlásiť</Typography>
+            </Stack>
+          </Button>
+        </Stack>
+      }
+    />
+  )
+}
+
+export const AdminLayout = (props: LayoutProps) => {
+  return <Layout {...props} appBar={AppMenuBar} />
+}
diff --git a/src/components/Admin/useAuthProvider.ts b/src/components/Admin/useAuthProvider.ts
index 5baae774..bf76dc73 100644
--- a/src/components/Admin/useAuthProvider.ts
+++ b/src/components/Admin/useAuthProvider.ts
@@ -1,13 +1,18 @@
+import {useRouter} from 'next/router'
 import {AuthProvider, HttpError} from 'react-admin'
 
 import {AuthContainer, testAuth, testAuthRequest} from '@/utils/AuthContainer'
 
 export const useAuthProvider = () => {
-  const {loginAsync, logout} = AuthContainer.useContainer()
+  const {loginAsync, logoutAsync} = AuthContainer.useContainer()
+  const router = useRouter()
 
   const authProvider: AuthProvider = {
     login: async ({username, password}) => loginAsync({data: {email: username, password}}),
-    logout: async () => logout(),
+    logout: async () => {
+      await logoutAsync()
+      router.push('/')
+    },
     checkAuth: async () => {
       await testAuthRequest()
     },
diff --git a/src/utils/AuthContainer.tsx b/src/utils/AuthContainer.tsx
index 9cc9b688..a5d52dcf 100644
--- a/src/utils/AuthContainer.tsx
+++ b/src/utils/AuthContainer.tsx
@@ -98,7 +98,7 @@ const useAuth = () => {
   })
 
   // zavoláme logout API point, ktorý zmaže token na BE a odstráni sessionid cookie.
-  const {mutate: logout} = useMutation({
+  const {mutate: logout, mutateAsync: logoutAsync} = useMutation({
     mutationFn: () => axios.post('/api/user/logout'),
     onSettled: () => {
       setIsAuthed(false)
@@ -134,7 +134,7 @@ const useAuth = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthed])
 
-  return {isAuthed, login, logout, /* for react admin - this one can throw */ loginAsync}
+  return {isAuthed, login, logout, /* for react admin - this one can throw */ loginAsync, logoutAsync}
 }
 
 export const AuthContainer = createContainer(useAuth)