simpler transcript implementation, forgetting about file and image downloads for now

This commit is contained in:
Sharon Kennedy 2020-03-19 09:38:44 -04:00
parent d8e482a689
commit 3935287c3f
2 changed files with 24 additions and 85 deletions

View File

@ -341,11 +341,8 @@ class ChatBox extends React.Component {
sender: event.getSender(),
roomId: event.getRoomId(),
content: event.getContent(),
}
console.log('message ===========>', message)
const messages = [...this.state.messages]
messages.push(message)
this.setState({ messages })

View File

@ -1,53 +1,42 @@
import React from "react"
import PropTypes from "prop-types"
import Linkify from 'linkifyjs/react';
import decryptFile from '../utils/decryptFile'
const Message = ({ message, userId, botId, client }) => {
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
decryptedUrl: null,
decryptedFile: null,
}
}
componentDidMount() {
const needsDecryption = ['m.file', 'm.image'];
if (needsDecryption.includes(this.props.message.content.msgtype)) {
decryptFile(this.props.message.content.file, this.props.client)
.then((decryptedBlob) => {
const decryptedUrl = URL.createObjectURL(decryptedBlob)
this.setState({
decryptedUrl: decryptedUrl,
decryptedBlob: decryptedBlob
})
})
}
}
componentWillUnmount() {
if (this.state.decryptedUrl) {
URL.revokeObjectURL(this.state.decryptedUrl);
}
}
senderClass = () => {
switch (this.props.message.sender) {
const senderClass = () => {
switch (message.sender) {
case 'from-me':
return 'from-me'
case this.props.userId:
case userId:
return 'from-me'
case this.props.botId:
case botId:
return 'from-bot'
default:
return 'from-support'
}
}
renderTextMessage = () => {
if (message.content.msgtype === 'm.file') {
const url = client.mxcUrlToHttp(message.content.url);
return (
<div className={`message ${senderClass()}`}>
<div className="text">
<a href={url} target='_blank' rel='noopener noreferrer'>{ message.content.body }</a>
</div>
</div>
)
}
if (message.content.formatted_body) {
return (
<div className={`message ${senderClass()}`}>
<div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
</div>
)
}
const linkifyOpts = {
linkAttributes: {
rel: 'noreferrer noopener',
@ -55,59 +44,12 @@ class Message extends React.Component {
}
return (
<div className={`message ${this.senderClass()}`}>
<div className={`message ${senderClass()}`}>
<div className="text">
<Linkify options={linkifyOpts}>{ this.props.message.content.body }</Linkify>
<Linkify options={linkifyOpts}>{ message.content.body }</Linkify>
</div>
</div>
)
}
renderHtmlMessage = () => {
return (
<div className={`message ${this.senderClass()}`}>
<div className="text" dangerouslySetInnerHTML={{__html: this.props.message.content.formatted_body}} />
</div>
)
}
renderImageMessage = () => {
return (
<div className={`message ${this.senderClass()}`}>
<div className="text">
<a href={this.state.decryptedUrl} target='_blank' rel='noopener noreferrer'>{ this.props.message.content.body }</a>
</div>
</div>
)
}
renderFileMessage = () => {
return (
<div className={`message ${this.senderClass()}`}>
<div className="text">
<a href={this.state.decryptedUrl} target='_blank' rel='noopener noreferrer'>{ this.props.message.content.body }</a>
</div>
</div>
)
}
render() {
console.log(this.props.message)
console.log(this.state)
const { message } = this.props;
switch(message.content.msgtype) {
case 'm.file':
return this.renderFileMessage()
case 'm.image':
return this.renderImageMessage()
default:
if (message.content.formatted_body) {
return this.renderHtmlMessage()
}
return this.renderTextMessage()
}
}
}
export default Message;