refactor some components of the chat input

src/components/ChatInput.js

@@ -0,0 +1 @@
+

src/components/ChatRoom.js

@@ -5,46 +5,18 @@ import autoscroll from 'autoscroll-react';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Dropzone from 'react-dropzone';
-import { Picker } from 'emoji-mart';
 import AddCircle from '@material-ui/icons/AddCircle';
 
-import 'emoji-mart/css/emoji-mart.css';
-
 import Message from './Message';
 import ChatHeader from './ChatHeader';
 import Userlist from './Userlist';
+import WhoIsTyping from './WhoIsTyping';
+import EmojiPicker from './chatInput/EmojiPicker';
+import ChatTextInput from './chatInput/ChatTextInput';
 import { uploadFileAndSend } from '../utils/ipfs';
 
-class WhoIsTyping extends PureComponent {
-
-  whoIsTyping() {
-    const { users, usersTyping, currentChannel } = this.props;
-    const currentTime = new Date().getTime();
-
-    const typingInChannel = usersTyping[currentChannel];
-    const typingUsers = [];
-    for (let pubkey in typingInChannel) {
-      const lastTyped = typingInChannel[pubkey];
-      if (!users[pubkey]) continue;
-      if (currentTime - lastTyped > 3*1000 || currentTime < lastTyped) continue;
-      typingUsers.push(users[pubkey].username)
-    }
-    return typingUsers;
-  }
-
-  render() {
-    const userList = this.whoIsTyping();
-    return (
-      <div style={{ textAlign: 'center' }}>
-        {!userList.length ? "" : `${userList.join(',')} is typing`}
-      </div>
-    )
-  }
-}
-
 function onDrop(acceptedFiles, rejectedFiles, ipfs, sendMessage) {
   const file = acceptedFiles[0];
   uploadFileAndSend(ipfs, file, sendMessage);
@@ -74,15 +46,10 @@ class ChatRoom extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      showEmojis: false,
       infoPanelActive: true
     };
   }
 
-  toggleEmojis(e) {
-    this.setState(({ showEmojis: !this.state.showEmojis }));
-  }
-
   toggleInfoPanel = () => {
     this.setState({ infoPanelActive: !this.state.infoPanelActive })
   }
@@ -98,16 +65,13 @@ class ChatRoom extends Component {
   }
 
   addEmoji(emoji, chatInput, setValue) {
-    console.log(emoji);
     setValue('chatInput', `${chatInput}:${emoji.id}:`);
-    this.setState(({showEmojis: false}), () => {
-      NameInput.current.labelNode.focus();
-    });
+    NameInput.current.labelNode.focus();
   }
 
   render() {
     const { messages, sendMessage, currentChannel, usersTyping, typingEvent, allUsers, ipfs } = this.props;
-    const { showEmojis, infoPanelActive } = this.state;
+    const { infoPanelActive } = this.state;
     const messagesHeight = `calc(100vh - ${messagesOffset}px)`;
     return (
       <div style={{ width: '100%', flexWrap: 'nowrap', display: 'flex', boxSizing: 'border-box' }} >
@@ -172,25 +136,8 @@ class ChatRoom extends Component {
                       <div className="chat-input">
                         <form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
                           <Button onClick={(e) => this.uploadFileDialog()}><AddCircle /></Button>
-                          <TextField
-                            id="chatInput"
-                            ref={NameInput}
-                            multiline
-                            style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }}
-                            label="Type a message..."
-                            type="text"
-                            name="chatInput"
-                            margin="normal"
-                            variant="outlined"
-                            fullWidth
-                            onChange={handleChange}
-                            onKeyDown={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)}
-                            onBlur={handleBlur}
-                            value={values.chatInput || ''}
-                          />
-                          {showEmojis && <Picker onSelect={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)}
-                                           style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>}
-                          <Button onClick={(e) => this.toggleEmojis(e)}>Smile</Button>
+                          <ChatTextInput ref={NameInput} handleChange={handleChange} handleTyping={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)} handleBlur={handleBlur} chatInput={values.chatInput || ''} />
+                          <EmojiPicker addEmoji={(emoji) => this.addEmoji(emoji, values.chatInput, setFieldValue)} />
                           {errors.chatInput && touched.chatInput && errors.chatInput}
                         </form>
                         <WhoIsTyping

src/components/WhoIsTyping.js

@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react';
+
+class WhoIsTyping extends PureComponent {
+
+  // TODO: all this logic will soon come from status chat lib and much more efficient
+  whoIsTyping() {
+    const { users, usersTyping, currentChannel } = this.props;
+    const currentTime = new Date().getTime();
+
+    const typingInChannel = usersTyping[currentChannel];
+    const typingUsers = [];
+    for (let pubkey in typingInChannel) {
+      const lastTyped = typingInChannel[pubkey];
+      if (!users[pubkey]) continue;
+      if (currentTime - lastTyped > 3*1000 || currentTime < lastTyped) continue;
+      typingUsers.push(users[pubkey].username)
+    }
+    return typingUsers;
+  }
+
+  render() {
+    const userList = this.whoIsTyping();
+    return (
+      <div style={{ textAlign: 'center' }}>
+        {!userList.length ? "" : `${userList.join(',')} is typing`}
+      </div>
+    )
+  }
+}
+
+export default WhoIsTyping;

src/components/chatInput/ChatTextInput.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+
+const ChatTextInput = ({ref, handleTyping, handleChange, handleBlur, chatInput}) => (
+  <TextField
+    id="chatInput"
+    ref={ref}
+    multiline
+    style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }}
+    label="Type a message..."
+    type="text"
+    name="chatInput"
+    margin="normal"
+    variant="outlined"
+    fullWidth
+    onChange={handleChange}
+    onKeyDown={handleTyping}
+    onBlur={handleBlur}
+    value={chatInput}
+  />
+)
+
+export default ChatTextInput;

src/components/chatInput/EmojiPicker.js

@@ -0,0 +1,36 @@
+import React, { PureComponent, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
+import { Picker } from 'emoji-mart';
+import 'emoji-mart/css/emoji-mart.css';
+
+class EmojiPicker extends PureComponent {
+
+  state = {
+    showEmojis: false
+  }
+
+  addEmoji(emoji) {
+    console.log(emoji);
+    this.setState(({showEmojis: false}), () => {
+      this.props.addEmoji(emoji)
+    });
+  }
+
+  toggleEmojis(e) {
+    this.setState(({ showEmojis: !this.state.showEmojis }));
+  }
+
+  render() {
+    const { showEmojis } = this.state;
+    return (
+      <Fragment>
+        {showEmojis && <Picker onSelect={(emoji) => this.addEmoji(emoji)}
+                        style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>}
+        <Button onClick={(e) => this.toggleEmojis(e)}>Smile</Button>
+      </Fragment>
+    )
+  };
+
+}
+
+export default EmojiPicker;