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');
});