Revert "Solved the issue of sketchbook page takes time to load from "…

…Sorry login first" to "Sketchbook" componenent after loggin"

src/components/Banner/HomeBanner.jsx

@@ -51,7 +51,6 @@ const HomeBanner = () => {
           navigate("/sketchbook");
         },
         onError: () => {
-          updateLoggedIn(false);
           showToast({ message: "Login Failed!", type: "ERROR" });
         },
       }

src/constants/Navbar/Navbar.jsx

@@ -1,8 +1,9 @@
+import React, { useContext, useEffect, useState } from "react";
 import { useTheme } from "../../context/ThemeContext";
 import { HiMiniBars2 } from "react-icons/hi2";
 import { RxCross1 } from "react-icons/rx";
 import logo from "../../assets/logo.png";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import sunIcon from "../../assets/svg/sun.svg";
 import moonIcon from "../../assets/svg/moon.svg";
 import "./navbar.css";
@@ -11,11 +12,9 @@ import { useAppContext } from "../../context/AppContext";
 const Navbar = ({ isBarsClicked, handleBarsClick }) => {
   const { isDarkMode, toggleDarkMode } = useTheme();
   const { updateLoggedIn, isLoggedIn } = useAppContext();
-  const navigate = useNavigate();
 
   const handleLogout = () => {
     updateLoggedIn(false);
-    navigate("/login");
   };
 
   return (
@@ -33,9 +32,6 @@ const Navbar = ({ isBarsClicked, handleBarsClick }) => {
           <Link to="/" className="nav-item">
             Home
           </Link>
-          <Link to="/sketchbook" className="nav-item">
-            Sketchbook
-          </Link>
 
           <Link to="/features" className="nav-item">
             Features
@@ -51,12 +47,13 @@ const Navbar = ({ isBarsClicked, handleBarsClick }) => {
           </Link>
         </div>
         {isLoggedIn ? (
-          <button
+          <Link
+            to="/login"
             className={`nav-signup ${isDarkMode ? "dark-mode" : "white-mode"}`}
             onClick={handleLogout}
           >
             Sign Out
-          </button>
+          </Link>
         ) : (
           <Link
             to="/register"

src/context/AppContext.jsx

@@ -1,27 +1,48 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import Toast from "../constants/Notification/Toast";
+import axios from "axios";
+import { QueryClient } from "@tanstack/react-query";
 
+const queryClient = new QueryClient();
 const AppContext = createContext(undefined);
 
 const AppContextProvider = ({ children }) => {
   const [toast, setToast] = useState(undefined);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoggedIn, setLoggedIn] = useState(false);
 
-  const updateLoggedIn = async (logInState) => {
-    if (!logInState) {
+  const updateLoggedIn = async (loggedIn) => {
+    if (loggedIn) {
+      try {
+        const token = localStorage.getItem("token");
+        await queryClient.fetchQuery({
+          queryKey: ["token"],
+          queryFn: () =>
+            axios.get(
+              "https://doodlecollab-backend.onrender.com/api/users/validateToken",
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                },
+              }
+            ),
+          staleTime: 0,
+        });
+
+        setLoggedIn(true);
+      } catch (error) {
+        setLoggedIn(false);
+        localStorage.removeItem("token");
+      }
+    } else {
+      setLoggedIn(false);
       localStorage.removeItem("token");
     }
-    setIsLoggedIn(logInState);
   };
 
   const showToast = (toastMessage) => {
     setToast(toastMessage);
   };
 
-  useEffect(() => {
-    setIsLoggedIn(localStorage.getItem("token") ? true : false);
-  }, []);
-
   return (
     <AppContext.Provider
       value={{

src/pages/Sketchbook/Sketchbook.jsx

@@ -1,4 +1,4 @@
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Stage, Layer, Line } from "react-konva";
 import { Paper, Slider, IconButton, Popper } from "@mui/material";
 import { MuiColorInput } from "mui-color-input";
@@ -16,9 +16,12 @@ import {
 } from "react-icons/fa";
 
 import jsPDF from "jspdf";
+import axios from "axios";
 import RecordRTC from "recordrtc";
 
+import LoginRequired from "../LoginRequired/LoginRequired";
 import UserProfile from "../../components/UserProfile/UserProfile";
+import { useAppContext } from "../../context/AppContext";
 import { useTheme } from "../../context/ThemeContext";
 import "./sketchbook.css";
 
@@ -40,13 +43,38 @@ const Sketchbook = () => {
     name: "Doodle Collab",
     avatar: "",
   });
+  const { updateLoggedIn, isLoggedIn } = useAppContext();
   const [toggleToolsMenuBar, setToggleToolsMenuBar] = useState(false);
   const [toolsPopoverEl, setToolsPopoverEl] = useState(null);
   const [recording, setRecording] = useState(false);
   const [mediaStream, setMediaStream] = useState(null);
   const [recordRTC, setRecordRTC] = useState(null);
   const { isDarkMode } = useTheme();
 
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      updateLoggedIn(false);
+    } else {
+      axios
+        .get(
+          "https://doodlecollab-backend.onrender.com/api/users/validateToken",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }
+        )
+        .then(() => {
+          updateLoggedIn(true);
+        })
+        .catch(() => {
+          updateLoggedIn(false);
+          localStorage.removeItem("token");
+        });
+    }
+  }, []);
+
   const handleMouseDown = (e) => {
     setRemovedLines([]);
 
@@ -119,16 +147,15 @@ const Sketchbook = () => {
       }
       // Check if it's a video recording and handle accordingly
       if (lines.some((line) => line.video)) {
-        const videoBlob = new Blob([recordRTC.getBlob()], {
-          type: "video/webm",
-        });
+        const videoBlob = new Blob([recordRTC.getBlob()], { type: "video/webm" });
         const videoUrl = URL.createObjectURL(videoBlob);
         downloadURI(videoUrl, `${fileName}.${fileType || ftype}`);
       } else {
         downloadURI(canvas.toDataURL(), `${fileName}.${fileType || ftype}`);
       }
     };
   };
+
 
   const handleClear = () => {
     setRemovedLines(lines);
@@ -201,12 +228,10 @@ const Sketchbook = () => {
   const openToolsPopover = Boolean(toolsPopoverEl);
   const toolsPopoverId = openToolsPopover ? "tools-popover" : undefined;
 
-  return (
+  return isLoggedIn ? (
     <>
       <Stage
-        className={`sketchbook-section ${
-          isDarkMode ? "dark-mode" : "white-mode"
-        }`}
+        className={`sketchbook-section ${isDarkMode ? "dark-mode" : "white-mode"}`}
         width={window.innerWidth}
         height={window.innerHeight}
         onMouseDown={handleMouseDown}
@@ -375,6 +400,8 @@ const Sketchbook = () => {
              TOOLS MENUBAR SECTION ENDS
             ------------------------------ */}
     </>
+  ) : (
+    <LoginRequired />
   );
 };
 

src/routes/Root.jsx

@@ -7,7 +7,6 @@ import Login from "../pages/Authentication/Login";
 import Features from "../pages/Features/Features";
 import Sketchbook from "../pages/Sketchbook/Sketchbook";
 import Blog from "../pages/Blog/Blog";
-import PrivateRoute from "./PrivateRoute";
 
 export const router = createBrowserRouter([
   {
@@ -29,12 +28,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "/sketchbook",
-
-        element: (
-          <PrivateRoute>
-            <Sketchbook />
-          </PrivateRoute>
-        ),
+        element: <Sketchbook />,
       },
       {
         path: "/features",