client: add validation, modify ui

Casuals4Fun · Jul 14, 2024 · bf7bf84 · bf7bf84
1 parent fe3f341
commit bf7bf84
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 43 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -16,13 +16,14 @@
 }
 
 #right-sidebar {
-    max-height: 100dvh;
+    /* max-height: 100dvh; */
+    max-height: 100svh;
 }
 
 #main {
-    /* padding: 20px; */
     width: 40%;
-    height: 100dvh;
+    /* height: 100dvh; */
+    height: 100svh;
     overflow-y: auto;
     --dot-bg: var(--body_background);
     --dot-color: #4C4E52;

diff --git a/client/src/components/loading/style.css b/client/src/components/loading/style.css
@@ -14,7 +14,8 @@
 }
 
 .loading-component {
-    height: calc(100dvh - 40px);
+    /* height: calc(100dvh - 40px); */
+    height: calc(100svh - 40px);
     display: grid;
     place-items: center;
 }
@@ -46,6 +47,7 @@
 
 @media screen and (max-width: 480px) {
     .loading-component {
-        height: calc(100dvh - 150px);
+        /* height: calc(100dvh - 150px); */
+        height: calc(100svh - 150px);
     }
 }
diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -4,7 +4,8 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 100dvh;
+    /* height: 100dvh; */
+    height: 100svh;
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;

diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -35,7 +35,8 @@
     list-style: none;
     max-width: fit-content;
     height: 100%;
-    max-height: 100dvh;
+    /* max-height: 100dvh; */
+    max-height: 100svh;
     margin: 0 auto;
     display: flex;
     flex-direction: column;

diff --git a/client/src/components/sidebar/right-sidebar.css b/client/src/components/sidebar/right-sidebar.css
@@ -154,7 +154,8 @@
 
     #right-sidebar .expand-menu__background.expand {
         z-index: 1;
-        height: 100dvh;
+        /* height: 100dvh; */
+        height: 100svh;
     }
 
     .right-sidebar__container {

diff --git a/client/src/pages/create-debate/editor.tsx b/client/src/pages/create-debate/editor.tsx
@@ -22,8 +22,8 @@ interface EditorProps {
     rteValue?: string
     isEditable: boolean
     setDebateData?: React.Dispatch<React.SetStateAction<{
-        title: string;
-        body: string;
+        title: string
+        body: string
     }>>
 }
 

diff --git a/client/src/pages/create-debate/index.tsx b/client/src/pages/create-debate/index.tsx
@@ -1,8 +1,9 @@
-import "./style.css";
-import { useRef, useState } from "react";
-import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";
-import Editor from "./editor";
-import Preview from "./preview";
+import "./style.css"
+import { useRef, useState } from "react"
+import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
+import { toast } from "sonner"
+import Editor from "./editor"
+import Preview from "./preview"
 
 interface CreateProps {
     isVisible: boolean;
@@ -11,7 +12,7 @@ interface CreateProps {
 
 const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) => {
     const editorRef = useRef<RichTextEditorComponent>(null);
-    const [debateData, setDebateData] = useState({ title: 'Sony is the best camera of all time', body: '' });
+    const [debateData, setDebateData] = useState({ title: '', body: '' });
     const [isPreview, setIsPreview] = useState<boolean>(false);
 
     const handlePreviewToggle = () => {
@@ -21,6 +22,17 @@ const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) =>
                 setDebateData({ ...debateData, body: content });
             }
         }
+
+        if (!debateData.title.trim()) return toast.warning("Enter debate title");
+
+        const tempDiv = document.createElement("div");
+        tempDiv.innerHTML = editorRef.current?.value || '';
+        const bodyText = tempDiv.textContent?.replace(/\u200B/g, '').trim();
+
+        if (!bodyText || bodyText === '<br>' || bodyText === '<br><br>' || bodyText === '<br><br><br>') {
+            return toast.warning("Enter debate body");
+        }
+
         setIsPreview(!isPreview);
     };
 
@@ -45,7 +57,6 @@ const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) =>
                         setDebateData={setDebateData}
                     />
                 </div>
-                <div className='space' />
             </form>
 
             <Preview isPreview={isPreview} editorRef={editorRef} debateData={debateData} />
@@ -57,7 +68,9 @@ const CreateDebatePage: React.FC<CreateProps> = ({ isVisible, isFullscreen }) =>
                 >
                     {isPreview ? 'BACK' : 'PREVIEW'}
                 </button>
-                <button type='submit' onClick={() => { }}>PUBLISH</button>
+                <button type='submit' onClick={() => toast.warning("Currently under development")}>
+                    PUBLISH
+                </button>
             </div>
         </div>
     );

diff --git a/client/src/pages/create-debate/preview.tsx b/client/src/pages/create-debate/preview.tsx
@@ -2,17 +2,15 @@ import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
 import Editor from "./editor"
 
 interface PreviewProps {
-    isPreview: boolean;
-    editorRef: React.RefObject<RichTextEditorComponent>;
+    isPreview: boolean
+    editorRef: React.RefObject<RichTextEditorComponent>
     debateData: {
-        title: string;
-        body: string;
-    };
+        title: string
+        body: string
+    }
 }
 
 const Preview: React.FC<PreviewProps> = ({ isPreview, editorRef, debateData }) => {
-    console.log(debateData.body)
-
     return (
         <div className={`preview ${isPreview ? 'shift-left' : 'shift-right'}`}>
             <h1>{debateData.title}</h1>

diff --git a/client/src/pages/create-debate/style.css b/client/src/pages/create-debate/style.css
@@ -16,13 +16,12 @@
 
 #create {
     position: relative;
-    height: fit-content;
     overflow: hidden;
 }
 
 #create-debate {
     padding: 20px 0;
-    height: calc(100dvh - 83px);
+    height: calc(100svh - 82px);
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -33,14 +32,14 @@
     position: relative;
     top: 0;
     left: -100%;
-    transition: left 500ms ease-in-out;
+    transition: left 250ms ease-in-out;
 }
 
 #create-debate.shift-right {
     position: relative;
     top: 0;
     left: 0;
-    transition: left 500ms ease-in-out;
+    transition: left 250ms ease-in-out;
 }
 
 .preview {
@@ -59,12 +58,12 @@
 
 .preview.shift-left {
     left: 0;
-    transition: left 500ms ease-in-out;
+    transition: left 250ms ease-in-out;
 }
 
 .preview.shift-right {
     left: 100%;
-    transition: left 500ms ease-in-out;
+    transition: left 250ms ease-in-out;
 }
 
 #create h1 {
@@ -123,11 +122,6 @@
     transition: background-color 0.2s ease-in-out;
 }
 
-.space {
-    width: 100%;
-    height: 50px;
-}
-
 .preview #toolsRTE_toolbar_wrapper {
     display: none;
 }
@@ -176,7 +170,7 @@
 @media screen and (max-width: 480px) {
     #create-debate {
         padding: 10px 0;
-        height: calc(100dvh - 120px - 62px);
+        height: calc(100svh - 120px - 62px);
     }
 
     #create-debate .vertical-space {
@@ -198,10 +192,6 @@
         transition: bottom 0.4s ease-out;
     }
 
-    .space {
-        height: 30px;
-    }
-
     .preview {
         padding: 10px;
         gap: 10px;

diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import "./style.css"
 import { AuthStatus, useAuthStore } from "../../store/useAuthStore"
-import { useNavStore } from "../../store/useNavStore";
-import ClaimUsername from "../../components/card/claim-username";
+import { useNavStore } from "../../store/useNavStore"
+import ClaimUsername from "../../components/card/claim-username"
 import { ClosedDebateCard } from "../../components/card/closed-debate-card"
 import { OpenDebateCard } from "../../components/card/open-debate-card"