add file dropzone to chatroom

app/components/ChatBox.js

@@ -36,8 +36,6 @@ function getYoutubeId(url) {
   return ID;
 }
 
-console.log(SyntaxLookup['js'])
-
 //TODO use regex for code parsing / detection. Add new line detection for shift+enter
 const MessageRender = ({ message }) => (
   message[2] === "`" && SyntaxLookup[message.slice(0,2)]

app/components/ChatRoom.js

@@ -6,6 +6,7 @@ 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 Dropzone from 'react-dropzone';
 import ChatBox from './ChatBox';
 import ChatHeader from './ChatHeader';
 
@@ -36,6 +37,10 @@ class WhoIsTyping extends PureComponent {
   }
 }
 
+function onDrop(acceptedFiles, rejectedFiles) {
+  console.log({acceptedFiles});
+}
+
 const keyDownHandler = (e, typingEvent, setValue, value) => {
   if(e.shiftKey && e.keyCode === 13) {
 	  e.preventDefault()
@@ -57,70 +62,76 @@ const listStyle = { overflow: 'scroll', flexBasis: '76%' };
 const ChatRoomForm = createRef();
 const ChatRoom = ({ messages, sendMessage, currentChannel, usersTyping, typingEvent, channelUsers, allUsers }) => (
   <div style={{ height: '100vh' }}>
-    <Grid
-      container
-      direction="column"
-      justify="flex-start"
-      alignItems="stretch"
-      style={{ height: '100%' }}
-    >
-      <ChatHeader currentChannel={currentChannel}/>
-      <Divider />
-      <AutoScrollList style={listStyle}>
-        {messages[currentChannel] && messages[currentChannel].map((message) => (
-          <Fragment key={message.data.payload}>
-            <ChatBox {...message} />
-            <li>
-              <Divider />
-            </li>
-          </Fragment>
-        ))}
-      </AutoScrollList>
-      <Formik
-        initialValues={{ chatInput: '' }}
-        onSubmit={(values, { setSubmitting, resetForm }) => {
-          const { chatInput } = values;
-          sendMessage(chatInput);
-          resetForm();
-          setSubmitting(false);
-        }}
+    <Dropzone
+      onDrop={onDrop}
+      disableClick
+      style={{ position: 'relative', height: '100%' }}
+      activeStyle={{ backgroundColor: 'grey', outline: '5px dashed lightgrey', alignSelf: 'center', outlineOffset: '-10px' }}>
+      <Grid
+        container
+        direction="column"
+        justify="flex-start"
+        alignItems="stretch"
+        style={{ height: '100%' }}
       >
-        {({
-           values,
-           errors,
-           touched,
-           handleChange,
-           handleBlur,
-           handleSubmit,
-           setFieldValue
-        }) => (
-          <div>
-            <form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
-              <TextField
-                id="chatInput"
-                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 || ''}
-              />
-              {errors.chatInput && touched.chatInput && errors.chatInput}
-            </form>
-            <WhoIsTyping
-              currentChannel={currentChannel}
-              usersTyping={usersTyping}
-              users={allUsers} />
-          </div>
-        )}
-      </Formik>
-    </Grid>
+        <ChatHeader currentChannel={currentChannel}/>
+        <Divider />
+        <AutoScrollList style={listStyle}>
+          {messages[currentChannel] && messages[currentChannel].map((message) => (
+            <Fragment key={message.data.payload}>
+              <ChatBox {...message} />
+              <li>
+                <Divider />
+              </li>
+            </Fragment>
+          ))}
+        </AutoScrollList>
+        <Formik
+          initialValues={{ chatInput: '' }}
+          onSubmit={(values, { setSubmitting, resetForm }) => {
+            const { chatInput } = values;
+            sendMessage(chatInput);
+            resetForm();
+            setSubmitting(false);
+          }}
+        >
+          {({
+             values,
+             errors,
+             touched,
+             handleChange,
+             handleBlur,
+             handleSubmit,
+             setFieldValue
+          }) => (
+            <div>
+              <form onSubmit={handleSubmit} style={formStyle} ref={ChatRoomForm}>
+                <TextField
+                  id="chatInput"
+                  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 || ''}
+                />
+                {errors.chatInput && touched.chatInput && errors.chatInput}
+              </form>
+              <WhoIsTyping
+                currentChannel={currentChannel}
+                usersTyping={usersTyping}
+                users={allUsers} />
+            </div>
+          )}
+        </Formik>
+      </Grid>
+    </Dropzone>
   </div>
 );
 

package.json

@@ -269,6 +269,7 @@
     "lodash": "^4.17.11",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-dropzone": "^7.0.1",
     "react-hot-loader": "^4.3.4",
     "react-jazzicon": "^0.1.3",
     "react-linkify": "^0.2.2",

yarn.lock

@@ -1717,6 +1717,12 @@ atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+attr-accept@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
+  dependencies:
+    core-js "^2.5.0"
+
 autoprefixer@^9.0.0:
   version "9.3.1"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.3.1.tgz#71b622174de2b783d5fd99f9ad617b7a3c78443e"
@@ -10238,6 +10244,13 @@ react-dom@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.11.2"
 
+react-dropzone@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-7.0.1.tgz#bc76bc1686fb47ed0c8301f968fffa6aecdff47b"
+  dependencies:
+    attr-accept "^1.1.3"
+    prop-types "^15.6.2"
+
 react-emotion@^9.1.1:
   version "9.2.12"
   resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.2.12.tgz#74d1494f89e22d0b9442e92a33ca052461955c83"