Refactored edit form down into base form, still needs fixes

apps/comments-ui/src/components/Comment.js

@@ -4,9 +4,8 @@ import Avatar from './Avatar';
 import Like from './Like';
 import Reply from './Reply';
 import More from './More';
-import EditForm from './EditForm';
-import Replies from './Replies';
 import Form from './Form';
+import Replies from './Replies';
 import AppContext from '../AppContext';
 import {formatRelativeTime} from '../utils/helpers';
 
@@ -38,7 +37,7 @@ const Comment = (props) => {
 
     if (isInEditMode) {
         return (
-            <EditForm comment={comment} toggle={toggleEditMode} parent={props.parent} />
+            <Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
         );
     } else {
         return (

apps/comments-ui/src/components/EditForm.js

@@ -1,68 +0,0 @@
-import React, {useContext} from 'react';
-import Avatar from './Avatar';
-import AppContext from '../AppContext';
-import {useEditor, EditorContent} from '@tiptap/react';
-import {getEditorConfig} from '../utils/editor';
-
-const EditForm = (props) => {
-    // todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
-    const {dispatchAction} = useContext(AppContext);
-
-    const editor = useEditor({
-        ...getEditorConfig({
-            placeholder: 'Edit comment',
-            autofocus: true,
-            content: props.comment.html
-        })
-    });
-
-    const submitForm = async (event) => {
-        event.preventDefault();
-
-        await dispatchAction('editComment', {
-            comment: {
-                id: props.comment.id,
-                html: editor.getHTML()
-            },
-            parent: props.parent
-        });
-
-        props.toggle();
-        
-        return false;
-    };
-
-    const comment = props.comment;
-
-    return (
-        <form className={`comment-form transition duration-200 bg-white dark:bg-[rgba(255,255,255,0.08)] rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 -mt-[13px] mb-10 shadow-lg dark:shadow-transparent hover:shadow-xl`}>
-            <div>
-                <div className="flex justify-start items-center">
-                    <Avatar saturation={props.avatarSaturation} />
-                    <div className="ml-3">
-                        <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name ? comment.member.name : 'Anonymous'}</h4>
-                    </div>
-                </div>
-                <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
-                    <div className="relative w-full">
-                        <EditorContent
-                            className={`w-full h-40 pl-[56px] border-none resize-none p-0 font-sans text-[16.5px] mb-1 leading-normal placeholder:text-neutral-300 focus:outline-0 bg-transparent dark:placeholder:text-[rgba(255,255,255,0.3)] dark:border-none dark:text-[rgba(255,255,255,0.9)] dark:shadow-transparent`}
-                            editor={editor} 
-                        />
-                        <div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
-                            <button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
-                            <button
-                                className={`rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
-                                type="button"
-                                onClick={submitForm}>
-                                Edit comment
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    );
-};
-
-export default EditForm;

apps/comments-ui/src/components/Form.js

@@ -8,18 +8,27 @@ import {getEditorConfig} from '../utils/editor';
 const Form = (props) => {
     const {member, postId, dispatchAction, onAction} = useContext(AppContext);
 
-    const editorAddConfig = {
+    let config;
-        placeholder: 'Join the discussion',
+    if (props.isReply) {
-        autofocus: false
+        config = {
-    };
+            placeholder: 'Reply to comment',
-
+            autofocus: false
-    const editorReplyConfig = {
+        };
-        placeholder: 'Reply to comment',
+    } else if (props.isEdit) {
-        autofocus: false
+        config = {
-    };
+            placeholder: 'Edit this comment',
+            autofocus: true,
+            content: props.comment.html
+        };
+    } else {
+        config = {
+            placeholder: 'Join the discussion',
+            autofocus: false
+        };
+    }
 
     const editor = useEditor({
-        ...getEditorConfig(props.isReply ? editorReplyConfig : editorAddConfig)
+        ...getEditorConfig(config)
     });
 
     const focused = editor?.isFocused || !editor?.isEmpty;
@@ -50,6 +59,17 @@ const Form = (props) => {
                 // eslint-disable-next-line no-console
                 console.error(e);
             }
+        } else if (props.isEdit) {
+            // Send comment to server
+            await dispatchAction('editComment', {
+                comment: {
+                    id: props.comment.id,
+                    html: editor.getHTML()
+                },
+                parent: props.parent
+            });
+            
+            props.toggle();
         } else {
             try {
                 // Send comment to server
@@ -66,12 +86,26 @@ const Form = (props) => {
                 console.error(e);
             }
         }
+
+        return false;
     };
 
     const focusEditor = (event) => {
         editor.commands.focus();
     };
 
+    const comment = props.comment;
+    const memberName = (props.isEdit ? comment.member.name : member.name); 
+
+    let submitText;
+    if (props.isReply) {
+        submitText = 'Add reply';
+    } else if (props.isEdit) {
+        submitText = 'Edit comment';
+    } else {
+        submitText = 'Add comment';
+    }
+
     return (
         <form onClick={focusEditor} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 ${props.commentsCount && '-ml-[13px] -mr-3'} mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
             <div className="w-full relative">
@@ -81,13 +115,16 @@ const Form = (props) => {
                             className={`transition-[min-height] pl-[56px] px-0 py-[14px] ${focused ? 'pt-[48px] pb-[68px]' : 'mb-1'} duration-150 bg-transparent w-full placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)] border-none resize-none rounded-md border border-slate-50 font-sans text-[16.5px] leading-normal focus:outline-0 dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text min-h-[144px]' : 'cursor-pointer overflow-hidden min-h-[56px] hover:border-slate-300'}`}
                             editor={editor} 
                         />
-                        <button
+                        <div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
-                            className={`transition-[opacity] duration-150 absolute -right-[9px] bottom-[4px] rounded-[4px] border py-3 px-4 font-sans text-sm text-center bg-neutral-900 font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
+                            {props.isEdit && <button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>}
-                            type="button"
+                            <button
-                            onClick={submitForm}
+                                className={`transition-[opacity] duration-150 rounded-[4px] border py-3 px-4 font-sans text-sm text-center bg-neutral-900 font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
-                        >
+                                type="button"
-                            Add {props.isReply ? 'reply' : 'comment'} 
+                                onClick={submitForm}
-                        </button>
+                            >
+                                {submitText}
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div className="flex mb-1 justify-start items-center absolute top-[4px] left-0">
@@ -102,7 +139,7 @@ const Form = (props) => {
                         leaveTo="opacity-0"
                     >
                         <div className="ml-3">
-                            <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{member.name ? member.name : 'Anonymous'}</h4>
+                            <h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
                         </div>
                     </Transition>
                 </div>