feat: add LogoutPage

src/features/auth/authSlice.ts

@@ -16,7 +16,7 @@ export const authSlice = createSlice({
     reducers: {
         load: (_state) => {
             const token = localStorage.getItem("token");
-            return { ...initialState, token: token };
+            return { token: token };
         },
     },
     extraReducers: (builder) => {
@@ -26,18 +26,18 @@ export const authSlice = createSlice({
                 console.log(action);
                 const { token } = action.payload.body;
                 localStorage.setItem("token", token);
-                return { profile: null, token: token };
+                return { token: token };
             })
             .addMatcher(userApi.endpoints.logout.matchFulfilled, (_state, _action) => {
                 // Logout Success
                 localStorage.removeItem("token");
-                return initialState;
+                return { token: null };
             })
             .addMatcher(userApi.endpoints.login.matchRejected, (_state, action) => {
                 // Login Failed
                 console.error("Login Failed", action.payload);
                 localStorage.removeItem("token");
-                return initialState;
+                return { token: null };
             });
     },
 });

src/pages/HomePage.tsx

@@ -1,13 +1,9 @@
-import { Heading, Link } from "@chakra-ui/react";
-import { Link as ReactRouterLink } from "react-router-dom";
+import { Heading } from "@chakra-ui/react";
 
 export default function HomePage() {
     return (
         <>
             <Heading>Hello World!</Heading>
-            <Link as={ReactRouterLink} to="/test/protected">
-                test protected middleware
-            </Link>
         </>
     );
 }

src/pages/LogoutPage.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box, Heading, Text } from "@chakra-ui/react";
+import { RepeatClockIcon } from "@chakra-ui/icons";
+import { useLogoutMutation } from "../app/services/user";
+
+export default function LogoutPage() {
+    const navigate = useNavigate();
+    const [logout, { isUninitialized, isLoading }] = useLogoutMutation();
+
+    useEffect(() => void logout(), [logout]);
+    useEffect(() => {
+        if (isUninitialized || isLoading) return;
+        const timer = setTimeout(() => {
+            navigate("/");
+        }, 1500);
+        return () => clearTimeout(timer);
+    }, [isLoading, isUninitialized, navigate]);
+
+    return (
+        <Box textAlign="center" py={10} px={6}>
+            <RepeatClockIcon boxSize={"50px"} color={"green"} />
+            <Heading as="h2" size="lg" mt={6} mb={2}>
+                Success
+            </Heading>
+            <Text color={"gray.500"}>See you next time! You will be redirected to the home page in a few seconds.</Text>
+        </Box>
+    );
+}

src/routes.tsx

@@ -3,10 +3,11 @@ import type { RouteObject } from "react-router-dom";
 
 import { Root } from "./pages/Root";
 import { ErrorPage } from "./pages/ErrorPage";
-import { RequireAuth } from "./components/RequireAuth";
+// import { RequireAuth } from "./components/RequireAuth";
 
 const HomePage = lazy(() => import("./pages/HomePage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
+const LogoutPage = lazy(() => import("./pages/LogoutPage"));
 
 export const router: RouteObject[] = [
     {
@@ -14,12 +15,21 @@ export const router: RouteObject[] = [
         element: <Root />,
         errorElement: <ErrorPage />,
         children: [
-            { index: true, element: <HomePage /> },
-            { path: "home", element: <HomePage /> },
-            { path: "login", element: <LoginPage /> },
             {
-                path: "/test",
-                children: [{ path: "protected", element: <RequireAuth>Protected</RequireAuth> }],
+                index: true,
+                element: <HomePage />,
+            },
+            {
+                path: "home",
+                element: <HomePage />,
+            },
+            {
+                path: "login",
+                element: <LoginPage />,
+            },
+            {
+                path: "logout",
+                element: <LogoutPage />,
             },
         ],
     },