From b9b62bb034689a736edaecf6b0ba5a86d4e7f3c1 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Tue, 11 Feb 2025 16:10:48 +0530
Subject: [PATCH] udpate

---
 src/App.tsx                   | 50 ++++++++++++++++++++++++++---------
 src/Layouts/DefaultLayout.tsx | 22 ++++++++++++---
 src/index.css                 | 14 ++++++++++
 3 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b9302aa..a4eae2f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,47 @@
-import { useContext } from 'react';
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
-import GlobalStateContext from './Contexts/GlobalStateContext';
-import DefaultLayout from './Layouts/DefaultLayout';
-import Login from './Pages/Login';
-import { RouteLink } from './Routes/Routes';
+import { useContext, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import GlobalStateContext from "./Contexts/GlobalStateContext";
+import DefaultLayout from "./Layouts/DefaultLayout";
+import Login from "./Pages/Login";
+import { RouteLink } from "./Routes/Routes";
 
-function App() { 
+function App() {   
   const context = useContext(GlobalStateContext); 
-  if (!context) throw new Error('App must be used within a GlobalStateProvider'); 
-  const { isAuthenticate } = context; 
+  if (!context) throw new Error("App must be used within a GlobalStateProvider"); 
+  
+  const { isAuthenticate, setIsAuthenticate } = context; 
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    setIsAuthenticate(!!token); // Converts token to boolean
+  }, [setIsAuthenticate]);
+
+  console.log("Auth Status:", isAuthenticate);
 
   return ( 
     <Router> 
       <Routes> 
-        <Route path="/login" element={<Login />} /> 
-        <Route path="/*" element={localStorage.getItem("token")? (<DefaultLayout><Routes>{RouteLink.map(({ path, Component }, index) => (<Route key={index} path={path} element={<Component />} />))}</Routes></DefaultLayout>) : (<Login />)} /> 
-        <Route path="*" element={<Login />} /> 
+        {/* Redirect logged-in users away from login */}
+        <Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} /> 
+
+        {/* Protected Routes */}
+        <Route 
+          path="/*" 
+          element={isAuthenticate && localStorage.getItem("token")  ? (
+            <DefaultLayout>
+              <Routes>
+                {RouteLink.map(({ path, Component }, index) => (
+                  <Route key={index} path={path} element={<Component />} />
+                ))}
+              </Routes>
+            </DefaultLayout>
+          ) : (
+            <Navigate to="/login" />
+          )} 
+        /> 
+
+        {/* Catch-all route to prevent unauthorized access */}
+        <Route path="*" element={<Navigate to="/login" />} /> 
       </Routes> 
     </Router> 
   ); 
diff --git a/src/Layouts/DefaultLayout.tsx b/src/Layouts/DefaultLayout.tsx
index 2e63eae..1cf5b32 100644
--- a/src/Layouts/DefaultLayout.tsx
+++ b/src/Layouts/DefaultLayout.tsx
@@ -1,5 +1,5 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { RiNotificationLine } from "react-icons/ri";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { nav } from "../Routes/Nav";
@@ -9,15 +9,29 @@ import { Avatar } from "../components/ui/avatar";
 import { LuLogOut } from "react-icons/lu";
 import { logout, setToken } from "../Redux/Service/authSlice";
 import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
 
 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
+
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const location = useLocation()
 
 
+  const context = useContext(GlobalStateContext);
+  if (!context) {
+    throw new Error('App must be used within a GlobalStateProvider');
+  }
+  const { setIsAuthenticate } = context;
 
 
+  // Logout function
+  const handleLogout = () => {
+    dispatch(logout())
+    localStorage.removeItem("token"); // Clear token
+    setIsAuthenticate(false); // Update state
+  };
+
   return (
     <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
     
@@ -27,8 +41,8 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
         </HStack>
         <VStack  w={'100%'} p={4} pt={0}>
           {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
-            <NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
+            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
               <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
                 <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                 {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
@@ -37,7 +51,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
         </VStack>
 
         <VStack w={'100%'} p={3} pt={0}>
-        <HStack onClick={()=>{dispatch(logout()), navigate('/login')}} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
+        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
         </VStack>
       </VStack>
 
diff --git a/src/index.css b/src/index.css
index 521b87f..862601a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,12 +14,26 @@ body {
   margin: 0;
   padding: 0;
   font-family: "Roboto", serif;
+  background-color: #fff;
 }
 
 .Oxygen {
   font-family: "Oxygen", serif
 }
 
+/* Change text selection color */
+::selection {
+  background-color: #02A0A0; /* Yellow */
+  color: #fff; /* Black */
+}
+
+/* For Firefox */
+::-moz-selection {
+  background-color: #02A0A0;
+  color: #fff;
+}
+
+
 
 .active {
   background-color: #02A0A0 !important;