Github/ocrcc-chatbox
1
0
Fork 1
mirror of https://github.com/Safe-Support-Chat/ocrcc-chatbox synced 2024-11-22 02:34:55 +00:00
Code Issues Projects Releases Wiki Activity

store messages in object instead of array

Browse Source
This commit is contained in:
Sharon Kennedy 2020-06-11 01:54:05 -04:00
parent 93135daaa8
commit 5252321f56
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/chatbox.jsx
View File

@ -53,7 +53,7 @@ class ChatBox extends React.Component {
userId: null, userId: null,
password: null, password: null,
localStorage: null, localStorage: null,
messages: [], messages: {},
inputValue: "", inputValue: "",
errors: [], errors: [],
roomId: null, roomId: null,
@ -372,31 +372,39 @@ class ChatBox extends React.Component {
} }
displayFakeMessage = (content, sender, messageId=uuid()) => { displayFakeMessage = (content, sender, messageId=uuid()) => {
const msgList = [...this.state.messages]
const msg = { const msg = {
id: messageId, id: messageId,
type: 'm.room.message', type: 'm.room.message',
sender: sender, sender: sender,
roomId: this.state.roomId, roomId: this.state.roomId,
content: content, content: content,
timestamp: Date.now(),
} }
msgList.push(msg)
this.setState({ messages: msgList }) this.setState({
messages: {
...this.state.messages,
[messageId]: msg
}
})
} }
displayBotMessage = (content, roomId) => { displayBotMessage = (content, roomId, messageId=uuid()) => {
const msgList = [...this.state.messages]
const msg = { const msg = {
id: uuid(), id: messageId,
type: 'm.room.message', type: 'm.room.message',
sender: this.props.botId, sender: this.props.botId,
roomId: roomId || this.state.roomId, roomId: roomId || this.state.roomId,
content: content, content: content,
timestamp: Date.now(),
} }
msgList.push(msg)
this.setState({ messages: msgList }) this.setState({
messages: {
...this.state.messages,
[messageId]: msg
}
})
} }
handleMessageEvent = event => { handleMessageEvent = event => {
@ -406,7 +414,9 @@ class ChatBox extends React.Component {
sender: event.getSender(), sender: event.getSender(),
roomId: event.getRoomId(), roomId: event.getRoomId(),
content: event.getContent(), content: event.getContent(),
timestamp: event.getTs(),
} }
// there's also event.getClearContent() which only works on encrypted messages // there's also event.getClearContent() which only works on encrypted messages
// but not really sure when it should be used vs event.getContent() // but not really sure when it should be used vs event.getContent()
@ -425,12 +435,9 @@ class ChatBox extends React.Component {
this.setState({ messagesInFlight }) this.setState({ messagesInFlight })
} }
// check for decryption error message and replace with decrypted message
// or push message to messages array
const messages = [...this.state.messages]
const decryptionErrors = {...this.state.decryptionErrors} const decryptionErrors = {...this.state.decryptionErrors}
delete decryptionErrors[message.id] delete decryptionErrors[message.id]
const existingMessageIndex = messages.findIndex(({ id }) => id === message.id)
const isOfflineNotice = message.content.msgtype === "m.notice" && message.content.body === CHAT_IS_OFFLINE_NOTICE const isOfflineNotice = message.content.msgtype === "m.notice" && message.content.body === CHAT_IS_OFFLINE_NOTICE
let newMessage = message let newMessage = message
@ -449,13 +456,13 @@ class ChatBox extends React.Component {
this.handleChatOffline(event.getRoomId()) this.handleChatOffline(event.getRoomId())
} }
if (existingMessageIndex > -1) { this.setState({
messages.splice(existingMessageIndex, 1, newMessage) messages: {
} else { ...this.state.messages,
messages.push(newMessage) [message.id]: newMessage,
} },
decryptionErrors
this.setState({ messages, decryptionErrors }) })
} }
handleChatOffline = (roomId) => { handleChatOffline = (roomId) => {
@ -527,7 +534,7 @@ class ChatBox extends React.Component {
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevState.messages.length !== this.state.messages.length) { if ((prevState.messages !== this.state.messages) || (prevState.messagesInFlight !== this.state.messagesInFlight) || (prevState.typingStatus !== this.state.typingStatus)) {
if (this.messageWindow.current.scrollTo) { if (this.messageWindow.current.scrollTo) {
this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight) this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight)
} }
@ -610,6 +617,7 @@ class ChatBox extends React.Component {
render() { render() {
const { ready, messages, messagesInFlight, 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 orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp)
const inputLabel = 'Send a message...' const inputLabel = 'Send a message...'
return ( return (
@ -645,7 +653,7 @@ class ChatBox extends React.Component {
</div> </div>
{ {
messages.map((message, index) => { orderedMessages.map((message, index) => {
return( return(
<Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} /> <Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
) )