placeholder message

This commit is contained in:
Sharon Kennedy 2020-04-23 00:04:48 -04:00
parent c98192d25a
commit 3fd72429e3
3 changed files with 40 additions and 4 deletions

View File

@ -315,6 +315,10 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
&.placeholder {
opacity: 0.5;
}
.text { .text {
border: 1px solid $theme-color; border: 1px solid $theme-color;
background-color: $theme-color; background-color: $theme-color;

View File

@ -62,6 +62,7 @@ class ChatBox extends React.Component {
isMobile: true, isMobile: true,
isSlowConnection: true, isSlowConnection: true,
decryptionErrors: {}, decryptionErrors: {},
messagesInFlight: []
} }
this.state = this.initialState this.state = this.initialState
this.chatboxInput = React.createRef(); this.chatboxInput = React.createRef();
@ -353,9 +354,11 @@ class ChatBox extends React.Component {
} }
sendMessage = (message) => { sendMessage = (message) => {
console.log("SEND MESSAGE!", message)
if (!this.state.client) { if (!this.state.client) {
return null return null
} }
this.state.client.sendTextMessage(this.state.roomId, message) this.state.client.sendTextMessage(this.state.roomId, message)
.catch((err) => { .catch((err) => {
switch (err["name"]) { switch (err["name"]) {
@ -419,6 +422,16 @@ class ChatBox extends React.Component {
return; 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 // check for decryption error message and replace with decrypted message
// or push message to messages array // or push message to messages array
const messages = [...this.state.messages] const messages = [...this.state.messages]
@ -562,9 +575,10 @@ class ChatBox extends React.Component {
if (!Boolean(message)) return null; if (!Boolean(message)) return null;
if (this.state.client && this.state.roomId) { 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() this.chatboxInput.current.focus()
return this.sendMessage(message)
} }
} }
@ -578,7 +592,7 @@ class ChatBox extends React.Component {
} }
render() { 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...' const inputLabel = 'Send a message...'
return ( return (
@ -620,6 +634,14 @@ class ChatBox extends React.Component {
}) })
} }
{
messagesInFlight.map((message, index) => {
return(
<Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
)
})
}
{ typingStatus && { typingStatus &&
<div className="notices"> <div className="notices">
<div role="status">{typingStatus}</div> <div role="status">{typingStatus}</div>

View File

@ -2,7 +2,7 @@ import React from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import Linkify from 'linkifyjs/react'; import Linkify from 'linkifyjs/react';
const Message = ({ message, userId, botId, client }) => { const Message = ({ message, userId, botId, client, placeholder }) => {
const senderClass = () => { const senderClass = () => {
switch (message.sender) { switch (message.sender) {
@ -17,6 +17,16 @@ const Message = ({ message, userId, botId, client }) => {
} }
} }
if (placeholder) {
return(
<div className={`message from-me placeholder`}>
<div className="text">
{ message.content.body }
</div>
</div>
)
}
if (message.content.msgtype === 'm.file') { if (message.content.msgtype === 'm.file') {
const url = client.mxcUrlToHttp(message.content.url); const url = client.mxcUrlToHttp(message.content.url);