From 738f213abae0ed014c6efafb9e9673663440ed0d Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Sun, 7 Apr 2024 19:31:01 +0530 Subject: [PATCH] client: fix bug, refactor code, show loading, etc. --- client/index.html | 12 +++++----- client/src/App.tsx | 4 ++-- client/src/ProtectedRoute.tsx | 3 ++- .../components/card/closed-debate-card.css | 2 +- client/src/components/loading/style.css | 12 ++++++++++ client/src/components/loading/svg.tsx | 12 +++++++++- client/src/components/modal/brief-info.tsx | 2 +- client/src/components/modal/login-tab.tsx | 2 +- client/src/pages/auth/index.tsx | 24 +++++++++---------- client/src/pages/search/index.tsx | 2 +- client/src/store/useAuthStore.ts | 6 +---- 11 files changed, 50 insertions(+), 31 deletions(-) diff --git a/client/index.html b/client/index.html index 8e472a0..348c3c1 100644 --- a/client/index.html +++ b/client/index.html @@ -5,13 +5,13 @@ - - - - - + + + + + - + DebateHive diff --git a/client/src/App.tsx b/client/src/App.tsx index b3b1d83..86b3b3a 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -33,8 +33,8 @@ export default function App() { } /> } /> - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx index 317511d..3aba27b 100644 --- a/client/src/ProtectedRoute.tsx +++ b/client/src/ProtectedRoute.tsx @@ -1,5 +1,6 @@ import { Navigate } from "react-router-dom"; import { AuthStatus, useAuthStore } from "./store/useAuthStore"; +import { LoadingComponent } from "./components/loading/svg"; interface ProtectedRouteProps { children: React.ReactNode; @@ -9,7 +10,7 @@ export const ProtectedRoute: React.FC = ({ children }) => { const { isAuthenticated } = useAuthStore(); if (isAuthenticated === AuthStatus.Authenticating) { - return <>Loading + return } else if (isAuthenticated === AuthStatus.Failed) { return ; diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css index 4933e41..c2de679 100644 --- a/client/src/components/card/closed-debate-card.css +++ b/client/src/components/card/closed-debate-card.css @@ -36,7 +36,7 @@ #closed-card .left h2 { font-size: 20px; font-weight: 600; - max-width: 280px; + max-width: 300px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/client/src/components/loading/style.css b/client/src/components/loading/style.css index 336a74f..a923fba 100644 --- a/client/src/components/loading/style.css +++ b/client/src/components/loading/style.css @@ -13,6 +13,12 @@ animation: rotate-anim 1s linear infinite; } +.loading-component { + height: calc(100dvh - 40px); + display: grid; + place-items: center; +} + @keyframes rotate-anim { 0% { rotate: 0deg; @@ -36,4 +42,10 @@ 100% { background-color: var(--skeleton_bg_100); } +} + +@media screen and (max-width: 480px) { + .loading-component { + height: calc(100dvh - 150px); + } } \ No newline at end of file diff --git a/client/src/components/loading/svg.tsx b/client/src/components/loading/svg.tsx index 359c8f4..caeb3bc 100644 --- a/client/src/components/loading/svg.tsx +++ b/client/src/components/loading/svg.tsx @@ -13,4 +13,14 @@ const LoadingSVG: React.FC = ({ size }) => { ) } -export default LoadingSVG \ No newline at end of file +const LoadingComponent = () => { + return ( +
+ +
+ ) +} + +export { LoadingSVG, LoadingComponent } \ No newline at end of file diff --git a/client/src/components/modal/brief-info.tsx b/client/src/components/modal/brief-info.tsx index 3429201..78c394d 100644 --- a/client/src/components/modal/brief-info.tsx +++ b/client/src/components/modal/brief-info.tsx @@ -4,7 +4,7 @@ import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/use import { RegisterDataProps } from "../../types"; import useFileHandler from "../../hooks/useFileHandler"; import { toast } from "sonner"; -import LoadingSVG from "../loading/svg"; +import { LoadingSVG } from "../loading/svg"; import { IoPersonCircleOutline } from "react-icons/io5"; import { MdModeEdit } from "react-icons/md"; import { GrCloudUpload } from "react-icons/gr"; diff --git a/client/src/components/modal/login-tab.tsx b/client/src/components/modal/login-tab.tsx index 835e17f..522b159 100644 --- a/client/src/components/modal/login-tab.tsx +++ b/client/src/components/modal/login-tab.tsx @@ -2,7 +2,7 @@ import React, { useState, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"; import { toast } from "sonner"; -import LoadingSVG from "../loading/svg"; +import { LoadingSVG } from "../loading/svg"; import { FcGoogle } from "react-icons/fc"; const LoginTab = () => { diff --git a/client/src/pages/auth/index.tsx b/client/src/pages/auth/index.tsx index 73b106f..8f2dc11 100644 --- a/client/src/pages/auth/index.tsx +++ b/client/src/pages/auth/index.tsx @@ -1,19 +1,27 @@ import { useEffect } from "react"; import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/useAuthStore"; import { useLocation, useNavigate } from "react-router-dom"; +import { LoadingComponent } from "../../components/loading/svg"; export default function AuthPage() { const location = useLocation(); const navigate = useNavigate(); - const { isAuthenticated, setAuthTab } = useAuthStore(); + const { route, isAuthenticated, setAuthTab } = useAuthStore(); const { setTempUser } = useTempStore(); useEffect(() => { const params = new URLSearchParams(location.search); const type = params.get('type'); + + if (isAuthenticated === AuthStatus.Authenticated) { + navigate(route === '/auth' || route === '/login' || route === '/signup' ? '/' : route) + } + else if (isAuthenticated === AuthStatus.Failed) { + setAuthTab(type === 'login' ? AuthTab.Login : type === 'signup' ? AuthTab.Signup : AuthTab.Login); + } + const userData = params.get('user'); const token = params.get('token'); - const user = userData ? JSON.parse(decodeURIComponent(userData)) : null; if (type === 'login' && token) localStorage.setItem('token', token); @@ -28,15 +36,7 @@ export default function AuthPage() { setAuthTab(AuthTab.Signup); navigate('/auth', { replace: true }); } + }, [isAuthenticated, location.search, navigate, route, setAuthTab, setTempUser]); - if (isAuthenticated === AuthStatus.Authenticated) { - navigate('/', { replace: true }); - } else if (location.pathname === '/auth') { - setAuthTab(type === 'signup' ? AuthTab.Signup : AuthTab.Login); - } else { - navigate('/', { replace: true }); - } - }, [isAuthenticated, location.pathname, location.search, navigate, setAuthTab, setTempUser]); - - return
; + return } \ No newline at end of file diff --git a/client/src/pages/search/index.tsx b/client/src/pages/search/index.tsx index 4af2844..34f6e1f 100644 --- a/client/src/pages/search/index.tsx +++ b/client/src/pages/search/index.tsx @@ -20,7 +20,7 @@ export default function SearchPage() { const searchValue = termValue ?? categoryValue ?? ''; setSearchTerm(searchValue); } - }, [location, navigate]); + }, [location.search, navigate]); const handleClearSearchTerm = () => { navigate("/search"); diff --git a/client/src/store/useAuthStore.ts b/client/src/store/useAuthStore.ts index bcfc46c..a7c1a08 100644 --- a/client/src/store/useAuthStore.ts +++ b/client/src/store/useAuthStore.ts @@ -1,5 +1,4 @@ import { create } from "zustand"; -import { toast } from "sonner"; export enum AuthTab { Closed = 'closed', @@ -52,8 +51,8 @@ export const useAuthStore = create((set) => ({ autoLogin: () => { const token = localStorage.getItem('token'); + set({ route: location.pathname }); if (!token) { - if (location.pathname !== '/auth') set({ route: location.pathname }); set({ isAuthenticated: AuthStatus.Failed }); } else { @@ -67,17 +66,14 @@ export const useAuthStore = create((set) => ({ .then(res => res.json()) .then(response => { if (response.success) { - toast.success(response.message); set({ user: response.data.user, isAuthenticated: AuthStatus.Authenticated, authTab: AuthTab.Closed }); } else { - toast.success('Session logged out.'); set({ isAuthenticated: AuthStatus.Failed }); localStorage.removeItem('token'); } }) .catch(() => { - toast.success('Session logged out.'); set({ isAuthenticated: AuthStatus.Failed }); localStorage.removeItem('token'); });