got encryption working

src/components/chatbox.jsx

@@ -18,6 +18,7 @@ import Message from "./message";
 const MATRIX_SERVER_ADDRESS = "https://matrix.rhok.space"
 const FACILITATOR_USERNAME = "@ocrcc-facilitator-demo:rhok.space"
 const CHATROOM_NAME = "Support Chat"
+const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
 
 
 class ChatBox extends React.Component {
@@ -52,26 +53,64 @@ class ChatBox extends React.Component {
       room_alias_name: `private-support-chat-${uuid()}`,
       invite: [FACILITATOR_USERNAME], // TODO: create bot user to add
       visibility: 'private',
-      name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}`
+      name: `${chatDate} - ${CHATROOM_NAME} - started at ${chatTime}`,
+      initial_state: [
+        {
+          type: 'm.room.encryption',
+          state_key: '',
+          content: {
+              algorithm: 'm.megolm.v1.aes-sha2',
+          },
+        },
+
+      ]
     }).then(data => {
-      this.setState({ room_id: data.room_id })
+      this.setState({
+        room_id: data.room_id,
+        room_encrypted: this.state.client.isRoomEncrypted(this.state.room_id)
+      })
+      // this.state.client.setRoomEncryption(data.room_id, ENCRYPTION_CONFIG)
+    }).catch(err => {
+      console.log("Unable to create room", err)
     })
   }
 
   sendMessage = () => {
-    const content = {
+    this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue).then((res) => {
-      "body": this.state.inputValue,
-      "msgtype": "m.text"
-    };
-
-    this.state.client.sendEvent(this.state.room_id, "m.room.message", content, "").then((res) => {
       this.setState({ inputValue: "" })
       this.chatboxInput.current.focus()
     }).catch((err) => {
       console.log(err);
+      Object.keys(err.devices).forEach((userId) => {
+          Object.keys(err.devices[userId]).map((deviceId) => {
+              this.state.client.setDeviceKnown(userId, deviceId, true);
+          });
+          this.state.client.sendTextMessage(this.state.room_id, this.state.inputValue)
+            .then((res) => {
+              this.setState({ inputValue: "" })
+              this.chatboxInput.current.focus()
+            })
+            .catch(err => {
+              console.log(err)
+            });
+      });
     })
   }
 
+  handleMessageEvent = event => {
+    const message = {
+      id: event.getId(),
+      type: event.getType(),
+      sender: event.getSender(),
+      roomId: event.getRoomId(),
+      content: event.getContent(),
+    }
+
+    const messages = [...this.state.messages]
+    messages.push(message)
+    this.setState({ messages })
+  }
+
   componentDidMount() {
     // empty registration request to get session
     this.state.client.registerRequest({}).then(data => {
@@ -88,7 +127,6 @@ class ChatBox extends React.Component {
         username: username,
         x_show_msisdn: true,
       }).then(data => {
-        console.log("Registered user", data)
 
         // use node localStorage if window.localStorage is not available
         let localStorage = global.localStorage;
@@ -98,8 +136,6 @@ class ChatBox extends React.Component {
           localStorage = new LocalStorage(localStoragePath);
         }
 
-        console.log("localStorage", localStorage)
-
         // create new client with full options
         let opts = {
           baseUrl: MATRIX_SERVER_ADDRESS,
@@ -139,11 +175,32 @@ class ChatBox extends React.Component {
         }
       });
 
+
       this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
         if (event.getType() === "m.room.message") {
-          const messages = [...this.state.messages]
+
-          messages.push(event)
+          if (event.status === "sending") {
-          this.setState({ messages })
+            return; // do nothing
+          }
+
+          if (event.status === "not sent") {
+            return console.log("message not sent!", event)
+          }
+
+          if (event.isEncrypted()) {
+            return console.log("message encrypted")
+          }
+
+          console.log("ROOM TIMELINE EVENT", event)
+
+          this.handleMessageEvent(event)
+        }
+      });
+
+      this.state.client.on("Event.decrypted", (event) => {
+        console.log("EVENT DECRYPTED => ", event)
+        if (event.getType() === "m.room.message") {
+          this.handleMessageEvent(event)
         }
       });
     }
@@ -202,7 +259,7 @@ class ChatBox extends React.Component {
           {
             messages.map((message, index) => {
               return(
-                <Message key={message.event.event_id} message={message} user_id={user_id} />
+                <Message key={message.id} message={message} user_id={user_id} />
               )
             })
           }

src/components/message.jsx

@@ -2,11 +2,11 @@ import React from "react"
 import PropTypes from "prop-types"
 
 const Message = ({ message, user_id }) => {
-  const fromMe = message.sender.userId === user_id;
+  const fromMe = message.sender === user_id;
 
   return (
     <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
-      <div className="text">{ message.event.content.body }</div>
+      <div className="text">{ message.content.body }</div>
     </div>
   )
 }

webpack.config.js

@@ -71,7 +71,8 @@ const defaultConfig = {
   },
   resolve: {
     extensions: ['*', '.js', '.jsx'],
-  }
+  },
+  node: { fs: 'empty' }
 };
 
 module.exports = [{