client: wip create debate page

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"
@@ -23,7 +23,7 @@ export default function App() {
   const { expand, sidebar, setSidebar } = useNavStore();
 
   useEffect(() => {
-    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light? Theme.Light : Theme.Dark);
+    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light ? Theme.Light : Theme.Dark);
     handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab);
   }, [setRoute, setUser, setIsAuthenticated, setAuthTab]);
 
@@ -65,7 +65,8 @@ export default function App() {
           <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='/create' element={<ProtectedRoute><CreateDebatePage /></ProtectedRoute>} /> */}
+          <Route path='/create' element={<CreateDebatePage />} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />
           <Route path='/open-topics' element={<OpenTopicsPage />} />
           <Route path='/notifications' element={<NotificationPage />} />

client/src/components/sidebar/left-sidebar.css

@@ -32,6 +32,7 @@
 }
 
 #left-sidebar ul {
+    list-style: none;
     max-width: fit-content;
     height: 100%;
     max-height: 100dvh;

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,19 +16,22 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
+  // const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
+  const { isAuthenticated, setAuthTab } = useAuthStore();
   const { sidebar } = useNavStore();
 
-  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);
+  // 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);
   };
 
   return (
@@ -39,7 +42,8 @@ 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, item.name)} className='links__wrapper'> */}
+            <div onClick={() => handleLinkClick(item.href)} className='links__wrapper'>
               <item.icon />
               <p className={`${location.pathname === item.href ? 'name-active' : ''} underline`}>
                 {item.name}

client/src/globals.css

@@ -131,10 +131,6 @@ input {
     font-family: inherit;
 }
 
-ul {
-    list-style: none;
-}
-
 @keyframes shake {
 
     0%,

client/src/pages/create-debate/index.tsx

@@ -1,5 +1,5 @@
 export default function CreateDebatePage() {
     return (
-        <div>Create Debate</div>
+        <div id='create'></div>
     )
 }

client/tsconfig.json

@@ -2,24 +2,32 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}