From 3fd72429e384b16ff3c46b7606d17c154d3d823a Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Thu, 23 Apr 2020 00:04:48 -0400 Subject: [PATCH] placeholder message --- src/components/_chat.scss | 4 ++++ src/components/chatbox.jsx | 28 +++++++++++++++++++++++++--- src/components/message.jsx | 12 +++++++++++- 3 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 70a6cf7..bdbb5df 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -315,6 +315,10 @@ display: flex; justify-content: flex-end; + &.placeholder { + opacity: 0.5; + } + .text { border: 1px solid $theme-color; background-color: $theme-color; diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index 8a93913..006b97c 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -62,6 +62,7 @@ class ChatBox extends React.Component { isMobile: true, isSlowConnection: true, decryptionErrors: {}, + messagesInFlight: [] } this.state = this.initialState this.chatboxInput = React.createRef(); @@ -353,9 +354,11 @@ class ChatBox extends React.Component { } sendMessage = (message) => { + console.log("SEND MESSAGE!", message) if (!this.state.client) { return null } + this.state.client.sendTextMessage(this.state.roomId, message) .catch((err) => { switch (err["name"]) { @@ -419,6 +422,16 @@ class ChatBox extends React.Component { return; } + console.log("this.state.messagesInFlight", this.state.messagesInFlight) + const messagesInFlight = [...this.state.messagesInFlight] + console.log("message", message) + const placeholderMessageIndex = messagesInFlight.findIndex(msg => msg === message.content.body) + console.log("placeholderMessageIndex", placeholderMessageIndex) + if (placeholderMessageIndex > -1) { + messagesInFlight.splice(placeholderMessageIndex, 1) + this.setState({ messagesInFlight }) + } + // check for decryption error message and replace with decrypted message // or push message to messages array const messages = [...this.state.messages] @@ -562,9 +575,10 @@ class ChatBox extends React.Component { if (!Boolean(message)) return null; if (this.state.client && this.state.roomId) { - this.setState({ inputValue: "" }) + const messagesInFlight = [...this.state.messagesInFlight] + messagesInFlight.push(message) + this.setState({ inputValue: "", messagesInFlight }, () => this.sendMessage(message)) this.chatboxInput.current.focus() - return this.sendMessage(message) } } @@ -578,7 +592,7 @@ class ChatBox extends React.Component { } render() { - const { ready, messages, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state; + const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state; const inputLabel = 'Send a message...' return ( @@ -620,6 +634,14 @@ class ChatBox extends React.Component { }) } + { + messagesInFlight.map((message, index) => { + return( + + ) + }) + } + { typingStatus &&
{typingStatus}
diff --git a/src/components/message.jsx b/src/components/message.jsx index b8c33b7..7a9afaa 100644 --- a/src/components/message.jsx +++ b/src/components/message.jsx @@ -2,7 +2,7 @@ import React from "react" import PropTypes from "prop-types" import Linkify from 'linkifyjs/react'; -const Message = ({ message, userId, botId, client }) => { +const Message = ({ message, userId, botId, client, placeholder }) => { const senderClass = () => { switch (message.sender) { @@ -17,6 +17,16 @@ const Message = ({ message, userId, botId, client }) => { } } + if (placeholder) { + return( +
+
+ { message.content.body } +
+
+ ) + } + if (message.content.msgtype === 'm.file') { const url = client.mxcUrlToHttp(message.content.url);