client: add preview tab

client/src/App.css

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

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

@@ -50,10 +50,6 @@
     color: var(--color_primary);
 }
 
-.e-richtexteditor .e-rte-content .e-content {
-    min-height: 40vh;
-}
-
 .e-richtexteditor .e-rte-content {
     z-index: 0 !important;
     background-color: transparent;

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

@@ -19,10 +19,15 @@ import {
 
 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',
@@ -86,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,65 @@
-import "./style.css"
-import { useRef, useState } from "react"
-import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor"
+import "./style.css";
+import { useRef, useState } from "react";
+import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";
 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: 'Sony is the best camera of all time', 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);
+        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>
+                <div className='space' />
+            </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='button'
+                    onClick={handlePreviewToggle}
+                >
+                    {isPreview ? 'BACK' : 'PREVIEW'}
+                </button>
                 <button type='submit' onClick={() => { }}>PUBLISH</button>
             </div>
-        </form>
+        </div>
     );
 }
 

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

@@ -0,0 +1,24 @@
+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 }) => {
+    console.log(debateData.body)
+
+    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;

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

@@ -15,20 +15,68 @@
 }
 
 #create {
+    position: relative;
+    height: fit-content;
+    overflow: hidden;
+}
+
+#create-debate {
     padding: 20px 0;
+    height: calc(100dvh - 83px);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+}
+
+#create-debate.shift-left {
     position: relative;
-    min-height: calc(100dvh - 40px);
+    top: 0;
+    left: -100%;
+    transition: left 500ms ease-in-out;
+}
+
+#create-debate.shift-right {
+    position: relative;
+    top: 0;
+    left: 0;
+    transition: left 500ms ease-in-out;
+}
+
+.preview {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    padding: 20px;
+    background-color: var(--body_background);
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     gap: 20px;
+    overflow-y: auto;
+}
+
+.preview.shift-left {
+    left: 0;
+    transition: left 500ms ease-in-out;
+}
+
+.preview.shift-right {
+    left: 100%;
+    transition: left 500ms ease-in-out;
+}
+
+#create h1 {
+    font-size: 30px;
+    font-weight: 600;
 }
 
-#create h1,
 #create h2 {
-    font-weight: 500;
+    font-weight: 600;
 }
 
-#create .title__input {
+#create-debate .title__input {
     min-height: 56px;
     resize: vertical;
     padding: 5px 10px;
@@ -41,7 +89,7 @@
     outline: none;
 }
 
-#create .vertical-space {
+#create-debate .vertical-space {
     padding: 0 20px;
     display: flex;
     flex-direction: column;
@@ -62,7 +110,8 @@
 }
 
 .debate-btns button {
-    padding: 8px 20px;
+    padding: 8px 0;
+    width: 125px;
     background-color: var(--bg_secondary);
     font-size: 18px;
     border: 1px solid var(--explore_input_bg);
@@ -76,7 +125,28 @@
 
 .space {
     width: 100%;
-    height: 63px;
+    height: 50px;
+}
+
+.preview #toolsRTE_toolbar_wrapper {
+    display: none;
+}
+
+.preview .e-richtexteditor,
+.preview .e-richtexteditor .e-rte-content .e-content {
+    min-height: fit-content !important;
+    height: fit-content !important;
+    background-color: var(--body_background);
+    border: none;
+}
+
+.preview .e-richtexteditor .e-rte-content {
+    transition: none;
+}
+
+.preview .e-richtexteditor .e-rte-content .e-content {
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 @media screen and (min-width: 1921px) {
@@ -104,12 +174,12 @@
 }
 
 @media screen and (max-width: 480px) {
-    #create {
-        padding: 0;
-        min-height: calc(100dvh - 140px);
+    #create-debate {
+        padding: 10px 0;
+        height: calc(100dvh - 120px - 62px);
     }
 
-    #create .vertical-space {
+    #create-debate .vertical-space {
         padding: 0 10px;
     }
 
@@ -129,6 +199,11 @@
     }
 
     .space {
-        height: 53px;
+        height: 30px;
+    }
+
+    .preview {
+        padding: 10px;
+        gap: 10px;
     }
 }

client/src/pages/search/style.css

@@ -54,7 +54,6 @@
 @media screen and (max-width: 480px) {
     #search {
         padding: 10px;
-        padding-top: 0;
     }
 
     #search #explore {