sliding roomlist

app.js

@@ -24,15 +24,31 @@ backend.sync()
 let App = create({
   displayName: "App",
 
+  getInitialState: function() {
+    return this.checkBackend()
+  },
+
+  checkBackend: function() {
+    let returnValue = null
+    if(backend.hasUpdates()) {
+      returnValue = {
+        rooms: backend.getRooms(),
+        events: backend.getEvents()
+      }
+    }
+    setTimeout(() => {
+      this.setState(this.checkBackend())
+    }, 100)
+    return returnValue
+  },
+
   render: function() {
-    console.log("Render function")
-    let rooms = backend.getRooms()
     return (
       <>
-        <Sidebar rooms={rooms}/>
+        <Sidebar rooms={this.state.rooms}/>
         <div className="main">
           <Info />
-          <Chat events={backend.getEvents()}/>
+          <Chat events={this.state.events}/>
           <Input />
         </div>
       </>

backends/matrix.js

@@ -1,6 +1,6 @@
 class Matrix {
   constructor(user, password, homeserver) {
-    this.a = false
+    this.a = 0
     this.events = {
       "roomId": [
         {sender: "Foks", content: "Hello"},
@@ -18,8 +18,26 @@ class Matrix {
       ]
     }
 
-    this.rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain", "Very long room name abcdefghijklmnopqrstuvwxyz"]
-    this.a = 0
+    //this.rooms = ["Neo", "version 4", "Codename", "Iris", "Let's All Love Lain", "Very long room name abcdefghijklmnopqrstuvwxyz"]
+    this.rooms = {
+      "room0": {
+        name: "Neo",
+        lastEvent: 10
+      },
+      "room1": {
+        name: "v4: iris",
+        lastEvent: 10
+      },
+      "room2": {
+        name: "groups",
+        lastEvent: 10
+      },
+      "room3": {
+        name: "GUI Demo",
+        lastEvent: 0
+      }
+    }
+    this.updates = true
   }
 
   getEvents(roomId) {
@@ -27,18 +45,31 @@ class Matrix {
   }
 
   getRooms() {
-    console.log("getting rooms", this.rooms)
-    return this.rooms
+    let orderList = Object.keys(this.rooms)
+    orderList.sort((a, b) => {
+      return this.rooms[b].lastEvent - this.rooms[a].lastEvent
+    })
+    return {rooms: this.rooms, order: orderList}
+  }
+
+  hasUpdates() {
+    if (this.updates) {
+      this.updates = false
+      return true
+    }
+    return false
   }
 
   sync() {
-    //this.events.push({sender: "Random person", content: "New message"})
-    if (this.a > 0) {
-      console.log("reordering")
-      this.rooms = ["AAAAAAAAAAA"]
+    let rand = this.lastRand
+    while(rand == this.lastRand) {
+      rand = Math.floor(Math.random()*Object.keys(this.rooms).length)
     }
-    console.log(this.a)
-    this.a++
+    this.lastRand = rand
+    let roomId = `room${rand}`
+    let now = new Date().getMilliseconds()
+    this.rooms[roomId].lastEvent = now
+    this.updates = true
     setTimeout(() => {this.sync()}, 2000)
   }
 }

components/filterList.js

@@ -10,7 +10,7 @@ let FilterList = create({
 
   getInitialState: function() {
     return {
-      selection: 0,
+      selection: "room0",
       filter: ""
     }
   },
@@ -37,13 +37,20 @@ let FilterList = create({
   },
 
   render: function() {
-    let items = this.props.items.map((item, id) => {
+    let items = Object.keys(this.props.items).map((itemKey, id) => {
+      let index = id
+      if (this.props.order != undefined) {
+        index = this.props.order.indexOf(itemKey)
+      }
+      let item = this.props.items[itemKey]
+
       let props = {
-        selected:  this.state.selection == id,
+        selected:  this.state.selection == itemKey,
         filter:  this.state.filter,
         content: item,
-        key:     id,
-        listId:  id,
+        key:     itemKey,
+        listId:  itemKey,
+        order:   index,
         select:  this.select,
       }
       return React.createElement(this.props.element, props)

components/sidebar.js

@@ -12,9 +12,8 @@ let RoomListItem = create({
 
   getInitialState: function() {
     return {
-      filterName: this.props.content.toUpperCase(),
-      unread: Math.random() > 0.7,
-      pos: this.props.listId
+      filterName: this.props.content.name.toUpperCase(),
+      unread: Math.random() > 0.7
     }
   },
 
@@ -37,9 +36,9 @@ let RoomListItem = create({
     if (this.state.unread) {
       className += " unread"
     }
-    return <div className={className} ref={this.setRef} style={{transform: `translate3d(0, ${this.props.listId}00%, 0)`}}>
-      <svg id="avatar" data-jdenticon-value={this.props.content}></svg>
-      <span id="name">{this.props.content}</span>
+    return <div className={className} ref={this.setRef} style={{transform: `translate3d(0, ${this.props.order}00%, 0)`}}>
+      <svg id="avatar" data-jdenticon-value={this.props.content.name}></svg>
+      <span id="name">{this.props.content.name}</span>
     </div>
   }
 })
@@ -62,7 +61,7 @@ let Sidebar = create({
 
   render: function() {
     return <div className="sidebar">
-      <FilterList items={this.props.rooms} element={RoomListItem}/>
+      <FilterList items={this.props.rooms.rooms} order={this.props.rooms.order} element={RoomListItem}/>
     </div>
   }
 })

public/scss/style.scss

@@ -104,7 +104,7 @@ body {
   width: 100%;
   box-sizing: border-box;
   border-bottom: 1px solid lighten($bg1, 3);
-  transition: 3s;
+  transition: 0.2s;
   background: $bg0;
 
   &:hover {