Enable send image

package.json

@@ -13,6 +13,7 @@
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
+    "react-dropzone": "^3.13.2",
     "react-tap-event-plugin": "^2.0.1",
     "socket.io": "^2.0.1"
   },

src/App.js

@@ -10,7 +10,7 @@ import { getGpsCord } from './lib/gps.js';
 import { Tabs, Tab, Panel } from 'react-bootstrap';
 
 const io = require('socket.io-client');
-// const SERVER_URL = 'http://localhost:8000';
+//const SERVER_URL = 'http://localhost:8000';
 const SERVER_URL = 'https://circle-chat.herokuapp.com';  // For deployment
 
 

src/component/Chat.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './Chat.css';
+import ChatPanel from './ChatPanel.js';
 
 class Chat extends Component {
   constructor(props) {
@@ -8,38 +9,32 @@ class Chat extends Component {
       msg: '',
       chatMsgs: []
     };
-    this.handleChange = this.handleChange.bind(this);
-    this.sendMsg = this.sendMsg.bind(this);
     this.socket = this.props.socket;
-    this.socket.on('chat', function(sid, userName, iconName, msg){
+    this.socket.on('chat', (sid, userName, iconName, msg) => {
       this.setState({
         chatMsgs: [...this.state.chatMsgs, {
           sid,
           userName,
           iconName,
           text: msg,
         }]});
-    }.bind(this));
+    });
   }
-  handleChange(event) {
+
+  handleChange = event => {
     this.setState({msg: event.target.value});
   }
-  sendMsg() {
+
+  sendMsg = () => {
     console.log(this.props.id, this.state.msg)
     this.socket.emit('chat', this.props.id, this.props.userName, this.props.iconName, this.state.msg);
     this.setState({msg: ''});
   }
+
   render() {
     return (
       <div>
-        <ul id="messages">
-          {this.state.chatMsgs.map((msg, i) =>
-            <li key={i}>
-              <img className='portrait' alt='portrait' src={require(`../assets/${msg.userName ===
-                this.props.userName ? this.props.iconName : msg.iconName}.png`)}/>
-              <span>{msg.userName}: {msg.text}</span>
-            </li>)}
-        </ul>
+        <ChatPanel id={this.props.id} socket={this.props.socket} iconName={this.props.iconName} userName={this.props.userName} chatMsgs={this.state.chatMsgs}/>
         <div id="form">
           <input id="msg"
             autoComplete="off"

src/component/ChatPanel.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import Dropzone from 'react-dropzone'
+
+class ChatPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      images: []
+    };
+  }
+
+  onDrop = file => {
+    // TODO: need to send image to server
+    this.setState({images: [...this.state.images, file[0]]})
+    //this.props.socket.emit('chat', this.props.id, this.props.userName, this.props.iconName, file[0]);
+  }
+
+	render() {
+    // TODO: need to migrate to chatMsgs
+    const style = {
+      height: '100px',
+      width: '100px',
+    };
+		return (
+      <Dropzone accept="image/jpeg, image/png" onDrop={this.onDrop}>
+  		  <ul id="messages">
+  		    {this.props.chatMsgs.map((msg, i) =>
+  		      <li key={i}>
+  		        <img className='portrait' alt='portrait' src={require(`../assets/${msg.userName ===
+  		          this.props.userName ? this.props.iconName : msg.iconName}.png`)}/>
+  		        <span>{msg.userName}: {msg.text}</span>
+  		      </li>)}
+  		  </ul>
+        <ul>
+          {this.state.images.map((img, i) =>
+            <li><img alt="i" src={img.preview} style={style}/></li>
+            )}
+        </ul>
+      </Dropzone>
+    );
+	}
+}
+
+export default ChatPanel;