From c8599f17874967df27d1f1d35a08281ef4641e6e Mon Sep 17 00:00:00 2001 From: Xiang Li Date: Mon, 19 Aug 2019 09:48:31 -0700 Subject: [PATCH 1/3] work in progress --- package.json | 3 +++ src/client/src/App.js | 47 ++++++++++++++++++++++++--------------- src/client/src/message.js | 16 ++++++------- 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 4557722..2d7f027 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ "devDependencies": { "concurrently": "^4.0.1", "recursive-install": "^1.4.0" + }, + "dependencies": { + "react-chat-ui": "^0.3.2" } } diff --git a/src/client/src/App.js b/src/client/src/App.js index a9004ba..c1ab7f5 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -2,7 +2,9 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Socket from './socket' -import {Conversation, Message, Sender} from './message' +import {Conversation, Msg, Sender} from './message' +import { ChatFeed, Message, ChatBubbleProps } from 'react-chat-ui'; + class App extends Component { socket = new Socket(document.location.pathname.replace('/', '')) @@ -22,23 +24,25 @@ class App extends Component { } } onKeyPress = event => { - if (event.key === ' ') { - if (this.state.text === ' ') { - this.setState({text: ''}); - } else { - this.handleSubmit(); - } - } + // if (event.key === ' ') { + // if (this.state.text === ' ') { + // this.setState({text: ''}); + // } else { + // this.handleSubmit(); + // } + // } + this.handleSubmit(); } handleSubmit = async e => { if (e) { e.preventDefault(); } - let newMessage = new Message(this.state.user, this.state.text) - this.setState(previousState => ({ - text: "", - conversation: previousState.conversation.addMessage(newMessage), - })); + // alert(this.state.text) + let newMessage = new Msg(this.state.user, this.state.text) + // this.setState(previousState => ({ + // text: "", + // conversation: previousState.conversation.addMessage(newMessage), + // })); this.socket.sendMessage(newMessage); }; render() { @@ -47,6 +51,8 @@ class App extends Component {
logo
+ +

Say Something, {this.state.user.name}: @@ -55,12 +61,17 @@ class App extends Component { type="text" value={this.state.text} onKeyPress={this.onKeyPress} - onChange={e => this.setState({ text: e.target.value })}/> + onChange={e => this.setState({ text: e.target.value },()=> console.log())}/>

- {this.state.conversation.messages.slice().reverse().map((value, index) => { - return

{value.sender.name}: {value.text}

- })} - + + + + + ); } } diff --git a/src/client/src/message.js b/src/client/src/message.js index a5c9f4b..ce4be68 100644 --- a/src/client/src/message.js +++ b/src/client/src/message.js @@ -11,24 +11,24 @@ class Conversation { if(this.messages.length) { return this.messages[this.messages.length - 1]; } - return null; + return ''; } addMessage(message) { - message = Object.assign(new Message(), message); + message = Object.assign(new Msg(), message); message.sender = Object.assign(new Sender(), message.sender); let newSender = message.sender; let lastMessage = this.lastMessage; // return this; - if (lastMessage && newSender.equals(lastMessage.sender)) { - lastMessage.concat(message); - } else { + // if (lastMessage && newSender.equals(lastMessage.sender)) { + // lastMessage.concat(message); + // } else { this.messages.push(message); - } + //} return this; } } -class Message { +class Msg { constructor(sender, text) { this.sender = sender; this.text = text; @@ -54,6 +54,6 @@ class Sender { export { Conversation, - Message, + Msg, Sender, } From 9573e94445f4dd45e11b9090f6bde66e2e5ccf38 Mon Sep 17 00:00:00 2001 From: Xiang Li Date: Sat, 12 Oct 2019 01:48:49 -0700 Subject: [PATCH 2/3] refactored the test file, but still failing one test. please review. --- src/client/src/__tests__/message.test.js | 18 +++++++++--------- src/client/src/message.js | 11 +++-------- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/client/src/__tests__/message.test.js b/src/client/src/__tests__/message.test.js index bc40f40..da0ab1d 100644 --- a/src/client/src/__tests__/message.test.js +++ b/src/client/src/__tests__/message.test.js @@ -1,4 +1,4 @@ -import {Conversation, Message, Sender} from '../message' +import {Conversation, Msg, Sender} from '../message' describe('Conversation tests', () => { it('creates an empty array of messages', () => { @@ -20,7 +20,7 @@ describe('Conversation tests', () => { conversation.addMessage(message); const receivedMessage = conversation.messages[0]; - expect(receivedMessage).toBeInstanceOf(Message); + expect(receivedMessage).toBeInstanceOf(Msg); expect(receivedMessage.sender).toBeInstanceOf(Sender); expect(receivedMessage.text).toBe(message.text); expect(receivedMessage.sender.name).toBe(message.sender.name); @@ -47,7 +47,7 @@ describe('Conversation tests', () => { const receivedMessage = conversation.messages[0]; expect(conversation.length).toBe(1); - expect(receivedMessage).toBeInstanceOf(Message); + expect(receivedMessage).toBeInstanceOf(Msg); expect(receivedMessage.sender).toBeInstanceOf(Sender); expect(receivedMessage.text).toBe(firstMessage.text + secondMessage.text); expect(receivedMessage.sender.name).toBe(sender.name); @@ -77,12 +77,12 @@ describe('Conversation tests', () => { const receivedMessageSender1 = conversation.messages[0]; const receivedMessageSender2 = conversation.messages[1]; expect(conversation.length).toBe(2); - expect(receivedMessageSender1).toBeInstanceOf(Message); + expect(receivedMessageSender1).toBeInstanceOf(Msg); expect(receivedMessageSender1.sender).toBeInstanceOf(Sender); expect(receivedMessageSender1.text).toBe(messageSender1.text); expect(receivedMessageSender1.sender.name).toBe(messageSender1.sender.name); expect(receivedMessageSender1.sender.id).toBe(messageSender1.sender.id); - expect(receivedMessageSender2).toBeInstanceOf(Message); + expect(receivedMessageSender2).toBeInstanceOf(Msg); expect(receivedMessageSender2.sender).toBeInstanceOf(Sender); expect(receivedMessageSender2.text).toBe(messageSender2.text); expect(receivedMessageSender2.sender.name).toBe(messageSender2.sender.name); @@ -115,12 +115,12 @@ describe('Conversation tests', () => { }); }); -describe('Message tests', () => { +describe('Msg tests', () => { it('initializes correctly', () => { const sender = new Sender('NAME'); const text = 'TEXT'; - const message = new Message(sender, text); + const message = new Msg(sender, text); expect(message.sender).toBe(sender); expect(message.text).toBe(text); @@ -129,10 +129,10 @@ describe('Message tests', () => { it('adds additional text', () => { const sender = new Sender('NAME'); const text = 'TEXT'; - const message = new Message(sender, text); + const message = new Msg(sender, text); const additionalText = 'MORE'; - message.concat(new Message(sender, additionalText)); + message.concat(new Msg(sender, additionalText)); expect(message.text).toBe(text + additionalText); }); diff --git a/src/client/src/message.js b/src/client/src/message.js index ce4be68..bc703fb 100644 --- a/src/client/src/message.js +++ b/src/client/src/message.js @@ -16,14 +16,9 @@ class Conversation { addMessage(message) { message = Object.assign(new Msg(), message); message.sender = Object.assign(new Sender(), message.sender); - let newSender = message.sender; - let lastMessage = this.lastMessage; - // return this; - // if (lastMessage && newSender.equals(lastMessage.sender)) { - // lastMessage.concat(message); - // } else { - this.messages.push(message); - //} + // let newSender = message.sender; + // let lastMessage = this.lastMessage; + this.messages.push(message); return this; } } From 9a569d828d583de149c8b49e5bdd8c1fc9ec9b5b Mon Sep 17 00:00:00 2001 From: Xiang Li Date: Sat, 12 Oct 2019 01:51:19 -0700 Subject: [PATCH 3/3] refactored the test file, but still failing one test. please review. --- src/client/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/src/App.js b/src/client/src/App.js index c1ab7f5..6bb202d 100644 --- a/src/client/src/App.js +++ b/src/client/src/App.js @@ -3,7 +3,7 @@ import logo from './logo.svg'; import './App.css'; import Socket from './socket' import {Conversation, Msg, Sender} from './message' -import { ChatFeed, Message, ChatBubbleProps } from 'react-chat-ui'; +import { ChatFeed, Message } from 'react-chat-ui'; class App extends Component {