implemented logout

src/layouts/DashboardLayout/DashboardAuth.tsx

@@ -1,11 +1,52 @@
 
+import {useState, useEffect} from 'react'
 import DashboardLayout from "./DashboardLayout";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { RouteHandler } from '../../router/routes';
+import { updateUserDetails } from '../../store/UserDetails';
+
+import Logo from '../../assets/images/logo.png'
 
 export default function DashboardAuth() {
+
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+
+  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+
+  const [loading, setLoading] = useState(true)
+
+  useEffect(()=>{
+    let token = localStorage.getItem('token')
+    if(!token){
+      navigate(RouteHandler.letsGetStarted, {replace:true})
+      return
+    }
+    const getUserByToken = () => {
+      let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
+      setTimeout(()=>{
+        setLoading(false)
+        dispatch(updateUserDetails({...data}));
+      },4000)
+    }
+    if(!Object.keys(userDetails).length){
+      getUserByToken()
+    }
+  },[])
+
   return (
-  <DashboardLayout>
-    <Outlet />
-  </DashboardLayout>
+    <>
+    {loading && !Object.keys(userDetails).length ?
+      <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
+        <img className='animate-pulse' src={Logo} alt='Logo' />
+        <p className='animate-pulse'>loading...</p>
+      </div>
+    :
+      <DashboardLayout>
+        <Outlet />
+      </DashboardLayout>
+    }
+    </>
   )
 }

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -35,6 +35,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   // });
 
   const logoutUser = () => {
+    localStorage.clear()
     navigate(RouteHandler.letsGetStarted, {replace:true})
   }