From 98bda19d962ece520591a1016bce67b3d54d57b8 Mon Sep 17 00:00:00 2001
From: Fatih20 <fnri39@protonmail.com>
Date: Fri, 17 Nov 2023 05:44:00 +0700
Subject: [PATCH] Fix bug in protecting routes.
---
src/components/HomeLayout.tsx | 20 ++++++++------------
src/components/ProtectedLayout.tsx | 21 ++++++++-------------
2 files changed, 16 insertions(+), 25 deletions(-)
diff --git a/src/components/HomeLayout.tsx b/src/components/HomeLayout.tsx
index 80b5dca..8662252 100644
--- a/src/components/HomeLayout.tsx
+++ b/src/components/HomeLayout.tsx
@@ -1,28 +1,24 @@
import { useUser } from "@/utils/context/AuthProvider";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
import { Outlet, useNavigate } from "react-router-dom";
function HomeLayout() {
const { user, status } = useUser();
- const [showingLoading, setShowingLoading] = useState(true);
const nav = useNavigate();
useEffect(() => {
if (user && status === "success") {
nav("/");
}
-
- if (status === "success") {
- setTimeout(() => {
- setShowingLoading(false), 1000;
- });
- }
}, [user, nav, status]);
- if (showingLoading) {
- <div className="bg-black/50 w-screen h-screen flex flex-col items-center justify-center">
- Loading
- </div>;
+ if (status === "loading") {
+ return (
+ <div className="bg-black/50 w-screen h-screen flex flex-col items-center justify-center">
+ Loading
+ </div>
+ );
}
+
return (
<div className="min-h-screen w-screen flex flex-col items-center justify-center">
<main>
diff --git a/src/components/ProtectedLayout.tsx b/src/components/ProtectedLayout.tsx
index 1f7aa9e..c76d361 100644
--- a/src/components/ProtectedLayout.tsx
+++ b/src/components/ProtectedLayout.tsx
@@ -2,29 +2,24 @@ import NavWrapper from "@/components/NavWrapper";
import { useUser } from "@/utils/context/AuthProvider";
import GymApplicationProvider from "@/utils/context/GymApplicationProvider";
import GymProvider from "@/utils/context/GymProvider";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
import { useNavigate, Outlet } from "react-router-dom";
function ProtectedLayout() {
const { user, status } = useUser();
- const [showingLoading, setShowingLoading] = useState(true);
const nav = useNavigate();
useEffect(() => {
- if (!user && status === "success") {
+ if ((!user && status === "success") || status === "error") {
nav("/login");
}
-
- if (status === "success") {
- setTimeout(() => {
- setShowingLoading(false), 1000;
- });
- }
}, [user, nav, status]);
- if (showingLoading) {
- <div className="bg-black/50 w-screen h-screen flex flex-col items-center justify-center">
- Loading
- </div>;
+ if (!user) {
+ return (
+ <div className="bg-black/50 w-screen h-screen flex flex-col items-center justify-center">
+ Loading
+ </div>
+ );
}
return (
--
GitLab