Webclient: Handle firing an event once (#4499)

* draft: handle firing an event once

* lint

* Prevent rapid double-click on sending messages

* no rest spread on single primative when sibling components exist

* clear message instead of using a fireOnce handler.

* fix tests

* remove unnecessary validate mock

webclient/src/containers/Room/SayMessage.tsx

@@ -1,18 +1,24 @@
-// eslint-disable-next-line
-import React from "react";
-import { connect } from 'react-redux';
-import { Form, reduxForm } from 'redux-form'
+import React from 'react';
+import { Form } from 'react-final-form'
 
 import { InputAction } from 'components';
 
-const SayMessage = ({ handleSubmit }) => (
-  <Form onSubmit={handleSubmit}>
-    <InputAction action="Send" label="Chat" name="message" />
-  </Form>
-);
+const required = (value) => (value ? undefined : 'Required');
 
-const propsMap = {
-  form: 'sayMessage'
-};
+const SayMessage = (props) => {
+  const { onSubmit } = props
+  return (
+    <Form onSubmit={values => onSubmit(values)}>
+      {({ handleSubmit, form }) => (
+        <form onSubmit={e => {
+          handleSubmit(e)
+          form.restart()
+        }}>
+          <InputAction action="Send" label="Chat" name="message" validate={required}/>
+        </form>
+      )}
+    </Form>
+  );
+}
 
-export default connect()(reduxForm(propsMap)(SayMessage));
+export default SayMessage;