From 20692d45a80b1b242666805ca9d93394b7880458 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Sat, 24 Nov 2018 09:04:00 -0500 Subject: [PATCH 1/5] add border to userlist --- app/components/ChatBox.js | 2 +- app/components/ChatRoom.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/ChatBox.js b/app/components/ChatBox.js index 4bdc3d5..f4d5850 100644 --- a/app/components/ChatBox.js +++ b/app/components/ChatBox.js @@ -31,7 +31,7 @@ function isSpotifyLink(text) { function getYoutubeId(url) { let ID = ''; url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/); - if(url[2] !== undefined) { + if (url[2] !== undefined) { ID = url[2].split(/[^0-9a-z_\-]/i); ID = ID[0]; } diff --git a/app/components/ChatRoom.js b/app/components/ChatRoom.js index f9a0adf..77c3b02 100644 --- a/app/components/ChatRoom.js +++ b/app/components/ChatRoom.js @@ -193,7 +193,7 @@ class ChatRoom extends Component { - + {sortedUsers.map(user => ( From 4ea5ec07654621bfdde24d9308faf70909b52749 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Sat, 24 Nov 2018 09:21:52 -0500 Subject: [PATCH 2/5] update loading animation --- app/components/Loaders.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/Loaders.js b/app/components/Loaders.js index 6eda59e..497847e 100644 --- a/app/components/Loaders.js +++ b/app/components/Loaders.js @@ -1,11 +1,11 @@ import React from 'react'; import { css } from 'react-emotion'; -import { RingLoader, HashLoader, GridLoader } from 'react-spinners'; +import { BounceLoader, GridLoader } from 'react-spinners'; const containerStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', margin: '0 30% 0 30%' }; export const FullScreenLoader = () => (
- (
) - From a0601c00471856f4a76c193689680a8b23e03d33 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Sat, 24 Nov 2018 10:04:37 -0500 Subject: [PATCH 3/5] add icon for emoji picker --- app/components/ChatRoom.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/ChatRoom.js b/app/components/ChatRoom.js index 77c3b02..e15d5d5 100644 --- a/app/components/ChatRoom.js +++ b/app/components/ChatRoom.js @@ -14,6 +14,7 @@ import Button from '@material-ui/core/Button'; import Dropzone from 'react-dropzone'; import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'; import { Picker } from 'emoji-mart'; +import InsertEmoticon from '@material-ui/icons/InsertEmoticon' import ChatBox, { Emoji } from './ChatBox'; import ChatHeader from './ChatHeader'; @@ -178,9 +179,9 @@ class ChatRoom extends Component { onBlur={handleBlur} value={values.chatInput || ''} /> - {showEmojis && this.addEmoji(emoji, values.chatInput, setFieldValue)} + {showEmojis && this.addEmoji(emoji, values.chatInput, setFieldValue)} style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>} - + {errors.chatInput && touched.chatInput && errors.chatInput} Date: Sat, 24 Nov 2018 10:32:46 -0500 Subject: [PATCH 4/5] add upload button; fix autofocus of text field after inserting an emoji --- app/components/ChatRoom.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/components/ChatRoom.js b/app/components/ChatRoom.js index e15d5d5..6bde48a 100644 --- a/app/components/ChatRoom.js +++ b/app/components/ChatRoom.js @@ -15,6 +15,7 @@ import Dropzone from 'react-dropzone'; import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'; import { Picker } from 'emoji-mart'; import InsertEmoticon from '@material-ui/icons/InsertEmoticon' +import AddCircle from '@material-ui/icons/AddCircle' import ChatBox, { Emoji } from './ChatBox'; import ChatHeader from './ChatHeader'; @@ -86,10 +87,15 @@ class ChatRoom extends Component { this.setState(({showEmojis: !this.state.showEmojis})); } + uploadFileDialog() { + } + addEmoji(emoji, chatInput, setValue) { console.log(emoji); setValue('chatInput', `${chatInput}:${emoji.id}:`); - this.setState(({showEmojis: false})); + this.setState(({showEmojis: false}), () => { + this.nameInput.labelNode.focus(); + }); // } @@ -164,8 +170,11 @@ class ChatRoom extends Component {
+ { this.nameInput = input; }} multiline style={{ width: 'auto', flexGrow: '0.95', margin: '2px 0 0 0' }} label="Type a message..." @@ -178,7 +187,8 @@ class ChatRoom extends Component { onKeyDown={(e) => keyDownHandler(e, typingEvent, setFieldValue, values.chatInput)} onBlur={handleBlur} value={values.chatInput || ''} - /> + > + {showEmojis && this.addEmoji(emoji, values.chatInput, setFieldValue)} style={{ position: 'absolute', bottom: '80px', right: '20px' }}/>} From 64cfacea4e0e9bf60e696bf7be598d7757a17ea3 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Sat, 24 Nov 2018 11:00:18 -0500 Subject: [PATCH 5/5] make upload button work; limit max-width for images --- app/components/ChatBox.js | 2 +- app/components/ChatRoom.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/app/components/ChatBox.js b/app/components/ChatBox.js index f4d5850..1256559 100644 --- a/app/components/ChatBox.js +++ b/app/components/ChatBox.js @@ -127,7 +127,7 @@ class ChatBox extends PureComponent { /> } - {!!imgUrl && ipfs} + {!!imgUrl && ipfs} {isImage(message) && displayImage(message)} ); diff --git a/app/components/ChatRoom.js b/app/components/ChatRoom.js index 6bde48a..38774d6 100644 --- a/app/components/ChatRoom.js +++ b/app/components/ChatRoom.js @@ -88,6 +88,13 @@ class ChatRoom extends Component { } uploadFileDialog() { + this.fileInput.click(); + } + + fileChangedHandler(event) { + const file = event.target.files[0]; + console.dir("handling file upload"); + uploadFileAndSend(this.ipfs, file, this.sendMessage); } addEmoji(emoji, chatInput, setValue) { @@ -101,6 +108,8 @@ class ChatRoom extends Component { render() { const { messages, sendMessage, currentChannel, usersTyping, typingEvent, channelUsers, allUsers, ipfs } = this.props; + this.sendMessage = sendMessage; + this.ipfs = ipfs; const sortedUsers = Object.keys(channelUsers).sort((x,y) => { let currentTime = (new Date().getTime()); @@ -117,6 +126,12 @@ class ChatRoom extends Component { const {showEmojis} = this.state; return ( + { this.fileInput = input; }} + onChange={this.fileChangedHandler.bind(this)} + style={{display: 'none'}} + /> {