From 7470e9fff72aa560d831785664591bf2ee05b41c Mon Sep 17 00:00:00 2001 From: Hoang <42971570+wardetu@users.noreply.github.com> Date: Sat, 22 Jun 2019 18:16:07 +0800 Subject: [PATCH 01/52] Create ChatApp.js --- src/components/chat/ChatApp.js | 87 ++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/components/chat/ChatApp.js diff --git a/src/components/chat/ChatApp.js b/src/components/chat/ChatApp.js new file mode 100644 index 0000000000..803ffdb042 --- /dev/null +++ b/src/components/chat/ChatApp.js @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { ChatManager, TokenProvider } from '@pusher/chatkit-client'; +import MessageList from './MessageList'; +import Input from './Input'; + +export default class ChatApp extends React.Component { + constructor(props) { + super(props); + this.state = { + currentRoom: {}, + currentUser: {}, + messages: [] + }; + this.addMessage = this.addMessage.bind(this); + } + /* + To keep the chat view at its bottom (and also where the input field is) we create a dummy div at the bottom. + It will be automatically rendered and scrolled to everytime the chat is updated. + */ + messagesEndRef = React.createRef(); // for scrolling + + componentDidUpdate() { + this.scrollToBottom(); + } // for scrolling + + scrollToBottom = () => { + this.messagesEndRef.current.scrollIntoView({ behavior: 'smooth' }) + } + componentDidMount() { + // tslint:disable-next-line:no-console + /* + TO MOVE instanceLocator and tokenProvider to backend + + */ + const chatManager = new ChatManager({ + instanceLocator: 'v1:us1:6fac6431-d3f3-4a32-b4e6-56a20bf6e500', + tokenProvider: new TokenProvider({ + url: + 'https://us1.pusherplatform.io/services/chatkit_token_provider/v1/6fac6431-d3f3-4a32-b4e6-56a20bf6e500/token' + }), + userId: this.props.currentUserId + }); + + chatManager + .connect() + .then(currentUser => { + this.setState({ currentUser }); + return currentUser.subscribeToRoom({ + hooks: { + onMessage: message => { + this.setState({ + messages: [...this.state.messages, message] + }); + } + }, + messageLimit: 100, + roomId: this.props.currentRoomId + + }); + }) + .then(currentRoom => { + this.setState({ + currentRoom + }); + }); + this.scrollToBottom(); //for scrolling + } + + addMessage(text) { + this.state.currentUser.sendMessage({ + roomId: this.state.currentRoom.id, + text + }); + + } + + render() { + return ( + +
+ + add something +
+
+ ); + } +} From d93dd186348c39bc17b3f810de5a184fbc4127c8 Mon Sep 17 00:00:00 2001 From: Hoang <42971570+wardetu@users.noreply.github.com> Date: Sat, 22 Jun 2019 18:16:34 +0800 Subject: [PATCH 02/52] Add files via upload --- src/components/chat/MessageList.js | 52 ++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/components/chat/MessageList.js diff --git a/src/components/chat/MessageList.js b/src/components/chat/MessageList.js new file mode 100644 index 0000000000..4016f6e1e6 --- /dev/null +++ b/src/components/chat/MessageList.js @@ -0,0 +1,52 @@ +import * as React from 'react'; +import Markdown from '../commons/Markdown'; +import { alignmentClass } from '@blueprintjs/core/lib/esm/common/classes'; +/* + TO COLOR-CODE DIFFERENT ROLES + White for students + Blue for Avengers + Green for Admins + +*/ + +export default class MessageList extends React.Component { + + + messageStyle = { + dialogueBox: { + fontFamily: "inherit", + padding: "9px 15px 8px 15px" + }, + + msgItem: { + listStyleType: "none" + }, + + msgList: { + padding: "0px 0px 5px 0px" + }, + + sender: { + fontWeight: "bold", + margin: "0px 0px 6px 0px" + } + }; + + render() { + return ( +
+
    + {this.props.messages.map((message, index) => ( +
  • + 
    +                
    {message.userStore.users[message.senderId].name} 
    
+                
+
    +
    • + ))} +
+
+ + ); + } +} From 490cdd201ea1b9a2abb7767527d4901dc301e562 Mon Sep 17 00:00:00 2001 From: Hoang <42971570+wardetu@users.noreply.github.com> Date: Sat, 22 Jun 2019 18:17:55 +0800 Subject: [PATCH 03/52] Add files via upload --- src/components/chat/Input.js | 81 ++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/components/chat/Input.js diff --git a/src/components/chat/Input.js b/src/components/chat/Input.js new file mode 100644 index 0000000000..a3a51cb2fc --- /dev/null +++ b/src/components/chat/Input.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { controlButton } from '../commons'; + +import { IconNames } from '@blueprintjs/icons'; +import { Link } from 'react-router-dom'; +import { Tooltip } from '@blueprintjs/core'; + + +export default class Input extends React.Component { + constructor(props) { + super(props); + this.state = { + message: '' + }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(e) { + this.setState({ + message: e.target.value + }); + } + + handleSubmit(e) { + e.preventDefault(); + this.props.onSubmit(this.state.message); + this.setState({ + message: '' + }); + } + + sendButtonOpts = { + className: 'chat-send-button', + fullWidth: true + }; + + render() { + return ( +
+
+