feat: add caching

Casuals4Fun · Jul 21, 2024 · 97e8ffa · 97e8ffa
2 parents d656874 + 504bb50
commit 97e8ffa
Show file tree

Hide file tree

Showing 28 changed files with 308 additions and 183 deletions.
diff --git a/client/index.html b/client/index.html
@@ -3,13 +3,13 @@
 
 <head>
   <meta charset='UTF-8' />
-  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0' />
 
-  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Regular.ttf' type='font/ttf' crossOrigin='anonymous' />
+  <link rel='preload' as='image' href='/logo.png' type='image/png' />
+  <!-- <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Regular.ttf' type='font/ttf' crossOrigin='anonymous' />
   <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Medium.ttf' type='font/ttf' crossOrigin='anonymous' />
   <link rel='preload' as='font' href='/fonts/Onest/static/Onest-SemiBold.ttf' type='font/ttf' crossOrigin='anonymous' />
-  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Bold.ttf' type='font/ttf' crossOrigin='anonymous' />
-  <link rel='preload' as='image' href='/logo.png' type='image/png' />
+  <link rel='preload' as='font' href='/fonts/Onest/static/Onest-Bold.ttf' type='font/ttf' crossOrigin='anonymous' /> -->
 
   <link rel='icon' href='/logo.png' type='image/png' />
   <title>DebateMe</title>
@@ -19,6 +19,7 @@
 </head>
 
 <body>
+  <noscript>You need to enable JavaScript to access DebateMe</noscript>
   <div id='root'></div>
   <script type='module' src='/src/main.tsx'></script>
 </body>

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -22,32 +22,25 @@ export default function App() {
   const { setRoute, setUser, setIsAuthenticated, authTab, setAuthTab } = useAuthStore();
   const { expand, sidebar, setSidebar } = useNavStore();
 
-  useEffect(() => {
-    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light ? Theme.Light : Theme.Dark);
-    handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab);
-  }, [setRoute, setUser, setIsAuthenticated, setAuthTab]);
-
   const mainRef = useRef<HTMLDivElement>(null);
   const lastScrollTop = useRef<number>(0);
   const [isScrollingUp, setIsScrollingUp] = useState<boolean>(true);
 
   useEffect(() => {
+    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light ? Theme.Light : Theme.Dark);
+
+    handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab);
+
     const handleScroll = () => {
-      if (mainRef.current) {
-        const st = mainRef.current.scrollTop;
-        if (st > lastScrollTop.current) setIsScrollingUp(false);
-        else setIsScrollingUp(true);
-        lastScrollTop.current = st <= 0 ? 0 : st;
-      }
+      const st = mainRef.current?.scrollTop ?? 0;
+      setIsScrollingUp(st <= lastScrollTop.current);
+      lastScrollTop.current = Math.max(st, 0);
     };
 
     const mainElement = mainRef.current;
-    if (mainElement) mainElement.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      if (mainElement) {
-        mainElement.removeEventListener('scroll', handleScroll);
-      }
-    };
+    mainElement?.addEventListener('scroll', handleScroll, { passive: true });
+    return () => mainElement?.removeEventListener('scroll', handleScroll);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -85,8 +78,9 @@ export default function App() {
       <Toaster
         duration={3000}
         position='top-center'
+        richColors
         theme={(localStorage.getItem('theme') as Theme) || Theme.Dark}
       />
     </div>
-  );
+  )
 }
diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -51,7 +51,7 @@ const ClaimUsername = () => {
                     if (response.success) {
                         setAuthTab(AuthTab.Signup);
                         setMessage({ type: 'success', content: response.message });
-                        toast.success(`${response.message} Register your account to claim username.`);
+                        toast.success(`${response.message} Register your account to claim username`);
                     } else setMessage({ type: 'error', content: response.message });
                 })
                 .catch(() => setMessage({ type: 'error', content: 'Something went wrong. Try again later!' }))
@@ -85,7 +85,7 @@ const ClaimUsername = () => {
             </button>
             {message.content && <p style={{ color: message.type === 'error' ? 'red' : 'green' }}>{message.content}</p>}
         </form>
-    );
-};
+    )
+}
 
-export default ClaimUsername;
+export default ClaimUsername
diff --git a/client/src/components/card/debate-bar.tsx b/client/src/components/card/debate-bar.tsx
@@ -39,7 +39,7 @@ const DebateBar: React.FC<BarProps> = ({ debateFrom, debateBy }) => {
                 </div>
             </>
         </div>
-    );
-};
+    )
+}
 
-export default DebateBar;
+export default DebateBar
diff --git a/client/src/components/modal/auth/forgot-password.tsx b/client/src/components/modal/auth/forgot-password.tsx
@@ -64,7 +64,7 @@ const ForgotPassword = () => {
                     }
                 }
             } catch (error) {
-                toast.error('Something went wrong');
+                toast.error('Something went wrong. Try again later!');
             } finally {
                 setIsSubmitted(false);
             }
@@ -114,7 +114,7 @@ const ForgotPassword = () => {
                 </div>
             </form>
         </div>
-    );
-};
+    )
+}
 
-export default ForgotPassword;
+export default ForgotPassword
diff --git a/client/src/components/modal/auth/login-tab.tsx b/client/src/components/modal/auth/login-tab.tsx
@@ -145,7 +145,7 @@ const LoginTab = () => {
                 </div>
             </form>
         </div>
-    );
-};
+    )
+}
 
-export default LoginTab;
+export default LoginTab
diff --git a/client/src/components/modal/auth/set-password.tsx b/client/src/components/modal/auth/set-password.tsx
@@ -1,11 +1,14 @@
 import { useCallback, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
+import { AuthStatus, AuthTab, useAuthStore } from "../../../store/useAuthStore"
 import { LoadingSVG } from "../../loading/svg"
 
 const SetPassword = () => {
   const navigate = useNavigate();
 
+  const { setUser, setIsAuthenticated, setAuthTab } = useAuthStore();
+
   const [resetData, setResetData] = useState({
     new: "",
     confirm: ""
@@ -49,12 +52,12 @@ const SetPassword = () => {
     });
 
     if (trimmedNew !== trimmedConfirm) {
-      setIsSubmitted(false);
+      setTimeout(() => setIsSubmitted(false), 500);
       return toast.error("Password doesn't match");
     }
     else {
       if (trimmedNew.length < 6) {
-        setIsSubmitted(false);
+        setTimeout(() => setIsSubmitted(false), 500);
         return toast.warning('Password should be atleast 6 digits');
       }
 
@@ -65,14 +68,18 @@ const SetPassword = () => {
       }).then(res => res.json())
         .then(response => {
           if (response.success) {
-            navigate('/auth?type=login');
+            setUser(response.data.user);
+            setIsAuthenticated(AuthStatus.Authenticated);
+            localStorage.setItem('token', response.data.token);
+            setAuthTab(AuthTab.Closed);
+            navigate('/');
             toast.success(response.message);
           }
           else {
             if (response.message === 'Validation failed') {
-              return toast.error(`${response.errors[0].field.charAt(0).toUpperCase() + response.errors[0].field.slice(1)} ${response.errors[0].message}`)
+              return toast.error(`${response.errors[0].field.charAt(0).toUpperCase() + response.errors[0].field.slice(1)} ${response.errors[0].message}`);
             }
-            toast.error(response.message)
+            toast.error(response.message);
           }
         })
         .finally(() => setIsSubmitted(false));
@@ -110,7 +117,7 @@ const SetPassword = () => {
           disabled={isSubmitted}
           style={{ cursor: `${isSubmitted ? 'not-allowed' : ''}` }}
         >
-          {isSubmitted ? <LoadingSVG size={23} /> : 'Change'}
+          {isSubmitted ? <LoadingSVG size={23} /> : 'Proceed'}
         </button>
         <div className='extra-btn'>
           <p>

diff --git a/client/src/components/modal/auth/signup-tab.tsx b/client/src/components/modal/auth/signup-tab.tsx
@@ -242,7 +242,7 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                 </div>
             </form>
         </div>
-    );
-};
+    )
+}
 
-export default SignupTab;
+export default SignupTab
diff --git a/client/src/components/sidebar/explore.tsx b/client/src/components/sidebar/explore.tsx
@@ -66,4 +66,4 @@ const Explore: React.FC<ExploreProps> = ({ term }) => {
     )
 }
 
-export default Explore;
+export default Explore
diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -53,13 +53,14 @@
     cursor: pointer;
 }
 
-#left-sidebar .links__wrapper p {
-    font-size: 22px;
-}
-
 #left-sidebar .links__wrapper svg {
     width: 30px;
     height: 30px;
+    transition: color 0.15s ease-in-out;
+}
+
+#left-sidebar .links__wrapper p {
+    font-size: 22px;
 }
 
 #left-sidebar li:nth-child(2) {
@@ -90,7 +91,7 @@
 }
 
 #left-sidebar .links__wrapper:hover .underline::after,
-#left-sidebar .links__wrapper .name-active.underline::after {
+#left-sidebar li.active .links__wrapper .underline::after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }
@@ -130,8 +131,7 @@
         height: 25px;
     }
 
-    .underline::after,
-    .name-active.underline::after {
+    .underline::after {
         height: 1px;
     }
 }
@@ -216,7 +216,7 @@
         display: none;
     }
 
-    #left-sidebar .footer-active {
+    #left-sidebar li.active .footer {
         position: absolute;
         bottom: 0;
         left: 0;

diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx
@@ -38,14 +38,12 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
       </Link>
       <ul>
         {leftSidebarLinks.map(item => (
-          <li key={item.id} title={item.name}>
+          <li key={item.id} title={item.name} className={location.pathname === item.href ? 'active' : ''}>
             <div onClick={() => handleLinkClick(item.href, item.name)} className='links__wrapper'>
               <item.icon />
-              <p className={`${location.pathname === item.href ? 'name-active' : ''} underline`}>
-                {item.name}
-              </p>
+              <p className="underline">{item.name}</p>
             </div>
-            <div className={`${location.pathname === item.href ? 'footer-active' : ''}`} />
+            <div className="footer" />
           </li>
         ))}
       </ul>
@@ -66,22 +64,4 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   )
 }
 
-export default LeftSidebar
-
-/*
-
-const handleToggleTheme = () => {
-  const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-  document.querySelector("body")?.setAttribute('data-theme', newTheme);
-  setTheme(newTheme);
-}
-
-<button
-  className='theme-btn'
-  onClick={handleToggleTheme}
-  title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
->
-  {theme === Theme.Dark ? <img className='sun' src='theme/sun.svg' alt='' /> : <img className='moon' src='theme/moon.png' alt='' />}
-</button>
-
-*/
+export default LeftSidebar
diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -1,5 +1,5 @@
 import "./profile.css"
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { useNavStore } from "../../store/useNavStore"
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
@@ -19,7 +19,7 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
     const { expand, setExpand } = useNavStore();
     const { isAuthenticated, setIsAuthenticated, user, setUser, authTab, setAuthTab } = useAuthStore();
 
-    const handleToggleMenu = () => {
+    const handleToggleMenu = useCallback(() => {
         setExpand(!expand);
         const mainElement = document.querySelector('#main') as HTMLElement;
         if (mainElement) {
@@ -29,7 +29,7 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
             }
             else mainElement.style.overflow = '';
         }
-    }
+    }, [expand, setExpand]);
 
     const handleLogout = () => {
         handleToggleMenu();
@@ -55,7 +55,7 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
 
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [expand, setExpand]);
+    }, [expand, handleToggleMenu]);
 
     return (
         <div className='profile__wrapper'>
@@ -139,25 +139,7 @@ const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
                 </div>
             )}
         </div>
-    );
-};
-
-export default Profile;
-
-/*
-
-const handleToggleTheme = () => {
-    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-    document.querySelector("body")?.setAttribute('data-theme', newTheme);
-    setTheme(newTheme);
+    )
 }
 
-<button
-    className='theme-btn'
-    onClick={handleToggleTheme}
-    title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
->
-    {theme === Theme.Dark ? <img className='sun' src='theme/sun.svg' alt='' /> : <img className='moon' src='theme/moon.png' alt='' />}
-</button>
-
-*/
+export default Profile
diff --git a/client/src/data/regex.ts b/client/src/data/regex.ts
@@ -1,3 +1,3 @@
 export const usernameRegex = /^[a-zA-Z0-9_-]+$/;
-export const specialCharRegex = /[@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
+export const specialCharRegex = /[@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/; // eslint-disable-line
 export const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+(com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum|in|space)))$/;
-Original file line number
+Diff line change
@@ Expand Up @@
                     </div>
                 </>
             </div>
-        );
-    };
+        )
+    }
-    export default DebateBar;
+    export default DebateBar