From b8be4171d5a2bdaf172d57c7d51a3e20d0f7a9c8 Mon Sep 17 00:00:00 2001 From: Jyotirmoy Roy Date: Thu, 8 Feb 2024 17:35:19 +0530 Subject: [PATCH] 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 | 1 - src/constants/Navbar/Navbar.jsx | 13 ++++---- src/context/AppContext.jsx | 39 ++++++++++++++++++------ src/pages/Sketchbook/Sketchbook.jsx | 43 +++++++++++++++++++++----- src/routes/PrivateRoute.jsx | 45 ---------------------------- src/routes/Root.jsx | 8 +---- 6 files changed, 71 insertions(+), 78 deletions(-) delete mode 100644 src/routes/PrivateRoute.jsx diff --git a/src/components/Banner/HomeBanner.jsx b/src/components/Banner/HomeBanner.jsx index 51e2cd8..8778e7d 100644 --- a/src/components/Banner/HomeBanner.jsx +++ b/src/components/Banner/HomeBanner.jsx @@ -51,7 +51,6 @@ const HomeBanner = () => { navigate("/sketchbook"); }, onError: () => { - updateLoggedIn(false); showToast({ message: "Login Failed!", type: "ERROR" }); }, } diff --git a/src/constants/Navbar/Navbar.jsx b/src/constants/Navbar/Navbar.jsx index 078f565..33a05d4 100644 --- a/src/constants/Navbar/Navbar.jsx +++ b/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 }) => { Home - - Sketchbook - Features @@ -51,12 +47,13 @@ const Navbar = ({ isBarsClicked, handleBarsClick }) => { {isLoggedIn ? ( - + ) : ( { 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 ( { name: "Doodle Collab", avatar: "", }); + const { updateLoggedIn, isLoggedIn } = useAppContext(); const [toggleToolsMenuBar, setToggleToolsMenuBar] = useState(false); const [toolsPopoverEl, setToolsPopoverEl] = useState(null); const [recording, setRecording] = useState(false); @@ -47,6 +51,30 @@ const Sketchbook = () => { 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,9 +147,7 @@ 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 { @@ -129,6 +155,7 @@ const Sketchbook = () => { } }; }; + const handleClear = () => { setRemovedLines(lines); @@ -201,12 +228,10 @@ const Sketchbook = () => { const openToolsPopover = Boolean(toolsPopoverEl); const toolsPopoverId = openToolsPopover ? "tools-popover" : undefined; - return ( + return isLoggedIn ? ( <> { TOOLS MENUBAR SECTION ENDS ------------------------------ */} + ) : ( + ); }; diff --git a/src/routes/PrivateRoute.jsx b/src/routes/PrivateRoute.jsx deleted file mode 100644 index 249a1e3..0000000 --- a/src/routes/PrivateRoute.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import Backdrop from "@mui/material/Backdrop"; -import CircularProgress from "@mui/material/CircularProgress"; -import { useQuery } from "@tanstack/react-query"; -import axios from "axios"; -import { Navigate } from "react-router-dom"; - -const PrivateRoute = ({ children }) => { - const { error, isLoading } = useQuery({ - queryKey: ["token"], - queryFn: () => - axios.get( - "https://doodlecollab-backend.onrender.com/api/users/validateToken", - { - headers: { - Authorization: `Bearer ${ - localStorage && localStorage.getItem("token") - }`, - }, - } - ), - // as this network call depends on localStorage data - // if it is undefined avoid call - enabled: !!localStorage, - }); - - if (isLoading) { - return ( - theme.zIndex.drawer + 1 }} - open={true} - > - - - ); - } - - if (error) { - localStorage.removeItem("token"); - return ; - } - - return children; -}; - -export default PrivateRoute; diff --git a/src/routes/Root.jsx b/src/routes/Root.jsx index dbd2d40..8cf28fd 100644 --- a/src/routes/Root.jsx +++ b/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: ( - - - - ), + element: , }, { path: "/features",