message sending with local echo

app.js

@@ -72,7 +72,12 @@ let App = create({
       } else if (state == "PREPARED") {
       }
     })
-    client.on("event", (event) => {
+    client.on("Room.localEchoUpdated", (event) => {
+      let rooms = {}
+      client.getRooms().forEach((room) => {
+        rooms[room.roomId] = room
+      })
+      this.setState({rooms: rooms})
     })
     client.startClient()
   },
@@ -88,7 +93,7 @@ let App = create({
         <div className="main">
           <Info />
           <Chat client={this.state.client} roomId={this.state.roomId}/>
-          <Input />
+          <Input client={this.state.client} roomId={this.state.roomId}/>
         </div>
       </>
     )

components/chat.js

@@ -82,12 +82,14 @@ 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.
 
-    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.user_id != null) { // localecho messages
+          event.sender = event.user_id
+          event.local = true
+        }
         if (event.sender != messageGroups.sender) {
           messageGroups.sender = event.sender
           if (messageGroups.current.length != 0) {

components/events/text.js

@@ -11,13 +11,14 @@ let Event = create({
 
   render: function() {
     let event = this.props.event;
-    // let eventBody = event.content.body.split("\n").map((line, id) => {
-    //   return <span key={id}>{line}<br/></span>
-    // })
-
     let eventBody = riot.sanitize(event.content.body)
 
-    return <div className="event">
+    let eventClass = "event"
+    if (event.local) {
+      eventClass += " local"
+    }
+
+    return <div className={eventClass}>
       <div
         className={this.props.nested ? "nested" : "body"}
         dangerouslySetInnerHTML={{__html: eventBody}}

components/input.js

@@ -6,9 +6,33 @@ const Promise = require('bluebird')
 
 let input = create({
   displayName: "Input",
+
+  setRef: function(ref) {
+    if (ref !=null) {
+      ref.addEventListener("keydown", (e) => {
+        // only send on plain 'enter'
+        if (e.key == "Enter" && !e.shiftKey && !e.altKey && !e.ctrlKey) {
+          this.send(e)
+        }
+      })
+      this.setState({ref: ref})
+    }
+  },
+
+  send: function(e) {
+    let content = {
+      "body": e.target.value,
+      "msgtype": "m.text"
+    }
+    this.props.client.sendEvent(this.props.roomId, "m.room.message", content, (err, res) => {
+      console.log(err)
+    })
+    e.target.value = ""
+  },
+
   render: function() {
     return <div className="input">
-      <input placeholder="unencrypted message"></input>
+      <input ref={this.setRef} placeholder="unencrypted message"></input>
     </div>
   }
 })

public/scss/style.scss

@@ -4,7 +4,7 @@ $bg1: hsla(228, 12%, 18%, 1);
 $bg2: hsla(228, 12%, 30%, 1);
 $bg3: hsla(228, 12%, 36%, 1);
 $bg4: hsla(228, 12%, 60%, 1);
-$bg6: hsla(228, 12%, 100%, 1);
+$bg5: hsla(228, 12%, 100%, 1);
 
 $red: #CC6666;
 $amber: #DE935F;
@@ -295,6 +295,10 @@ body {
         grid-area: content;
         padding-left: $spacing * 1.2;
 
+        .local {
+          color: $bg4;
+        }
+
         .body {
           /* debug */
           //border: 1px solid $red;