client: add create page to protected route, modify profile modal

Casuals4Fun · Jul 14, 2024 · 4169ff7 · 4169ff7
2 parents 05ade15 + 4946f95
commit 4169ff7
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 71 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -2,7 +2,7 @@ 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 { ProtectedRoute } from "./ProtectedRoute"
 import { Theme, useNavStore } from "./store/useNavStore"
 import { AuthTab, useAuthStore } from "./store/useAuthStore"
 import handleAutoLogin from "./utils/handleAutoLogin"
@@ -61,15 +61,15 @@ export default function App() {
       <main id='main' ref={mainRef} className={`${expand ? 'expand' : ''} ${sidebar ? '' : 'w-full'}`}>
         <Routes>
           <Route path='/' element={<HomePage />} />
-          <Route path='/auth' element={<AuthPage />} />
+          <Route path='/auth' element={<AuthPage />} />isScrollingUp
           <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 isVisible={isScrollingUp} isFullscreen={!sidebar} /></ProtectedRoute>} /> */}
-          <Route path='/create' element={<CreateDebatePage isVisible={isScrollingUp} isFullscreen={!sidebar} />} />
+          <Route path='/create' element={<ProtectedRoute><CreateDebatePage isVisible={isScrollingUp} isFullscreen={!sidebar} /></ProtectedRoute>} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />
           <Route path='/open-topics' element={<OpenTopicsPage />} />
           <Route path='/notifications' element={<NotificationPage />} />
+          <Route path=':username' element={<>Profile Page</>} />
         </Routes>
       </main>
       <>

diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx
@@ -3,7 +3,7 @@ import { AuthStatus, useAuthStore } from "./store/useAuthStore"
 import { LoadingComponent } from "./components/loading/svg"
 
 interface ProtectedRouteProps {
-    children: React.ReactNode;
+    children: React.ReactNode
 }
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {

diff --git a/client/src/components/card/debate-bar.tsx b/client/src/components/card/debate-bar.tsx
@@ -4,8 +4,8 @@ import { IoCaretUpSharp } from "react-icons/io5"
 import useFormatNumber from "../../hooks/useFormatNumber"
 
 interface BarProps {
-    debateFrom: number;
-    debateBy: number;
+    debateFrom: number
+    debateBy: number
 }
 
 const DebateBar: React.FC<BarProps> = ({ debateFrom, debateBy }) => {

diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx
@@ -1,6 +1,6 @@
 import "./left-sidebar.css"
 import { useLocation, Link, useNavigate } from "react-router-dom"
-// import { toast } from "sonner"
+import { toast } from "sonner"
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
 import { useNavStore } from "../../store/useNavStore"
 import { leftSidebarLinks } from "../../data/left-sidebar-links"
@@ -16,22 +16,19 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  // const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
-  const { isAuthenticated, setAuthTab } = useAuthStore();
+  const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
   const { sidebar } = useNavStore();
 
-  // const handleLinkClick = (href: string, name: string) => {
-  const handleLinkClick = (href: string) => {
-    // if (name === "Create Debate") {
-    //   if (isAuthenticated === AuthStatus.Failed) {
-    //     setRoute(href);
-    //     setAuthTab(AuthTab.Login);
-    //   }
-    //   else if (isAuthenticated === AuthStatus.Authenticated) navigate(href);
-    //   else return toast.warning('Try again...');
-    // }
-    // else navigate(href);
-    navigate(href);
+  const handleLinkClick = (href: string, name: string) => {
+    if (name === "Create Debate") {
+      if (isAuthenticated === AuthStatus.Failed) {
+        setRoute(href);
+        setAuthTab(AuthTab.Login);
+      }
+      else if (isAuthenticated === AuthStatus.Authenticated) navigate(href);
+      else return toast.warning('Try again...');
+    }
+    else navigate(href);
   };
 
   return (
@@ -42,8 +39,7 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
       <ul>
         {leftSidebarLinks.map(item => (
           <li key={item.id} title={item.name}>
-            {/* <div onClick={() => handleLinkClick(item.href, item.name)} className='links__wrapper'> */}
-            <div onClick={() => handleLinkClick(item.href)} className='links__wrapper'>
+            <div onClick={() => handleLinkClick(item.href, item.name)} className='links__wrapper'>
               <item.icon />
               <p className={`${location.pathname === item.href ? 'name-active' : ''} underline`}>
                 {item.name}

diff --git a/client/src/components/sidebar/profile.css b/client/src/components/sidebar/profile.css
@@ -97,27 +97,38 @@
 }
 
 .modal-profile__info {
+    padding-top: 5px;
     display: flex;
     flex-direction: column;
 }
 
-.modal-profile__info {
-    padding-top: 5px;
+.modal-profile__info a {
+    width: fit-content;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
-.modal-profile__info p:nth-child(1) {
+.modal-profile__info a:nth-child(1) {
     font-size: 18px;
     font-weight: 600;
     color: var(--body_color);
     cursor: pointer;
 }
 
-.modal-profile__info p:nth-child(2) {
-    font-size: 13px;
+.modal-profile__info a:nth-child(2) {
+    font-size: 14px;
     color: var(--nav_profile_username);
     cursor: pointer;
 }
 
+.modal-profile__image:hover~.modal-profile__info a:nth-child(2),
+.modal-profile__info a:nth-child(1):hover~a:nth-child(2),
+.modal-profile__info a:nth-child(2):hover {
+    text-decoration: underline;
+}
+
 .profile__modal {
     padding: 15px;
     position: fixed;
@@ -129,7 +140,7 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    border: 2px solid var(--nav_border);
+    border: 2px solid var(--explore_input_bg);
     border-radius: 20px;
 }
 
@@ -144,13 +155,6 @@
     width: 70%;
 }
 
-.modal-profile__info p {
-    max-width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
 .modal-profile-btn {
     width: fit-content;
     display: flex;
@@ -180,6 +184,10 @@
         left: 15%;
         top: unset;
         bottom: 20px;
+        border-width: 1px;
+        border-radius: 0;
+        border-top-right-radius: 20px;
+        border-bottom-right-radius: 20px;
     }
 
     .modal-profile__info {
@@ -192,13 +200,22 @@
         padding-top: 10px;
         padding-bottom: 15px;
         width: 100%;
-        top: 60px;
         left: 0;
         border: 0;
-        border-bottom: 1px solid var(--nav_border);
+        border-bottom: 1px solid var(--explore_input_bg);
         border-radius: 0;
     }
 
+    .profile__modal.shift-up {
+        top: 0;
+        transition: top 0.25s ease-out;
+    }
+
+    .profile__modal.shift-down {
+        top: 60px;
+        transition: top 0.25s ease-out;
+    }
+
     .theme-btn,
     .notification-btn {
         display: grid;

diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -1,5 +1,5 @@
 import "./profile.css"
-import { useEffect } from "react"
+import React, { useEffect } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { useNavStore } from "../../store/useNavStore"
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
@@ -10,7 +10,11 @@ import { PiBellSimpleFill, PiSignOutBold } from "react-icons/pi"
 import { GoPerson } from "react-icons/go"
 import { FaRegUser } from "react-icons/fa"
 
-const Profile = () => {
+interface ProfileProps {
+    isVisible?: boolean
+}
+
+const Profile: React.FC<ProfileProps> = ({ isVisible }) => {
     const navigate = useNavigate();
     const { expand, setExpand } = useNavStore();
     const { isAuthenticated, setIsAuthenticated, user, setUser, authTab, setAuthTab } = useAuthStore();
@@ -100,25 +104,25 @@ const Profile = () => {
             )}
 
             {expand && (
-                <div className='profile__modal'>
+                <div className={`profile__modal ${isVisible ? 'shift-down' : 'shift-up'}`}>
                     <div className='modal-profile__wrapper'>
                         <div className="profile-wrapper">
-                            <div className='modal-profile__image'>
+                            <Link to={user.username} className='modal-profile__image' onClick={handleToggleMenu}>
                                 {user.avatar ? (
                                     <img src={user.avatar} alt="" loading="lazy" />
                                 ) : (
                                     <FaRegUser style={{ width: '50%', height: '50%' }} />
                                 )}
-                            </div>
+                            </Link>
                             <div className='modal-profile__info'>
-                                <p>{user.first_name} {user.last_name}</p>
-                                <p>{user.username}</p>
+                                <Link to={user.username} onClick={handleToggleMenu}>{user.first_name} {user.last_name}</Link>
+                                <Link to={user.username} onClick={handleToggleMenu}>{user.username}</Link>
                             </div>
                         </div>
                         <ToggleTheme />
                     </div>
                     <Link
-                        to='/'
+                        to={user.username}
                         className='modal-profile-btn'
                         onClick={handleToggleMenu}
                     >

diff --git a/client/src/components/sidebar/right-sidebar.tsx b/client/src/components/sidebar/right-sidebar.tsx
@@ -25,7 +25,7 @@ const RightSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
               <ToggleTheme />
             </div>
 
-            <Profile />
+            <Profile isVisible={isVisible} />
           </div>
         </div>
 

diff --git a/client/src/pages/create-debate/index.tsx b/client/src/pages/create-debate/index.tsx
@@ -6,8 +6,8 @@ import Editor from "./editor"
 import Preview from "./preview"
 
 interface CreateProps {
-    isVisible: boolean;
-    isFullscreen: boolean;
+    isVisible: boolean
+    isFullscreen: boolean
 }
 
 const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) => {

diff --git a/client/src/pages/notifications/style.css b/client/src/pages/notifications/style.css
@@ -5,6 +5,5 @@
 @media screen and (max-width: 480px) {
     #notification {
         padding: 10px;
-        padding-top: 0;
     }
 }
diff --git a/client/src/store/useNavStore.ts b/client/src/store/useNavStore.ts
@@ -6,12 +6,12 @@ export enum Theme {
 }
 
 interface NavStore {
-    theme: Theme;
-    setTheme: (theme_data: Theme) => void;
-    expand: boolean;
-    setExpand: (toggle: boolean) => void;
-    sidebar: boolean;
-    setSidebar: (toggle: boolean) => void;
+    theme: Theme
+    setTheme: (theme_data: Theme) => void
+    expand: boolean
+    setExpand: (toggle: boolean) => void
+    sidebar: boolean
+    setSidebar: (toggle: boolean) => void
 }
 
 export const useNavStore = create<NavStore>((set) => {

diff --git a/client/src/types.ts b/client/src/types.ts
@@ -1,18 +1,18 @@
 export interface RegisterDataProps {
     registerData: {
-        email: string;
-        password: string;
-        avatar: string | File;
-        username: string;
-        first_name: string;
-        last_name: string;
-    };
+        email: string
+        password: string
+        avatar: string | File
+        username: string
+        first_name: string
+        last_name: string
+    }
     setRegisterData: React.Dispatch<React.SetStateAction<{
-        email: string;
-        password: string;
-        avatar: string | File;
-        username: string;
-        first_name: string;
-        last_name: string;
-    }>>;
+        email: string
+        password: string
+        avatar: string | File
+        username: string
+        first_name: string
+        last_name: string
+    }>>
 }