client: fix bug, refactor code, show loading, etc.

Casuals4Fun · Apr 7, 2024 · 738f213 · 738f213
1 parent 7d514e0
commit 738f213
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 31 deletions.
diff --git a/client/index.html b/client/index.html
@@ -5,13 +5,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Regular.ttf" type="font/ttf" crossorigin>
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Medium.ttf" type="font/ttf" crossorigin>
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-SemiBold.ttf" type="font/ttf" crossorigin>
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Bold.ttf" type="font/ttf" crossorigin>
-  <link rel="preload" as="image" href="/logo.png" />
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Regular.ttf" type="font/ttf">
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Medium.ttf" type="font/ttf">
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-SemiBold.ttf" type="font/ttf">
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Bold.ttf" type="font/ttf">
+  <link rel="preload" as="image" href="/logo.png" type="image/png" />
 
-  <link rel="icon" type="image/png" href="/logo.png" />
+  <link rel="icon" href="/logo.png" type="image/png" />
   <title>DebateHive</title>
   <meta name="description" content="Your opinion is what matters." />
 </head>

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -33,8 +33,8 @@ export default function App() {
         <Routes>
           <Route path='/' element={<HomePage />} />
           <Route path='/auth' element={<AuthPage />} />
-          <Route path='/login' element={<Navigate to='/auth' />} />
-          <Route path='/signup' element={<Navigate to='/auth' />} />
+          <Route path='/login' element={<Navigate to='/auth?type=login' />} />
+          <Route path='/signup' element={<Navigate to='/auth?type=signup' />} />
           <Route path='/search' element={<SearchPage />} />
           <Route path='/create' element={<ProtectedRoute><CreateDebatePage /></ProtectedRoute>} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />

diff --git 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<ProtectedRouteProps> = ({ children }) => {
     const { isAuthenticated } = useAuthStore();
 
     if (isAuthenticated === AuthStatus.Authenticating) {
-        return <>Loading</>
+        return <LoadingComponent />
     }
     else if (isAuthenticated === AuthStatus.Failed) {
         return <Navigate to="/auth" replace />;

diff --git 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
@@ -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);
+    }
 }
diff --git a/client/src/components/loading/svg.tsx b/client/src/components/loading/svg.tsx
@@ -13,4 +13,14 @@ const LoadingSVG: React.FC<Props> = ({ size }) => {
     )
 }
 
-export default LoadingSVG
+const LoadingComponent = () => {
+    return (
+        <div className="loading-component">
+            <LoadingSVG
+                size={30}
+            />
+        </div>
+    )
+}
+
+export { LoadingSVG, LoadingComponent }
diff --git 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
@@ -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
@@ -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 <div />;
+    return <LoadingComponent />
 }
diff --git 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
@@ -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<AuthStore>((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<AuthStore>((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');
                 });