From 405c98113139224eb0f57d771d3ff59e8fe25410 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Thu, 7 Jul 2022 09:41:59 +0200
Subject: [PATCH] Moved to modern React syntax for EditForm

---
 apps/comments-ui/src/components/AddForm.js  |  2 +-
 apps/comments-ui/src/components/Comment.js  |  4 +-
 apps/comments-ui/src/components/EditForm.js | 79 ++++++++-------------
 3 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 5968048c36..b31aa14201 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -79,7 +79,7 @@ const AddForm = (props) => {
                         </button>
                         <button
                             className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
-                            disabled="true">
+                            disabled={true}>
                             Comment
                         </button>
                     </div>
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index ecea69ea6f..381908cbca 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -53,7 +53,7 @@ class Comment extends React.Component {
 
         if (this.state.isInEditMode) {
             return (
-                <EditForm value={html} comment={comment} toggle={this.toggleEditMode} />
+                <EditForm comment={comment} toggle={this.toggleEditMode} />
             );
         } else {
             return (
@@ -86,4 +86,4 @@ class Comment extends React.Component {
     }
 }
 
-export default Comment;
\ No newline at end of file
+export default Comment;
diff --git a/apps/comments-ui/src/components/EditForm.js b/apps/comments-ui/src/components/EditForm.js
index 2f99f68755..185e817085 100644
--- a/apps/comments-ui/src/components/EditForm.js
+++ b/apps/comments-ui/src/components/EditForm.js
@@ -1,64 +1,45 @@
 import {formatRelativeTime} from '../utils/helpers';
-import React from 'react';
-import AppContext from '../AppContext';
+import React, {useState} from 'react';
 import Avatar from './Avatar';
 
-class EditForm extends React.Component {
-    static contextType = AppContext;
+const EditForm = (props) => {
+    // todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
+    const [message, setMessage] = useState(props.comment.html);
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            message: props.value.__html
-        };
-
-        this.submitForm = this.submitForm.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    getHTML() {
-        const text = this.state.message;
-
-        // Convert newlines to <br> for now (until we add a real editor)
-        return text.replace('\n', '<br>');
-    }
-
-    async submitForm(event) {
+    const submitForm = async (event) => {
         event.preventDefault();
         
         return false;
-    }
+    };
 
-    handleChange(event) {
-        this.setState({message: event.target.value});
-    }
+    const handleChange = (event) => {
+        setMessage(event.target.value);
+    };
 
-    render() {
-        const comment = this.props.comment;
+    const comment = props.comment;
 
-        return (
-            <form onSubmit={this.submitForm} className="comment-form mb-14">
-                <div className="w-full">
-                    <div className="flex mb-4 space-x-4 justify-start items-center">
-                        <Avatar />
-                        <div>
-                            <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
-                            <h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
-                        </div>
+    return (
+        <form onSubmit={submitForm} className="comment-form mb-14">
+            <div className="w-full">
+                <div className="flex mb-4 space-x-4 justify-start items-center">
+                    <Avatar />
+                    <div>
+                        <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
+                        <h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
                     </div>
-                    <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
-                        <div className="relative w-full">
-                            <textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} autofocus="true" />
-                            <div className="flex flex-start">
-                                <button type="submit" className="rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
-                                <button className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={this.props.toggle}>Cancel</button>
-                            </div>
+                </div>
+                <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
+                    <div className="relative w-full">
+                        <textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={message} onChange={handleChange} autoFocus={true} />
+                        <div className="flex flex-start">
+                            <button type="submit" className="rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
+                            <button className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
                         </div>
                     </div>
                 </div>
-            </form>
-        );
-    }
-}
-  
+            </div>
+        </form>
+    );
+};
+
 export default EditForm;