Post using hooks

2 files changed, 15 insertions, 32 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 32c32d8d..5ace3317 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -10,7 +10,7 @@ import Button from './Button';
 
 import UploadButton from './UploadButton';
 
-export default function MessageInput({ data, rows, children, onSend }) {
+export default function MessageInput({ text, data, rows, children, onSend }) {
     let textareaRef = useRef();
     let fileinput = useRef();
 
@@ -21,6 +21,7 @@ export default function MessageInput({ data, rows, children, onSend }) {
         }
     };
     useEffect(() => {
+        textareaRef.current.value = text;
         updateFocus();
     }, []);
 
diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js
index 3fdb0361..36c3d837 100644
--- a/vnext/src/components/Post.js
+++ b/vnext/src/components/Post.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo, useRef, useState } from 'react';
 
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { UserType } from './Types';
@@ -9,17 +9,9 @@ import MessageInput from './MessageInput';
 
 import { post } from '../api';
 
-export default class Post extends React.Component {
-  constructor(props) {
-    super(props);
-    let params = qs.parse(window.location.search.substring(1));
-    this.state = {
-      attach: '',
-      body: params.body || ''
-    };
-    this.fileinput = React.createRef();
-  }
-  postMessage = (template) => {
+function PostComponent(props) {
+  let params = qs.parse(window.location.search.substring(1));
+  let postMessage = (template) => {
     const { attach, body } = template;
     post(body, attach)
       .then(response => {
@@ -29,28 +21,18 @@ export default class Post extends React.Component {
         }
       }).catch(console.log);
   }
-  attachChanged = (event) => {
-    this.setState({
-      attach: event.target.value
-    });
-  }
-  bodyChanged = (event) => {
-    this.setState({
-      body: event.target.value
-    });
-  }
-  render() {
-    return (
-      <div className="msg-cont">
-        <MessageInput rows="7" text={this.state.body} data={{ mid: 0, timestamp: '0' }} onSend={this.postMessage}>
-          *weather It is very cold today!
+  return (
+    <div className="msg-cont">
+      <MessageInput rows="7" text={params.body || ''} data={{ mid: 0, timestamp: '0' }} onSend={postMessage}>
+        *weather It is very cold today!
           </MessageInput>
-      </div>
-    );
-  }
+    </div>
+  );
 }
 
-Post.propTypes = {
+export default memo(PostComponent);
+
+PostComponent.propTypes = {
   history: ReactRouterPropTypes.history.isRequired,
   visitor: UserType
 };