client: fix bug

Casuals4Fun · Apr 24, 2024 · b7d078e · b7d078e
1 parent 295a6df
commit b7d078e
Show file tree

Hide file tree

Showing 29 changed files with 156 additions and 148 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,21 +1,21 @@
-import "./App.css";
-import { useRef, useState, useEffect } from "react";
-import { Routes, Route, Navigate } from "react-router-dom";
-import { ProtectedRoute } from "./ProtectedRoute";
-import { Theme, useNavStore } from "./store/useNavStore";
-import { AuthTab, useAuthStore } from "./store/useAuthStore";
-import handleAutoLogin from "./utils/handleAutoLogin";
-import { Toaster } from "sonner";
-import LeftSidebar from "./components/sidebar/left-sidebar";
-import RightSidebar from "./components/sidebar/right-sidebar";
-import HomePage from "./pages/home";
-import AuthPage from "./pages/auth";
-import SearchPage from "./pages/search";
-import CreateDebatePage from "./pages/create-debate";
-import HotTopicsPage from "./pages/hot-topics";
-import OpenTopicsPage from "./pages/open-topics";
-import NotificationPage from "./pages/notifications";
-import AuthModal from "./components/modal/auth";
+import "./App.css"
+import { useRef, useState, useEffect } from "react"
+import { Routes, Route, Navigate } from "react-router-dom"
+import { Toaster } from "sonner"
+import { ProtectedRoute } from "./ProtectedRoute"
+import { Theme, useNavStore } from "./store/useNavStore"
+import { AuthTab, useAuthStore } from "./store/useAuthStore"
+import handleAutoLogin from "./utils/handleAutoLogin"
+import LeftSidebar from "./components/sidebar/left-sidebar"
+import RightSidebar from "./components/sidebar/right-sidebar"
+import AuthModal from "./components/modal/auth"
+import HomePage from "./pages/home"
+import AuthPage from "./pages/auth"
+import SearchPage from "./pages/search"
+import CreateDebatePage from "./pages/create-debate"
+import HotTopicsPage from "./pages/hot-topics"
+import OpenTopicsPage from "./pages/open-topics"
+import NotificationPage from "./pages/notifications"
 
 export default function App() {
   const { setRoute, setUser, setIsAuthenticated, authTab, setAuthTab } = useAuthStore();
@@ -27,25 +27,24 @@ export default function App() {
   }, [setRoute, setUser, setIsAuthenticated, setAuthTab]);
 
   const mainRef = useRef<HTMLDivElement>(null);
+  const lastScrollTop = useRef<number>(0);
   const [isScrollingUp, setIsScrollingUp] = useState<boolean>(true);
-  let lastScrollTop = 0;
 
   useEffect(() => {
     const handleScroll = () => {
       if (mainRef.current) {
         const st = mainRef.current.scrollTop;
-        if (st > lastScrollTop && st > 70) setIsScrollingUp(false);
+        if (st > lastScrollTop.current) setIsScrollingUp(false);
         else setIsScrollingUp(true);
-        lastScrollTop = st <= 0 ? 0 : st;
+        lastScrollTop.current = st <= 0 ? 0 : st;
       }
     };
 
-    if (mainRef.current) {
-      mainRef.current.addEventListener('scroll', handleScroll, { passive: true });
-    }
+    const mainElement = mainRef.current;
+    if (mainElement) mainElement.addEventListener('scroll', handleScroll, { passive: true });
     return () => {
-      if (mainRef.current) {
-        mainRef.current.removeEventListener('scroll', handleScroll);
+      if (mainElement) {
+        mainElement.removeEventListener('scroll', handleScroll);
       }
     };
   }, []);

diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx
@@ -1,6 +1,6 @@
-import { Navigate } from "react-router-dom";
-import { AuthStatus, useAuthStore } from "./store/useAuthStore";
-import { LoadingComponent } from "./components/loading/svg";
+import { Navigate } from "react-router-dom"
+import { AuthStatus, useAuthStore } from "./store/useAuthStore"
+import { LoadingComponent } from "./components/loading/svg"
 
 interface ProtectedRouteProps {
     children: React.ReactNode;

diff --git a/client/src/components/button/toggle-theme.tsx b/client/src/components/button/toggle-theme.tsx
@@ -1,5 +1,5 @@
-import "./toggle-theme.css";
-import { Theme, useNavStore } from "../../store/useNavStore";
+import "./toggle-theme.css"
+import { Theme, useNavStore } from "../../store/useNavStore"
 
 const ToggleTheme = () => {
     const { theme, setTheme } = useNavStore();

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -1,8 +1,8 @@
-import "./closed-debate-card.css";
-import { Link } from "react-router-dom";
-import DebateBar from "./debate-bar";
-import useFormatNumber from "../../hooks/useFormatNumber";
-import { FaComments } from "react-icons/fa";
+import "./closed-debate-card.css"
+import { Link } from "react-router-dom"
+import DebateBar from "./debate-bar"
+import { FaComments } from "react-icons/fa"
+import useFormatNumber from "../../hooks/useFormatNumber"
 
 const ClosedDebateCard = () => {
     return (

diff --git a/client/src/components/card/debate-bar.tsx b/client/src/components/card/debate-bar.tsx
@@ -1,7 +1,7 @@
-import "./debate-bar.css";
-import React from "react";
-import useFormatNumber from "../../hooks/useFormatNumber";
-import { IoCaretUpSharp } from "react-icons/io5";
+import "./debate-bar.css"
+import React from "react"
+import { IoCaretUpSharp } from "react-icons/io5"
+import useFormatNumber from "../../hooks/useFormatNumber"
 
 interface BarProps {
     debateFrom: number;

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,8 +1,8 @@
-import "./open-debate-card.css";
-import { Link } from "react-router-dom";
-import useFormatNumber from "../../hooks/useFormatNumber";
-import { IoCaretUpSharp } from "react-icons/io5";
-import { FaComments } from "react-icons/fa";
+import "./open-debate-card.css"
+import { Link } from "react-router-dom"
+import { FaComments } from "react-icons/fa"
+import { IoCaretUpSharp } from "react-icons/io5"
+import useFormatNumber from "../../hooks/useFormatNumber"
 
 const OpenDebateCard = () => {
     return (

diff --git a/client/src/components/loading/skeleton.tsx b/client/src/components/loading/skeleton.tsx
@@ -1,4 +1,4 @@
-import "./style.css";
+import "./style.css"
 
 interface SkeletonProps {
   style?: React.CSSProperties

diff --git a/client/src/components/loading/svg.tsx b/client/src/components/loading/svg.tsx
@@ -1,4 +1,4 @@
-import "./style.css";
+import "./style.css"
 
 interface Props {
     size: number

diff --git a/client/src/components/modal/auth/brief-info.tsx b/client/src/components/modal/auth/brief-info.tsx
@@ -1,12 +1,12 @@
-import { useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../../store/useAuthStore";
-import { RegisterDataProps } from "../../../types";
-import { toast } from "sonner";
-import { IoPersonCircleOutline } from "react-icons/io5";
-import { MdModeEdit } from "react-icons/md";
-import { GrCloudUpload } from "react-icons/gr";
-import { LoadingSVG } from "../../loading/svg";
+import { useState, useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import { LoadingSVG } from "../../loading/svg"
+import { RegisterDataProps } from "../../../types"
+import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../../store/useAuthStore"
+import { MdModeEdit } from "react-icons/md"
+import { GrCloudUpload } from "react-icons/gr"
+import { IoPersonCircleOutline } from "react-icons/io5"
 
 const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData }) => {
     const navigate = useNavigate();

diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -234,7 +234,7 @@
 }
 
 #auth-modal .checkbox__conatiner .checkmark:after {
-    content: "";
+    content: '';
     position: absolute;
     display: none;
 }

diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -1,13 +1,13 @@
-import "./index.css";
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import { useAuthStore, AuthTab, useTempStore } from "../../../store/useAuthStore";
-import Lottie from "lottie-react";
-import WavingHand from "../../../lottie/WavingHand.json";
-import LoginTab from "./login-tab";
-import SignupTab from "./signup-tab";
-import BriefInfo from "./brief-info";
-import { IoClose } from "react-icons/io5";
+import "./index.css"
+import { useState } from "react"
+import { useLocation } from "react-router-dom"
+import Lottie from "lottie-react"
+import { useAuthStore, AuthTab, useTempStore } from "../../../store/useAuthStore"
+import WavingHand from "../../../lottie/WavingHand.json"
+import LoginTab from "./login-tab"
+import SignupTab from "./signup-tab"
+import BriefInfo from "./brief-info"
+import { IoClose } from "react-icons/io5"
 
 type RegisterData = {
     email: string;

diff --git a/client/src/components/modal/auth/login-tab.tsx b/client/src/components/modal/auth/login-tab.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import { AuthStatus, AuthTab, useAuthStore } from "../../../store/useAuthStore";
-import { toast } from "sonner";
-import { FcGoogle } from "react-icons/fc";
-import { LoadingSVG } from "../../loading/svg";
+import React, { useState, useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import { AuthStatus, AuthTab, useAuthStore } from "../../../store/useAuthStore"
+import { FcGoogle } from "react-icons/fc"
+import { LoadingSVG } from "../../loading/svg"
 
 const LoginTab = () => {
     const navigate = useNavigate();

diff --git a/client/src/components/modal/auth/signup-tab.tsx b/client/src/components/modal/auth/signup-tab.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useCallback } from "react";
-import { RegisterDataProps } from "../../../types";
-import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../../store/useAuthStore";
-import { toast } from "sonner";
-import { FcGoogle } from "react-icons/fc";
-import { LoadingSVG } from "../../loading/svg";
+import React, { useState, useCallback } from "react"
+import { RegisterDataProps } from "../../../types"
+import { toast } from "sonner"
+import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../../store/useAuthStore"
+import { FcGoogle } from "react-icons/fc"
+import { LoadingSVG } from "../../loading/svg"
 
 const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData }) => {
     const { setAuthTab, isAuthenticated } = useAuthStore();

diff --git a/client/src/components/sidebar/explore.tsx b/client/src/components/sidebar/explore.tsx
@@ -1,8 +1,8 @@
-import "./explore.css";
-import { useRef, useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
-import { IoSearch } from "react-icons/io5";
-import { categoriesData } from "../../data/categories-data";
+import "./explore.css"
+import { useRef, useState } from "react"
+import { useNavigate, Link } from "react-router-dom"
+import { IoSearch } from "react-icons/io5"
+import { categoriesData } from "../../data/categories-data"
 
 interface ExploreProps {
     term?: string

diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx
@@ -1,12 +1,12 @@
-import "./left-sidebar.css";
-import { useLocation, Link, useNavigate } from "react-router-dom";
-import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore";
-import { Theme, useNavStore } from "../../store/useNavStore";
-import { toast } from "sonner";
-import { leftSidebarLinks } from "../../data/left-sidebar-links";
-import Profile from "./profile";
-import { GoPerson } from "react-icons/go";
-import LoadingSkeleton from "../loading/skeleton";
+import "./left-sidebar.css"
+import { useLocation, Link, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
+import { Theme, useNavStore } from "../../store/useNavStore"
+import { leftSidebarLinks } from "../../data/left-sidebar-links"
+import Profile from "./profile"
+import { GoPerson } from "react-icons/go"
+import LoadingSkeleton from "../loading/skeleton"
 
 interface SidebarProps {
   isVisible: boolean

diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -1,15 +1,15 @@
-import "./profile.css";
-import { useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Theme, useNavStore } from "../../store/useNavStore";
-import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore";
-import ToggleTheme from "../button/toggle-theme";
-import LoadingSkeleton from "../loading/skeleton";
-import { toast } from "sonner";
-import { IoMdPerson } from "react-icons/io";
-import { PiBellSimpleFill, PiSignOutBold } from "react-icons/pi";
-import { GoPerson } from "react-icons/go";
-import { FaRegUser } from "react-icons/fa";
+import "./profile.css"
+import { useEffect } from "react"
+import { Link, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import { Theme, useNavStore } from "../../store/useNavStore"
+import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
+import ToggleTheme from "../button/toggle-theme"
+import LoadingSkeleton from "../loading/skeleton"
+import { IoMdPerson } from "react-icons/io"
+import { PiBellSimpleFill, PiSignOutBold } from "react-icons/pi"
+import { GoPerson } from "react-icons/go"
+import { FaRegUser } from "react-icons/fa"
 
 const Profile = () => {
     const navigate = useNavigate();
@@ -22,6 +22,18 @@ const Profile = () => {
         setTheme(newTheme);
     }
 
+    const handleToggleMenu = () => {
+        setExpand(!expand);
+        const mainElement = document.querySelector('#main') as HTMLElement;
+        if (mainElement) {
+            if (window.matchMedia("(max-width: 480px)").matches) {
+                if (expand) mainElement.style.overflow = '';
+                else mainElement.style.overflow = 'hidden';
+            }
+            else mainElement.style.overflow = '';
+        }
+    }
+
     const handleLogout = () => {
         setExpand(false);
         navigate('/');
@@ -40,12 +52,10 @@ const Profile = () => {
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             const target = event.target as HTMLElement;
-            if (
-                expand &&
-                !target.closest(".profile__modal") &&
-                !target.closest(".profile__image")
-            ) {
+            if (expand && !target.closest(".profile__modal") && !target.closest(".profile__image")) {
                 setExpand(false);
+                const mainElement = document.querySelector('#main') as HTMLElement;
+                if (mainElement) mainElement.style.overflow = '';
             }
         };
 
@@ -79,7 +89,7 @@ const Profile = () => {
                             borderStyle: 'solid',
                             borderColor: `${expand ? 'var(--body_color)' : 'var(--nav_border)'}`
                         }}
-                        onClick={() => setExpand(!expand)}
+                        onClick={handleToggleMenu}
                     >
                         {user.avatar ? (
                             <img src={user.avatar} alt="" />

diff --git a/client/src/components/sidebar/right-sidebar.tsx b/client/src/components/sidebar/right-sidebar.tsx
@@ -1,9 +1,9 @@
-import "./right-sidebar.css";
-import { Link } from "react-router-dom";
-import { useNavStore } from "../../store/useNavStore";
-import ToggleTheme from "../button/toggle-theme";
-import Profile from "./profile";
-import Explore from "./explore";
+import "./right-sidebar.css"
+import { Link } from "react-router-dom"
+import { useNavStore } from "../../store/useNavStore"
+import ToggleTheme from "../button/toggle-theme"
+import Profile from "./profile"
+import Explore from "./explore"
 
 interface SidebarProps {
   isVisible: boolean

diff --git a/client/src/data/left-sidebar-links.ts b/client/src/data/left-sidebar-links.ts
@@ -1,9 +1,8 @@
-import { RiHome2Fill } from "react-icons/ri";
-import { RiFireFill } from "react-icons/ri";
-import { FaFeather } from "react-icons/fa6";
-import { IoSearch } from "react-icons/io5";
-import { PiBellSimpleFill } from "react-icons/pi";
-import { IoMdCreate } from "react-icons/io";
+import { RiHome2Fill, RiFireFill } from "react-icons/ri"
+import { FaFeather } from "react-icons/fa6"
+import { IoSearch } from "react-icons/io5"
+import { PiBellSimpleFill } from "react-icons/pi"
+import { IoMdCreate } from "react-icons/io"
 
 export const leftSidebarLinks = [
     {

diff --git a/client/src/hooks/useFormatNumber.ts b/client/src/hooks/useFormatNumber.ts
@@ -1,5 +1,5 @@
 const useFormatNumber = (num: number) => {
-    let formattedNum = "";
+    let formattedNum = '';
     if (num >= 1_000_000_000) {
         formattedNum = (num / 1_000_000_000).toFixed(2);
         formattedNum = formattedNum.replace(/\.00$/, '');

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,7 +1,7 @@
-import "./globals.css";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import App from "./App.tsx";
+import "./globals.css"
+import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
+import App from "./App.tsx"
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <BrowserRouter>

diff --git a/client/src/pages/auth/index.tsx b/client/src/pages/auth/index.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from "react";
-import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/useAuthStore";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/useAuthStore"
 
 export default function AuthPage() {
     const location = useLocation();