MessageInput using hooks

1 files changed, 51 insertions, 67 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index d2b6ad7b..bd80d1ea 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import { useFormState } from 'react-use-form-state';
+
 import { MessageType } from './Types';
 
 import Icon from './Icon';
@@ -8,81 +10,63 @@ import Button from './Button';
 
 import UploadButton from './UploadButton';
 
-export default class MessageInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.textarea = React.createRef();
-        this.fileinput = React.createRef();
-        this.state = {
-            isActive: false,
-            mid: this.props.data.mid,
-            rid: this.props.data.rid || 0,
-            to: this.props.data.to || {},
-            body: this.props.text || '',
-            attach: ''
-        };
-    }
+export default function MessageInput({ data, rows, children, onSend }) {
+    let textareaRef = useRef();
+    let fileinput = useRef();
 
-    handleCtrlEnter = (event) => {
-        if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
-            this.onSubmit({});
-        }
-    }
-
-    onSubmit = (event) => {
-        if (event.preventDefault) {
-            event.preventDefault();
-        }
-        const input = this.fileinput.current;
-        this.props.onSend({
-            mid: this.state.mid,
-            rid: this.state.rid,
-            body: this.state.body,
-            attach: this.state.attach ? input.files[0] : '',
-            to: this.state.to
-        });
-        this.setState({
-            body: '',
-            attach: ''
-        });
-        this.textarea.current.style.height = '';
-    }
-
-    componentDidMount() {
+    useEffect(() => {
         const isDesktop = window.matchMedia('(min-width: 62.5rem)');
         if (isDesktop.matches) {
-            this.textarea.current.focus();
+            textareaRef.current.focus();
         }
-    }
-    textChanged = (event) => {
-        this.setState({
-            body: event.target.value
-        });
-        const el = this.textarea.current;
+    }, []);
+
+    let handleCtrlEnter = (event) => {
+        if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
+            onSubmit({});
+        }
+    };
+    let textChanged = (event) => {
+        const el = textareaRef.current;
         const offset = el.offsetHeight - el.clientHeight;
         const height = el.scrollHeight + offset;
         el.style.height = `${height + offset}px`;
-    }
-    uploadValueChanged = (attach) => {
-        this.setState({
-            attach: attach
+    };
+    const [attach, setAttach] = useState('');
+    const [formState, { textarea }] = useFormState();
+    let uploadValueChanged = (attach) => {
+        setAttach(attach);
+    };
+    let onSubmit = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        const input = fileinput.current;
+        onSend({
+            mid: data.mid,
+            rid: data.rid || 0,
+            body: formState.values.body,
+            attach: attach ? input.files[0] : '',
+            to: data.to || {}
         });
-    }
-    render() {
-        return (
-            <form className="msg-comment-target" style={{padding: '12px'}}>
-                <div style={commentStyle}>
-                    <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
-                        ref={this.textarea} style={textInputStyle} value={this.state.body}
-                        rows={this.props.rows || '1'} placeholder={this.props.children} />
-                    <div style={inputBarStyle}>
-                        <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} />
-                        <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
-                    </div>
+        setAttach('');
+        formState.values.body = '';
+        textareaRef.current.value = '';
+        textareaRef.current.style.height = '';
+    };
+    return (
+        <form className="msg-comment-target" style={{ padding: '12px' }} onSubmit={onSubmit}>
+            <div style={commentStyle}>
+                <textarea onChange={textChanged} onKeyPress={handleCtrlEnter}
+                    ref={textareaRef} style={textInputStyle} value={formState.values.body}
+                    rows={rows || '1'} placeholder={children} {...textarea('body')} />
+                <div style={inputBarStyle}>
+                    <UploadButton inputRef={fileinput} value={attach} onChange={uploadValueChanged} />
+                    <Button onClick={onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
                 </div>
-            </form>
-        );
-    }
+            </div>
+        </form>
+    );
 }
 
 const commentStyle = {