mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
placeholder message
This commit is contained in:
parent
c98192d25a
commit
3fd72429e3
@ -315,6 +315,10 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
&.placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.text {
|
||||
border: 1px solid $theme-color;
|
||||
background-color: $theme-color;
|
||||
|
@ -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(
|
||||
<Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{ typingStatus &&
|
||||
<div className="notices">
|
||||
<div role="status">{typingStatus}</div>
|
||||
|
@ -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(
|
||||
<div className={`message from-me placeholder`}>
|
||||
<div className="text">
|
||||
{ message.content.body }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if (message.content.msgtype === 'm.file') {
|
||||
const url = client.mxcUrlToHttp(message.content.url);
|
||||
|
Loading…
Reference in New Issue
Block a user