client: add preview tab

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;
@@ -43,7 +44,7 @@
 
 .sidebar-btn {
     position: absolute;
-    z-index: 2;
+    z-index: 5;
     top: 50%;
     transform: translateY(-50%);
 }
@@ -179,7 +180,7 @@
 
     #main,
     #main.w-full {
-        padding-top: 70px;
+        padding-top: 60px;
         width: 100%;
     }
 
@@ -189,7 +190,6 @@
 
     .debates {
         padding: 10px;
-        padding-top: 0;
         gap: 10px;
     }
 }

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);
     }
 }

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;

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;

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 {

client/src/pages/create-debate/editor.css

@@ -0,0 +1,92 @@
+.e-rte-container {
+    border: none;
+}
+
+.e-richtexteditor {
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 40vh !important;
+    background-color: var(--bg_primary);
+    color: var(--color_primary);
+    border: 1px solid var(--border_color);
+    overflow-x: hidden;
+}
+
+.e-toolbar.e-extended-toolbar {
+    overflow-x: auto;
+}
+
+.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
+.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
+    top: -20px !important;
+}
+
+.e-richtexteditor .e-toolbar-wrapper {
+    z-index: 4 !important;
+    background-color: var(--bg_secondary);
+}
+
+.e-toolbar,
+.e-toolbar .e-toolbar-item.e-overlay,
+.e-toolbar .e-toolbar-items,
+.e-toolbar .e-toolbar-item .e-tbar-btn,
+.e-toolbar.e-extended-toolbar .e-toolbar-pop,
+.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+    background-color: var(--bg_secondary);
+    color: #6c757d;
+}
+
+.e-toolbar .e-toolbar-item.e-separator,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-separator {
+    border-color: var(--color_secondary);
+}
+
+.e-toolbar .e-hor-nav {
+    background: var(--bg_secondary);
+}
+
+.e-toolbar .e-popup-down-icon.e-icons {
+    color: var(--color_primary);
+}
+
+.e-richtexteditor .e-rte-content {
+    z-index: 0 !important;
+    background-color: transparent;
+    color: inherit;
+}
+
+.e-toolbar-wrapper {
+    border-bottom-color: var(--border_color);
+}
+
+.e-richtexteditor .rte-placeholder,
+.e-richtexteditor .e-rte-character-count {
+    color: var(--color_primary);
+}
+
+.e-img-uploadwrap,
+.e-droparea {
+    display: none;
+}
+
+.e-dlg-content {
+    padding-top: 0 !important;
+}
+
+.e-richtexteditor .e-resize-handle.e-south-east {
+    z-index: 0 !important;
+    cursor: ns-resize;
+}
+
+.e-richtexteditor .e-rte-character-count {
+    z-index: 0 !important;
+}
+
+@media screen and (max-width: 480px) {
+
+    .e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
+    .e-richtexteditor .e-toolbar-container.e-rte-tb-float {
+        top: -70px !important;
+    }
+}

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

@@ -1,3 +1,4 @@
+import "./editor.css"
 import {
     RichTextEditorComponent,
     Toolbar,
@@ -13,15 +14,20 @@ import {
     Audio,
     FormatPainter,
     PasteCleanup,
-    Resize,
+    Resize
 } from "@syncfusion/ej2-react-richtexteditor"
 
 interface EditorProps {
     editorRef: React.RefObject<RichTextEditorComponent>
-    rteValue: string
+    rteValue?: string
+    isEditable: boolean
+    setDebateData?: React.Dispatch<React.SetStateAction<{
+        title: string
+        body: string
+    }>>
 }
 
-const Editor: React.FC<EditorProps> = ({ editorRef, rteValue }) => {
+const Editor: React.FC<EditorProps> = ({ editorRef, rteValue, isEditable, setDebateData }) => {
     const items = [
         'Undo',
         'Redo',
@@ -85,13 +91,22 @@ const Editor: React.FC<EditorProps> = ({ editorRef, rteValue }) => {
             id="toolsRTE"
             ref={editorRef}
             value={rteValue}
-            showCharCount={true}
-            toolbarSettings={toolbarSettings}
-            quickToolbarSettings={quickToolbarSettings}
-            enableTabKey={true}
-            enableXhtml={true}
+            showCharCount={isEditable}
+            toolbarSettings={isEditable ? toolbarSettings : undefined}
+            quickToolbarSettings={isEditable ? quickToolbarSettings : undefined}
+            enableTabKey={isEditable}
+            enableXhtml={isEditable}
             placeholder="Your debate body"
-            enableResize={true}
+            enableResize={isEditable}
+            readonly={!isEditable}
+            change={(e: { value: string }) => {
+                if (isEditable && setDebateData) {
+                    setDebateData(prevState => ({
+                        ...prevState,
+                        body: e.value
+                    }));
+                }
+            }}
         >
             <Inject
                 services={[

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

@@ -1,46 +1,78 @@
 import "./style.css"
 import { useRef, useState } from "react"
 import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
-import Editor from "./editor";
+import { toast } from "sonner"
+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 }) => {
     const editorRef = useRef<RichTextEditorComponent>(null);
-    const [editorContent, setEditorContent] = useState<string>('');
+    const [debateData, setDebateData] = useState({ title: '', body: '' });
+    const [isPreview, setIsPreview] = useState<boolean>(false);
 
-    const saveEditorContent = () => {
-        if (editorRef.current) {
-            const content = editorRef.current.value;
-            setEditorContent(content);
+    const handlePreviewToggle = () => {
+        if (!isPreview) {
+            if (editorRef.current) {
+                const content = editorRef.current.getHtml();
+                setDebateData({ ...debateData, body: content });
+            }
         }
-    }; console.log(editorContent);
+
+        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);
+    };
 
     return (
-        <form id='create'>
-            <div className='vertical-space'>
-                <h2>Title</h2>
-                <textarea
-                    className='title__input'
-                    placeholder='Your debate topic'
-                />
-            </div>
-            <div className='vertical-space'>
-                <h2>Body</h2>
-                <Editor
-                    editorRef={editorRef}
-                    rteValue=""
-                />
-            </div>
-            <div className='space' />
+        <div id='create'>
+            <form id='create-debate' className={isPreview ? 'shift-left' : 'shift-right'}>
+                <div className='vertical-space'>
+                    <h2>Title</h2>
+                    <textarea
+                        name='title'
+                        className='title__input'
+                        placeholder='Your debate topic'
+                        value={debateData.title}
+                        onChange={e => setDebateData({ ...debateData, title: e.target.value })}
+                    />
+                </div>
+                <div className='vertical-space'>
+                    <h2>Body</h2>
+                    <Editor
+                        editorRef={editorRef}
+                        isEditable={true}
+                        setDebateData={setDebateData}
+                    />
+                </div>
+            </form>
+
+            <Preview isPreview={isPreview} editorRef={editorRef} debateData={debateData} />
+
             <div className={`debate-btns ${isVisible ? 'reveal' : 'hide'} ${isFullscreen ? 'w-full' : ''}`}>
-                <button type='button' onClick={saveEditorContent}>PREVIEW</button>
-                <button type='submit' onClick={() => { }}>PUBLISH</button>
+                <button
+                    type='button'
+                    onClick={handlePreviewToggle}
+                >
+                    {isPreview ? 'BACK' : 'PREVIEW'}
+                </button>
+                <button type='submit' onClick={() => toast.warning("Currently under development")}>
+                    PUBLISH
+                </button>
             </div>
-        </form>
+        </div>
     );
 }
 

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

@@ -0,0 +1,22 @@
+import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
+import Editor from "./editor"
+
+interface PreviewProps {
+    isPreview: boolean
+    editorRef: React.RefObject<RichTextEditorComponent>
+    debateData: {
+        title: string
+        body: string
+    }
+}
+
+const Preview: React.FC<PreviewProps> = ({ isPreview, editorRef, debateData }) => {
+    return (
+        <div className={`preview ${isPreview ? 'shift-left' : 'shift-right'}`}>
+            <h1>{debateData.title}</h1>
+            <Editor editorRef={editorRef} rteValue={debateData.body} isEditable={false} />
+        </div>
+    );
+};
+
+export default Preview;