components are completely backend independant

might not be ideal, hard to code like this

backends/matrix.js

@@ -1,20 +1,15 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const defaultValue = require('default-value');
+
+const components = require('../components/backends/Matrix.js');
+
 class Matrix {
   constructor(user, password, homeserver) {
     this.a = 0
     this.events = {
       "roomId": [
-        {sender: "Foks", content: "Hello"},
-        {sender: "Foks", content: "This is Neo v4"},
-        {sender: "Foks", content: "Here is one test event\nWith\n Multiple\nLines\n:)"},
-        {sender: "Different Foks", content: "Look at these nice colors"},
-        {sender: "Different Foks", content: "And the font"},
-        {sender: "Lain", content: "image"},
-        {sender: "Lain", content: "image"},
-        {sender: "Lain", content: "image"},
-        {sender: "Different Foks", content: "And the avatars"},
-        {sender: "Foks", content: "Every line has it's own message"},
-        {sender: "Foks", content: "But if the sender is the same, we don't repeat the name+image"},
-        {sender: "Foks", content: "Isn't message grouping great?"}
       ]
     }
 
@@ -70,8 +65,47 @@ class Matrix {
     let now = new Date().getMilliseconds()
     this.rooms[roomId].lastEvent = now
     this.updates = true
+
+    let event = {
+      content: {
+        body: "Testing m.text",
+        msgtype: "m.text"
+      },
+      event_id: this.fakeEventId(),
+      origin_server_ts: 1432735824653,
+      room_id: "!jEsUZKDJdhlrceRyVU:domain.com",
+      sender: "@example:domain.com",
+      type: "m.room.message",
+      unsigned: {
+        age: 1234
+      }
+    }
+    this.events["roomId"].push(this.getReactEvent(event))
     setTimeout(() => {this.sync()}, 2000)
   }
+
+  fakeEventId() {
+    let id = ""
+    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+
+    for (let i = 0; i < 32; i++) {
+      id += possible.charAt(Math.floor(Math.random() * possible.length))
+    }
+    return id
+  }
+
+  getReactEvent(event) {
+    let msgTypes = {
+      "m.text": components.text
+    }
+    if (event.type == "m.room.message") {
+      let msgtype = event.content.msgtype
+      return React.createElement(
+        defaultValue(msgTypes[msgtype], components.text),
+        {event: event, key: event.event_id}
+      )
+    }
+  }
 }
 
 

components/chat.js

@@ -6,6 +6,8 @@ const Promise = require('bluebird')
 const debounce = require('debounce')
 const jdenticon = require('jdenticon')
 
+const Matrix = require('./backends/Matrix.js')
+
 jdenticon.config = {
     lightness: {
         color: [0.58, 0.66],
@@ -81,47 +83,31 @@ let EventGroup = create({
   displayName: "EventGroup",
 
   getInitialState: function() {
+    console.log(this.props.events);
     let color = ["red", "green", "yellow", "blue", "purple", "cyan"][Math.floor(Math.random()*6)]
     return {
-      color: color
+      color: color,
+      sender: this.props.events[0].props.event.sender
     }
   },
 
   avatarRef: function(ref) {
-    jdenticon.update(ref, this.props.events[0].sender)
+    jdenticon.update(ref, this.state.sender)
   },
 
   render: function() {
-    let events = this.props.events.map((event, id) => {
-      return <Event event={event} key={id}/>
-    })
+    let events = this.props.events;
+    //let events = this.props.events.map((event, id) => {
+      //return event
+    //})
     return <div className="eventGroup">
       <svg id="avatar" ref={this.avatarRef} ></svg>
       <div className="col">
-        <div id="name" className={`fg-palet-${this.state.color}`}>{this.props.events[0].sender}</div>
+        <div id="name" className={`fg-palet-${this.state.color}`}>{this.state.sender}</div>
         {events}
       </div>
     </div>
   }
 })
 
-let Event = create({
-  displayName: "Event",
-
-  render: function() {
-    //TODO: HTML Sanitize
-    let parsedBody = this.props.event.content.split("\n").map((line, id) => {
-      if (line.startsWith("image")) {
-        return <img key={id} src="neo.png"/>
-      }
-      return <span key={id}>{line}<br/></span>
-    })
-    return <div className="event">
-      <div className="body">
-        {parsedBody}
-      </div>
-    </div>
-  }
-})
-
 module.exports = chat

components/filterList.js

@@ -38,10 +38,6 @@ let FilterList = create({
 
   render: function() {
     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 = {
@@ -50,7 +46,6 @@ let FilterList = create({
         content: item,
         key:     itemKey,
         listId:  itemKey,
-        order:   index,
         select:  this.select,
       }
       return React.createElement(this.props.element, props)

components/sidebar.js

@@ -36,7 +36,7 @@ let RoomListItem = create({
     if (this.state.unread) {
       className += " unread"
     }
-    return <div className={className} ref={this.setRef} style={{transform: `translate3d(0, ${this.props.order}00%, 0)`}}>
+    return <div className={className} ref={this.setRef}>
       <svg id="avatar" data-jdenticon-value={this.props.content.name}></svg>
       <span id="name">{this.props.content.name}</span>
     </div>

package.json

@@ -18,6 +18,7 @@
     "budo": "^11.5.0",
     "create-react-class": "^15.6.3",
     "debounce": "^1.2.0",
+    "default-value": "^1.0.0",
     "del": "^3.0.0",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",

public/scss/style.scss

@@ -87,7 +87,6 @@ body {
 
 .list {
   background: $bg0;
-  position: relative;
 
   div {
     cursor: pointer;
@@ -95,8 +94,6 @@ body {
 }
 
 .roomListItem {
-  position: absolute;
-  top: 0;
   height: 2rem + 2* $spacing;
   display: grid;
   grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;

shrinkwrap.yaml

@@ -8,6 +8,7 @@ dependencies:
   budo: 11.5.0
   create-react-class: 15.6.3
   debounce: 1.2.0
+  default-value: 1.0.0
   del: 3.0.0
   gulp: 4.0.0
   gulp-babel: 8.0.0
@@ -2789,6 +2790,12 @@ packages:
       node: '>= 0.10'
     resolution:
       integrity: sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=
+  /default-value/1.0.0:
+    dependencies:
+      es6-promise-try: 0.0.1
+    dev: false
+    resolution:
+      integrity: sha1-jG9SpaEZP+eP3J+G63HRbJdXyDo=
   /define-properties/1.1.3:
     dependencies:
       object-keys: 1.0.12
@@ -3185,6 +3192,10 @@ packages:
     dev: false
     resolution:
       integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  /es6-promise-try/0.0.1:
+    dev: false
+    resolution:
+      integrity: sha1-EPFA2tJ0Wc75SZc+XSGgh/cnSyA=
   /es6-promisify/6.0.1:
     dev: false
     resolution:
@@ -9439,6 +9450,7 @@ specifiers:
   budo: ^11.5.0
   create-react-class: ^15.6.3
   debounce: ^1.2.0
+  default-value: ^1.0.0
   del: ^3.0.0
   gulp: ^4.0.0
   gulp-babel: ^8.0.0