From 003cdef8096d4687efd044ad2518bf29fa45334a Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Fri, 9 Aug 2024 12:15:53 +0530 Subject: [PATCH 1/3] client: modify nav links --- client/src/ProtectedRoute.tsx | 2 +- client/src/components/card/closed-debate-card.css | 1 + client/src/components/card/open-debate-card.css | 1 + client/src/components/sidebar/explore.tsx | 2 +- client/src/components/sidebar/left-sidebar.css | 12 ++++++++++++ client/src/components/sidebar/left-sidebar.tsx | 4 ++-- .../data/{categories-data.ts => categories.ts} | 0 .../data/{left-sidebar-links.ts => nav-links.ts} | 15 +++++++-------- 8 files changed, 25 insertions(+), 12 deletions(-) rename client/src/data/{categories-data.ts => categories.ts} (100%) rename client/src/data/{left-sidebar-links.ts => nav-links.ts} (75%) diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx index 4bfc9be..73536f7 100644 --- a/client/src/ProtectedRoute.tsx +++ b/client/src/ProtectedRoute.tsx @@ -16,5 +16,5 @@ export const ProtectedRoute: React.FC = ({ children }) => { return } - return <>{children} + return children } \ No newline at end of file diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css index 351bf85..f8a3ffb 100644 --- a/client/src/components/card/closed-debate-card.css +++ b/client/src/components/card/closed-debate-card.css @@ -30,6 +30,7 @@ } #closed-card .left h2 { + width: fit-content; font-size: 22px; font-weight: 600; overflow: hidden; diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css index 0a9ae79..b023d7f 100644 --- a/client/src/components/card/open-debate-card.css +++ b/client/src/components/card/open-debate-card.css @@ -1,4 +1,5 @@ #open-card h2 { + width: fit-content; font-size: 22px; font-weight: 600; overflow: hidden; diff --git a/client/src/components/sidebar/explore.tsx b/client/src/components/sidebar/explore.tsx index 44aa8e1..bfdd7e5 100644 --- a/client/src/components/sidebar/explore.tsx +++ b/client/src/components/sidebar/explore.tsx @@ -2,7 +2,7 @@ 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 { categoriesData } from '../../data/categories' interface ExploreProps { term?: string diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css index a826cdc..a93d562 100644 --- a/client/src/components/sidebar/left-sidebar.css +++ b/client/src/components/sidebar/left-sidebar.css @@ -44,6 +44,10 @@ overflow-y: auto; } +#left-sidebar ul li:nth-child(3) { + display: none; +} + #left-sidebar .links__wrapper { width: fit-content; display: flex; @@ -198,6 +202,14 @@ justify-content: center; } + #left-sidebar ul li:nth-child(3) { + display: flex; + } + + #left-sidebar ul li:last-child { + display: none; + } + #left-sidebar .links__wrapper p { display: none; } diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx index 8d2b2af..70b18d6 100644 --- a/client/src/components/sidebar/left-sidebar.tsx +++ b/client/src/components/sidebar/left-sidebar.tsx @@ -3,7 +3,7 @@ import { useLocation, Link, useNavigate } from 'react-router-dom' import { toast } from 'sonner' import { AuthStatus, AuthTab, useAuthStore } from '../../store/useAuthStore' import { useNavStore } from '../../store/useNavStore' -import { leftSidebarLinks } from '../../data/left-sidebar-links' +import { navLinks } from '../../data/nav-links' import Profile from './profile' import { GoPerson } from 'react-icons/go' import LoadingSkeleton from '../loading/skeleton' @@ -37,7 +37,7 @@ const LeftSidebar: React.FC = ({ isVisible }) => {
    - {leftSidebarLinks.map(item => ( + {navLinks.map(item => (
  • handleLinkClick(item.href, item.name)} className='links__wrapper'> diff --git a/client/src/data/categories-data.ts b/client/src/data/categories.ts similarity index 100% rename from client/src/data/categories-data.ts rename to client/src/data/categories.ts diff --git a/client/src/data/left-sidebar-links.ts b/client/src/data/nav-links.ts similarity index 75% rename from client/src/data/left-sidebar-links.ts rename to client/src/data/nav-links.ts index 92d8737..fbd2865 100644 --- a/client/src/data/left-sidebar-links.ts +++ b/client/src/data/nav-links.ts @@ -2,9 +2,8 @@ import { RiHome2Fill, RiFireFill } from 'react-icons/ri' import { FaFeather } from 'react-icons/fa6' import { IoSearch } from 'react-icons/io5' import { IoMdCreate } from 'react-icons/io' -// import { PiBellSimpleFill } from 'react-icons/pi' -export const leftSidebarLinks = [ +export const navLinks = [ { id: 1, name: 'Home', @@ -35,10 +34,10 @@ export const leftSidebarLinks = [ href: '/open-topics', icon: FaFeather }, - // { - // id: 6, - // name: 'Notifications', - // href: '/notifications', - // icon: PiBellSimpleFill - // } + { + id: 6, + name: 'Create Debate', + href: '/create', + icon: IoMdCreate + } ] \ No newline at end of file From 2610d38684dc38ac165601a6c460778622cce299 Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Sat, 10 Aug 2024 10:14:52 +0530 Subject: [PATCH 2/3] client: remove claim username --- client/src/components/card/claim-username.css | 127 ------------------ client/src/components/card/claim-username.tsx | 90 ------------- 2 files changed, 217 deletions(-) delete mode 100644 client/src/components/card/claim-username.css delete mode 100644 client/src/components/card/claim-username.tsx diff --git a/client/src/components/card/claim-username.css b/client/src/components/card/claim-username.css deleted file mode 100644 index 44cd354..0000000 --- a/client/src/components/card/claim-username.css +++ /dev/null @@ -1,127 +0,0 @@ -:root { - --claim-border: #E5E4E2; - --username-bg: #E5E4E2; - --username-color: #000; - --username-input-bg: #F9F9F9; - --username-input-color: #000; - --submit-bg: #F9F9F9; -} - -[data-theme='dark'] { - --claim-border: #212122; - --username-bg: #212122; - --username-color: #FFF; - --username-input-bg: #0A0A0A; - --username-input-color: #fff; - --submit-bg: #0A0A0A; -} - -#claim-username { - margin-right: 5px; - display: flex; - flex-direction: column; - gap: 10px; -} - -#claim-username.hide { - display: none; -} - -#claim-username p:first-child { - width: fit-content; - background-size: 200% 100%; - background: linear-gradient(to right, var(--shine_text_primary) 0, var(--shine_text_secondary) 10%, var(--shine_text_tertiary) 20%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - animation: shine-get_started 7.5s infinite linear; - font-weight: 600; - font-size: 25px; -} - -@keyframes shine-get_started { - 0% { - background-position: 0; - } - - 100% { - background-position: 140.467px; - } -} - -#claim-username .username-input { - width: 100%; - height: 50px; - display: flex; - background-color: var(--username-bg); - border: 3px solid; - box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; - color: var(--claim-border); -} - -#claim-username .username-input .domain { - padding: 0 20px; - height: 100%; - display: flex; - align-items: center; - color: var(--username-color); - font-weight: 600; -} - -#claim-username .username-input input { - padding: 0 20px; - width: 100%; - font-size: 16px; - background-color: var(--username-input-bg); - color: var(--username-input-color); -} - -#claim-username .submit-btn { - position: relative; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - gap: 5px; - font-size: 16px; - font-weight: 600; - letter-spacing: 1px; - background-color: var(--submit-bg); - border: 3px solid; - box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; - color: var(--claim-border); -} - -#claim-username .submit-btn:active { - box-shadow: 0px 0px 0px 0px; - top: 5px; - left: 5px; -} - -#claim-username .submit-btn span { - color: var(--username-color); -} - -#claim-username .submit-btn svg { - color: var(--username-color); -} - -@media screen and (max-width: 1024px) { - #claim-username.hide { - display: inherit; - } -} - -@media screen and (max-width: 480px) { - #claim-username { - margin-bottom: 5px; - } - - #claim-username .username-input .domain { - padding: 0 10px; - } - - #claim-username .username-input input { - padding: 0 10px; - } -} \ No newline at end of file diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx deleted file mode 100644 index 8272184..0000000 --- a/client/src/components/card/claim-username.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import './claim-username.css' -import { useCallback, useState } from 'react' -import { AuthTab, useAuthStore } from '../../store/useAuthStore' -import { toast } from 'sonner' -import { PiArrowUpRightBold } from 'react-icons/pi' -import { LoadingSVG } from '../loading/svg' -import { useNavStore } from '../../store/useNavStore' -import { usernameRegex } from '../../data/regex' - -const ClaimUsername = () => { - const { setAuthTab } = useAuthStore() - const { sidebar } = useNavStore() - - const [isSubmitted, setIsSubmitted] = useState(false) - const [username, setUsername] = useState(localStorage.getItem('username') || '') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState({ type: '', content: '' }) - - const handleKeyPress = useCallback((e: React.KeyboardEvent) => { - if (e.key === ' ') e.preventDefault() - }, []) - - const handleUsernameChange = (e: React.ChangeEvent) => { - const inputUsername = e.target.value - setUsername(inputUsername) - - if (inputUsername) { - if (!usernameRegex.test(inputUsername)) { - setMessage({ type: 'error', content: 'Username can only contain alphanumeric characters, underscores (_) and hyphens (-). No spaces or other special characters are allowed.' }) - } else setMessage({ type: '', content: '' }) - } - } - - const handleUsernameSubmit = async (e: React.FormEvent) => { - e.preventDefault() - setIsSubmitted(true) - setTimeout(() => setIsSubmitted(false), 500) - - if (username && message.type !== 'error') { - setLoading(true) - - await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/check-username`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ username }) - }) - .then(res => res.json()) - .then(response => { - if (response.success) { - localStorage.setItem('username', username) - setAuthTab(AuthTab.Signup) - setMessage({ type: 'success', content: response.message }) - toast.success('Register your account to claim username') - } else setMessage({ type: 'error', content: response.message }) - }) - .catch(() => setMessage({ type: 'error', content: 'Something went wrong. Try again later!' })) - .finally(() => setLoading(false)) - } - } - - return ( -
    -

    Get Started

    -
    - debateme.app/ - -
    - - {message.content &&

    {message.content}

    } -
    - ) -} - -export default ClaimUsername \ No newline at end of file From 033d49eead36e3b9ea9aaa39f761a59a01c0c619 Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Sun, 11 Aug 2024 12:20:04 +0530 Subject: [PATCH 3/3] client: add search input for full screen --- .../src/components/sidebar/left-sidebar.css | 1 - client/src/pages/search/index.tsx | 9 +++++-- client/src/pages/search/style.css | 26 ++++++++++++++----- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css index a93d562..19704fd 100644 --- a/client/src/components/sidebar/left-sidebar.css +++ b/client/src/components/sidebar/left-sidebar.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; align-items: center; - justify-content: space-between; } #left-sidebar.open { diff --git a/client/src/pages/search/index.tsx b/client/src/pages/search/index.tsx index 8913c95..e6b63f5 100644 --- a/client/src/pages/search/index.tsx +++ b/client/src/pages/search/index.tsx @@ -1,6 +1,7 @@ import './style.css' import { useState, useEffect } from 'react' import { useLocation, useNavigate } from 'react-router-dom' +import { useNavStore } from '../../store/useNavStore' import Explore from '../../components/sidebar/explore' import { IoMdClose } from 'react-icons/io' import { PiArrowBendUpRightBold } from 'react-icons/pi' @@ -9,6 +10,8 @@ export default function SearchPage() { const location = useLocation() const navigate = useNavigate() + const { sidebar } = useNavStore() + const [searchTerm, setSearchTerm] = useState('') useEffect(() => { @@ -25,7 +28,9 @@ export default function SearchPage() { return (