integrate sdk differently

app.js

@@ -4,11 +4,9 @@ const ReactDOM = require('react-dom')
 const create = require('create-react-class')
 const Promise = require('bluebird')
 const urllib = require('url')
-
-const Matrix = require('./backends/matrix.js')
+const sdk = require('matrix-js-sdk')
 
 const Sidebar = require('./components/sidebar.js')
-
 const Login = require('./components/Login.js')
 const Info = require('./components/info.js')
 const Chat = require('./components/chat.js')
@@ -25,33 +23,62 @@ let App = create({
   displayName: "App",
 
   getInitialState: function() {
-    return {rooms: {}, events: {}}
+    return {rooms: []}
   },
 
-  checkBackend: function() {
-    if(this.state.backend.hasUpdates()) {
-      console.log("RECEIVING UPDATES FROM BACKEND")
-      this.setState({
-        rooms: this.state.backend.getRooms(),
-        events: this.state.backend.getEvents()
-      })
+  componentDidMount: function() {
+    //check if accessToken is stored in localStorage
+    let accessToken = localStorage.getItem('accessToken')
+    if (localStorage.accessToken != undefined) {
+      let userId = localStorage.getItem('userId')
+      let apiUrl = localStorage.getItem('apiUrl')
+      this.loginCallback(userId, accessToken, apiUrl, true)
     }
-    setTimeout(() => {
-      this.checkBackend()
-    }, 100)
   },
 
-  loginCallback: function(userId, accessToken, apiUrl) {
-    userId = '@' + userId.replace('@', '')
-    let backend = new Matrix(userId, accessToken, apiUrl)
+  loginCallback: function(userId, accessToken, apiUrl, restored) {
+    if (restored) {
+      console.log("Restoring from localStorage")
+    } else {
+      userId = '@' + userId.replace('@', '')
+      localStorage.setItem('userId', userId)
+      localStorage.setItem('accessToken', accessToken)
+      localStorage.setItem('apiUrl', apiUrl)
+    }
+    let client = sdk.createClient({
+      baseUrl: apiUrl,
+      accessToken: accessToken,
+      userId: userId
+    });
+
+    console.log("CLIENT", client)
     this.setState({
-      backend: backend
+      client: client
     })
-    this.checkBackend()
+    this.startClient(client)
+  },
+
+  startClient: function(client) {
+    console.log(this.state)
+    client.on("sync", (state, prevState, data) => {
+      console.log(state)
+      if (state == "ERROR") {
+      } else if (state == "SYNCING") {
+        let rooms = {}
+        client.getRooms().forEach((room) => {
+          rooms[room.roomId] = room
+        })
+        this.setState({rooms: rooms})
+      } else if (state == "PREPARED") {
+      }
+    })
+    client.on("event", (event) => {
+    })
+    client.startClient()
   },
 
   render: function() {
-    if (this.state.backend == undefined) {
+    if (this.state.client == undefined) {
       //Login screen
       return <Login callback={this.loginCallback}/>
     }
@@ -60,7 +87,7 @@ let App = create({
         <Sidebar rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
         <div className="main">
           <Info />
-          <Chat events={this.state.events} backend={this.state.backend} roomId={this.state.roomId}/>
+          <Chat client={this.state.client} roomId={this.state.roomId}/>
           <Input />
         </div>
       </>

components/chat.js

@@ -57,12 +57,20 @@ let chat = create({
   },
 
   render: function() {
-    if (this.props.roomId == undefined || this.props.events[this.props.roomId] == undefined) {
-      //empty screen
-      return <div className="chat" ref={this.setRef}>
+    let empty = (
+      <div className="chat" ref={this.setRef}>
         <div className="events">
         </div>
       </div>
+    )
+    if (this.props.roomId == undefined) {
+      //empty screen
+      return empty
+    }
+
+    let room = this.props.client.getRoom(this.props.roomId)
+    if (room == null) {
+      return empty
     }
 
     let messageGroups = {
@@ -74,22 +82,27 @@ let chat = create({
     // if the sender is the same, add it to the 'current' messageGroup, if not,
     // push the old one to 'groups' and start with a new array.
 
-    this.props.events[this.props.roomId].forEach((event, id) => {
-      if (event.sender != messageGroups.sender) {
-        messageGroups.sender = event.sender
-        if (messageGroups.current.length != 0) {
-          messageGroups.groups.push(messageGroups.current)
+    console.log("GROUPING EVENTS", room.timeline.length)
+    let events = []
+    if (room.timeline.length > 0) {
+      room.timeline.forEach((timeline) => {
+        console.log("TIMELINE", timeline);
+        let event = timeline.event;
+        if (event.sender != messageGroups.sender) {
+          messageGroups.sender = event.sender
+          if (messageGroups.current.length != 0) {
+            messageGroups.groups.push(messageGroups.current)
+          }
+          messageGroups.current = []
         }
-        messageGroups.current = []
-      }
-      messageGroups.current.push(event)
-    })
-    messageGroups.groups.push(messageGroups.current)
-
-    let events = messageGroups.groups.map((events, id) => {
-      return <EventGroup key={id} events={events} backend={this.props.backend}/>
-    })
+        messageGroups.current.push(event)
+      })
+      messageGroups.groups.push(messageGroups.current)
 
+      events = messageGroups.groups.map((events, id) => {
+        return <EventGroup key={id} events={events} client={this.props.client}/>
+      })
+    }
     //TODO: replace with something that only renders events in view
     return <div className="chat" ref={this.setRef}>
       <div className="events">
@@ -116,7 +129,7 @@ let EventGroup = create({
 
   render: function() {
     let events = this.props.events.map((event, id) => {
-      return getRenderedEvent(event, id, this.props.backend)
+      return getRenderedEvent(event, id, this.props.client)
     })
     return <div className="eventGroup">
       <svg id="avatar" ref={this.avatarRef} ></svg>
@@ -128,10 +141,10 @@ let EventGroup = create({
   }
 })
 
-function getRenderedEvent(event, id, backend) {
+function getRenderedEvent(event, id, client) {
   if (event.type == "m.room.message") {
     let msgtype = event.content.msgtype;
-    return React.createElement(defaultValue(elements[msgtype], elements["m.text"]), {event: event, key: id, backend: backend})
+    return React.createElement(defaultValue(elements[msgtype], elements["m.text"]), {event: event, key: id, client: client})
   }
 }
 

components/events/image.js

@@ -10,7 +10,7 @@ let Event = create({
   displayName: "m.image",
 
   getInitialState: function() {
-    let hs = this.props.backend.getHS()
+    let hs = this.props.client.baseUrl
     let event = this.props.event;
     let media_mxc = event.content.url.slice(7);
     let thumb_mxc = event.content.info.thumbnail_url.slice(6);

components/filterList.js

@@ -16,6 +16,7 @@ let FilterList = create({
   },
 
   select: function(id) {
+    console.log("SELECTED", id)
     this.setState({selection: id})
     this.props.callback(id)
   },
@@ -40,6 +41,7 @@ let FilterList = create({
     let keys = Object.keys(this.props.items)
     let items = keys.map((itemKey, id) => {
       let item = this.props.items[itemKey]
+      console.log(item)
       let props = {
         selected:  this.state.selection == itemKey,
         filter:  this.state.filter,

components/sidebar.js

@@ -65,6 +65,7 @@ let Sidebar = create({
   },
 
   render: function() {
+    console.log(this.props.rooms)
     return <div className="sidebar">
       <FilterList items={this.props.rooms} element={RoomListItem} callback={(roomId) => {this.props.selectRoom(roomId)}}/>
     </div>