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

src/components/chatbox.jsx

@@ -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 })

src/components/message.jsx

@@ -1,113 +1,55 @@
 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 {
+  const senderClass = () => {
-  constructor(props) {
+    switch (message.sender) {
-    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) {
       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 = () => {
-    const linkifyOpts = {
-      linkAttributes: {
-        rel: 'noreferrer noopener',
-      },
-    }
 
+  if (message.content.msgtype === 'm.file') {
+    const url = client.mxcUrlToHttp(message.content.url);
     return (
-      <div className={`message ${this.senderClass()}`}>
+      <div className={`message ${senderClass()}`}>
         <div className="text">
-          <Linkify options={linkifyOpts}>{ this.props.message.content.body }</Linkify>
+          <a href={url} target='_blank' rel='noopener noreferrer'>{ message.content.body }</a>
         </div>
       </div>
     )
   }
 
-  renderHtmlMessage = () => {
+  if (message.content.formatted_body) {
     return (
-      <div className={`message ${this.senderClass()}`}>
+      <div className={`message ${senderClass()}`}>
-        <div className="text" dangerouslySetInnerHTML={{__html: this.props.message.content.formatted_body}} />
+        <div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
       </div>
     )
   }
 
-  renderImageMessage = () => {
+  const linkifyOpts = {
-    return (
+    linkAttributes: {
-      <div className={`message ${this.senderClass()}`}>
+      rel: 'noreferrer noopener',
-        <div className="text">
+    },
-          <a href={this.state.decryptedUrl} target='_blank' rel='noopener noreferrer'>{ this.props.message.content.body }</a>
+  }
-        </div>
+
+  return (
+    <div className={`message ${senderClass()}`}>
+      <div className="text">
+        <Linkify options={linkifyOpts}>{ message.content.body }</Linkify>
       </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;