auth guard changes

src/app/(dashboard)/layout.tsx

@@ -1,10 +1,14 @@
+"use client"
 import DashboardWrapper from "@/components/wrapper/dashboardWrapper";
+import AuthGuard from "@/hoc/authGuard/authGuard";
 
 interface RootLayoutProps {
   children: React.ReactNode;
 }
 
-export default function RootLayout(props: RootLayoutProps): JSX.Element {
+function RootLayout(props: RootLayoutProps): JSX.Element {
   const { children } = props;
   return <DashboardWrapper>{children}</DashboardWrapper>;
 }
+
+export default AuthGuard(RootLayout);

src/components/wrapper/dashboardWrapper.tsx

@@ -1,5 +1,4 @@
 "use client"; // This ensures the file is a client component
-
 import * as React from "react";
 import AppBar, { AppBarProps } from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
@@ -12,7 +11,6 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import MailIcon from "@mui/icons-material/Mail";
 import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
@@ -22,6 +20,7 @@ import styles from "./DashboardWrapper.module.scss";
 import styled from "@emotion/styled";
 import { BUILDING, GEAR } from "@/utilities/svgConstant";
 import LogoutIcon from "@mui/icons-material/Logout";
+import { useRouter } from "next/navigation";
 
 const drawerWidth = 260;
 
@@ -75,7 +74,7 @@ export default function DashboardWrapper(props: Props) {
   const { children: Children } = props;
   const [mobileOpen, setMobileOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
-
+  const router = useRouter()
   const handleDrawerClose = () => {
     setIsClosing(true);
     setMobileOpen(false);
@@ -125,6 +124,12 @@ export default function DashboardWrapper(props: Props) {
   const container =
     window !== undefined ? () => window().document.body : undefined;
 
+  const logoutHandler = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    router.push('/log-in');
+  }
+
   return (
     <Box
       sx={{ display: "flex" }}
@@ -178,15 +183,8 @@ export default function DashboardWrapper(props: Props) {
                 alt="Remy Sharp"
                 src="/static/images/avatar/1.jpg"
               />
-              {/* <GEAR
-                sx={{
-                  color: "var(--primary_Active_text)",
-                  fontSize: "1.8rem",
-                  cursor: "pointer",
-                }}
-              /> */}
               <IconButton aria-label="log out" size="medium" color="error">
-                <LogoutIcon fontSize="small" />
+                <LogoutIcon fontSize="small" onClick={logoutHandler} />
               </IconButton>
             </Box>
           </Box>

src/hoc/authGuard/authGuard.tsx

@@ -0,0 +1,31 @@
+"use client"
+// hoc/withAuth.tsx
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+const AuthGuard = (WrappedComponent: any) => {
+  const AuthGuardComponent = (props: any) => {
+    const router = useRouter();
+
+    useEffect(() => {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        router.push('/log-in');
+      }
+    }, [router]);
+
+    return <WrappedComponent {...props} />;
+  };
+
+  // Set display name for the component
+  AuthGuardComponent.displayName = `AuthGuard(${getDisplayName(WrappedComponent)})`;
+
+  return AuthGuardComponent;
+};
+
+export default AuthGuard;
+
+// Helper function to get the display name of a component
+function getDisplayName(WrappedComponent: any) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}