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/Room.tsx

@@ -1,5 +1,4 @@
-// eslint-disable-next-line
-import React, { Component } from "react";
+import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter, generatePath } from 'react-router-dom';
 
@@ -8,7 +7,7 @@ import Paper from '@material-ui/core/Paper';
 
 import { RoomsService } from 'api';
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from 'components';
-import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors } from 'store';
+import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors, RoomsTypes } from 'store';
 import { RouteEnum } from 'types';
 
 import OpenGames from './OpenGames';
@@ -18,86 +17,73 @@ import SayMessage from './SayMessage';
 import './Room.css';
 
 // @TODO (3)
-class Room extends Component<any> {
-  componentDidUpdate() {
-    const { joined, match, history } = this.props;
-    let { roomId } = match.params;
+function Room(props) {
 
-    roomId = parseInt(roomId, 0);
+  const { joined, match, history, rooms, messages } = props;
+  const roomId = parseInt(match.params.roomId, 0);
 
-    if (!joined.find(({ roomId: id }) => id === roomId)) {
-      history.push(generatePath(RouteEnum.SERVER));
-    }
+  if (!joined.find(({ roomId: id }) => id === roomId)) {
+    history.push(generatePath(RouteEnum.SERVER));
   }
 
-  constructor(props) {
-    super(props);
-    this.handleRoomSay = this.handleRoomSay.bind(this);
-  }
-
-  handleRoomSay({ message }) {
+  function handleRoomSay({ message }) {
     if (message) {
-      const { roomId } = this.props.match.params;
       RoomsService.roomSay(roomId, message);
     }
   }
 
-  render() {
-    const { match, rooms } = this.props;
-    const { roomId } = match.params;
-    const room = rooms[roomId];
+  const room = rooms[roomId];
 
-    const messages = this.props.messages[roomId];
-    const users = room.userList;
+  const roomMessages = messages[roomId];
+  const users = room.userList;
 
-    return (
-      <div className="room-view">
-        <AuthGuard />
+  return (
+    <div className="room-view">
+      <AuthGuard />
 
-        <div className="room-view__main">
-          <ThreePaneLayout
-            fixedHeight
+      <div className="room-view__main">
+        <ThreePaneLayout
+          fixedHeight
 
-            top={(
-              <Paper className="room-view__games overflow-scroll">
-                <OpenGames room={room} />
+          top={(
+            <Paper className="room-view__games overflow-scroll">
+              <OpenGames room={room} />
+            </Paper>
+          )}
+
+          bottom={(
+            <div className="room-view__messages">
+              <Paper className="room-view__messages-content overflow-scroll">
+                <ScrollToBottomOnChanges changes={roomMessages} content={(
+                  <Messages messages={roomMessages} />
+                )} />
               </Paper>
-            )}
+              <Paper className="room-view__messages-sayMessage">
+                <SayMessage onSubmit={handleRoomSay} />
+              </Paper>
+            </div>
+          )}
 
-            bottom={(
-              <div className="room-view__messages">
-                <Paper className="room-view__messages-content overflow-scroll">
-                  <ScrollToBottomOnChanges changes={messages} content={(
-                    <Messages messages={messages} />
-                  )} />
-                </Paper>
-                <Paper className="room-view__messages-sayMessage">
-                  <SayMessage onSubmit={this.handleRoomSay} />
-                </Paper>
-              </div>
-            )}
-
-            side={(
-              <Paper className="room-view__side overflow-scroll">
-                <div className="room-view__side-label">
+          side={(
+            <Paper className="room-view__side overflow-scroll">
+              <div className="room-view__side-label">
                   Users in this room: {users.length}
-                </div>
-                <VirtualList
-                  className="room-view__side-list"
-                  itemKey={(index, data) => users[index].name }
-                  items={ users.map(user => (
-                    <ListItem button className="room-view__side-list__item">
-                      <UserDisplay user={user} />
-                    </ListItem>
-                  )) }
-                />
-              </Paper>
-            )}
-          />
-        </div>
+              </div>
+              <VirtualList
+                className="room-view__side-list"
+                itemKey={(index, data) => users[index].name }
+                items={ users.map(user => (
+                  <ListItem button className="room-view__side-list__item">
+                    <UserDisplay user={user} />
+                  </ListItem>
+                )) }
+              />
+            </Paper>
+          )}
+        />
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 interface RoomProps {

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;