Added commented out Form component using hooks

- demoing how to use useState and function components to keep the code minimal

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

@@ -1,7 +1,67 @@
+// import React, {useState} from 'react';
 import React from 'react';
 import AppContext from '../AppContext';
 import Avatar from './Avatar';
 
+// const Form = (props) => {
+//     const [message, setMessage] = useState('');
+
+//     const getHTML = () => {
+//         // Convert newlines to <br> for now (until we add a real editor)
+//         return message.replace('\n', '<br>');
+//     };
+
+//     const submitForm = async (event) => {
+//         event.preventDefault();
+
+//         if (message.length === 0) {
+//             alert('Please enter a message');
+//             return;
+//         }
+
+//         try {
+//             // Todo: send comment to server
+//             await this.context.onAction('addComment', {
+//                 post_id: this.context.postId,
+//                 status: 'published',
+//                 html: getHTML()
+//             });
+
+//             // Clear message on success
+//             setMessage('');
+//         } catch (e) {
+//             // eslint-disable-next-line no-console
+//             console.error(e);
+//         }
+//     };
+
+//     const handleChange = (event) => {
+//         setMessage(event.target.value);
+//     };
+
+//     return (
+//         <form onSubmit={submitForm} className="comment-form">
+//             <div className="w-full">
+//                 <div className="flex mb-2 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">{this.context.member.name}</h4>
+//                         <h6 className="text-xs text-neutral-400 font-sans">&nbsp;</h6>
+//                     </div>
+//                 </div>
+//                 <div className="-mt-4 ml-14 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-36 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} />
+//                         <div className="absolute bottom-5 right-3">
+//                             <button type="submit" className="w-full rounded-md border p-3 py-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">Add your comment</button>
+//                         </div>
+//                     </div>
+//                 </div>
+//             </div>
+//         </form>
+//     );
+// };
+
 class Form extends React.Component {
     static contextType = AppContext;
 
@@ -75,5 +135,5 @@ class Form extends React.Component {
         );
     }
 }
-  
+
 export default Form;