Support E2E partially

(1) We can now read encrypted messages. It turns
out that we should wait a little bit more to ensure
crypto is initialized correctly.
(matrix-org/matrix-js-sdk#731)

(2) We still need to claim keys every time we refresh
the page. This should be fixed later.

(3) We cannot send encrypted messages yet. This should
be fixed later.

(4) Verifying devices is not yet supported.

Author: tusooa

src/App.js

@@ -44,7 +44,7 @@ class App extends React.Component
       this.initMatrix()
       this.startMatrix()
     }
-    
+
     this.logIn = this.logIn.bind(this)
     this.logOut = this.logOut.bind(this)
   }
@@ -60,17 +60,18 @@ class App extends React.Component
       cryptoStore: new sdk.MemoryCryptoStore(),
     })
 
-    this.matrix.initCrypto()
+    this.initCryptoPromise = this.matrix.initCrypto()
   }
 
   async startMatrix()
   {
+    await this.initCryptoPromise
     await this.matrix.startClient({
       initialSyncLimit: 10,
       pendingEventOrdering: 'detached',
     })
   }
-  
+
   /**
    * logIn({ username, password, homeserver })
    */
@@ -132,7 +133,7 @@ class App extends React.Component
 
     this.matrix = null
   }
-  
+
   render()
   {
     return (

src/components/timeline/index.js

@@ -31,7 +31,7 @@ class Timeline extends React.Component
   {
     super(props)
     this.state = { timeline: [] }
-    
+
     this.timelineWindow = new sdk.TimelineWindow(
       this.props.matrix, this.props.timelineSet)
 
@@ -75,9 +75,9 @@ class Timeline extends React.Component
 
   paginateBack()
   {
-    return this.paginate(sdk.EventTimeline.BACKWARDS)    
+    return this.paginate(sdk.EventTimeline.BACKWARDS)
   }
-  
+
   paginateForward()
   {
     return this.paginate(sdk.EventTimeline.FORWARDS)
@@ -87,7 +87,7 @@ class Timeline extends React.Component
   {
     return this.timelineWindow.paginate(direction, 10)
   }
-  
+
   reloadEvents()
   {
     debug('reloading events')
@@ -97,6 +97,7 @@ class Timeline extends React.Component
           this.timelineWindow.canPaginate(sdk.EventTimeline.FORWARDS)
           ? events
           : events.concat(this.props.timelineSet.getPendingEvents())
+    debug('Timeline now:', timeline)
 
     this.setState({ timeline })
   }
@@ -111,12 +112,12 @@ class Timeline extends React.Component
   {
     this.updateTimeline()
   }
-  
+
   render()
   {
     const { timeline } = this.state
     const { matrix } = this.props
-    
+
     return (
       <div>
         <button
@@ -126,7 +127,7 @@ class Timeline extends React.Component
         { timeline.map(msg => {
           const sender = msg.getSender()
           const isMe = sender === matrix.getUserId()
-          
+
           return (
             <div className='timeline__message'
                  key={ msg.getId() }>
@@ -139,7 +140,7 @@ class Timeline extends React.Component
                 </span>:
               </div>
               <div className='timeline__content'>
-                { msg.event.content.body }
+                { msg.getContent().body }
               </div>
               <div className='timeline__status'>
                 { msg.isSending() ? '[sending]' : '' }