sending basic replies

components/chat.js

@@ -56,6 +56,10 @@ let chat = create({
     }
   },
 
+  onReplyClick: function(e) {
+    this.setState({replyEvent: e})
+  },
+
   render: function() {
     let empty = (
       <div className="main">
@@ -100,7 +104,7 @@ let chat = create({
       messageGroups.groups.push(messageGroups.current)
 
       events = messageGroups.groups.map((events, id) => {
-        return <EventGroup key={`${this.props.roomId}-${id}`} events={events} client={this.props.client} room={room}/>
+        return <EventGroup key={`${this.props.roomId}-${id}`} events={events} client={this.props.client} room={room} onReplyClick={this.onReplyClick}/>
       })
     }
     //TODO: replace with something that only renders events in view
@@ -112,7 +116,7 @@ let chat = create({
             {events}
           </div>
         </div>
-        <Input client={this.props.client} roomId={this.props.roomId}/>
+        <Input client={this.props.client} roomId={this.props.roomId} replyEvent={this.state.replyEvent} onReplyClick={this.onReplyClick}/>
       </div>
     )
   }
@@ -146,7 +150,7 @@ let EventGroup = create({
 
   render: function() {
     let events = this.props.events.map((event, key) => {
-      return <Event event={event} key={key} client={this.props.client} room={this.props.room} />
+      return <Event event={event} key={key} client={this.props.client} room={this.props.room} onReplyClick={this.props.onReplyClick}/>
     })
     return <div className="eventGroup">
       {this.state.avatar}

components/events/Event.js

@@ -63,8 +63,7 @@ let Event = create({
     }
 
     return (
-      <div className={"event" + state} onClick={() => {console.log(parsedBody, event)
-        }}>
+      <div className={"event" + state} onClick={() => {this.props.onReplyClick(event)}}>
         {reply}
         {element}
       </div>

components/input.js

@@ -71,6 +71,7 @@ let input = create({
       body: string,
       msgtype: "m.text"
     }
+    content = this.sendReply(content)
     this.props.client.sendEvent(this.props.roomId, "m.room.message", content, (err, res) => {
       console.log(err)
     })
@@ -83,13 +84,33 @@ let input = create({
       format: "org.matrix.custom.html",
       msgtype: "m.text"
     }
+
+    content = this.sendReply(content)
+
     this.props.client.sendEvent(this.props.roomId, "m.room.message", content, (err, res) => {
       console.log(err)
     })
   },
 
+  sendReply: function(content) {
+    if (this.props.replyEvent != undefined) {
+      content['m.relates_to'] = {
+        'm.in_reply_to': {
+          event_id: this.props.replyEvent.event_id
+        }
+      }
+      this.props.onReplyClick()
+    }
+    return content
+  },
+
   render: function() {
     return <div className="input">
+      {this.props.replyEvent &&
+        <div className="replyEvent">
+          {this.props.replyEvent.content.body}
+        </div>
+      }
       <textarea ref={this.setRef} rows="1" spellCheck="false" placeholder="unencrypted message"></textarea>
     </div>
   }

public/scss/style.scss

@@ -361,8 +361,18 @@ body {
 
 .input {
   display: flex;
+  flex-direction: column;
   border-top: $borderwidth solid transparent;
 
+  .replyEvent {
+    border-bottom: $borderwidth/2 solid $bg3;
+    padding: $spacing/2 $spacing;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   textarea {
     background: transparent;
     box-sizing: border-box;