fetch backlog

components/chat.js

@@ -13,6 +13,7 @@ const Event = require('./events/Event.js')
 const Info = require('./info.js')
 const Input = require('./input.js')
 const User = require('./events/user.js')
+const Loading = require('./loading.js')
 
 jdenticon.config = {
     lightness: {
@@ -100,6 +101,9 @@ let chat = create({
   },
 
   paginateBackwards: function() {
+    if (this.state.loading) {
+      return
+    }
     let client = this.props.client
     client.paginateEventTimeline(client.getRoom(this.props.roomId).getLiveTimeline(), {backwards: true}).then(() => {
       this.setState({loading: false})
@@ -136,8 +140,6 @@ let chat = create({
     let liveTimeline = room.getLiveTimeline()
     let liveTimelineEvents = liveTimeline.getEvents()
 
-    // fetch more backlog if we don't have enough events
-
     let events = []
     if (liveTimelineEvents.length > 0) {
       liveTimelineEvents.forEach((MatrixEvent) => {
@@ -160,7 +162,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} onReplyClick={this.onReplyClick}/>
+        return <EventGroup key={`${this.props.roomId}-${events[0].event_id}`} events={events} client={this.props.client} room={room} onReplyClick={this.onReplyClick}/>
       })
     }
     //TODO: replace with something that only renders events in view
@@ -169,12 +171,12 @@ let chat = create({
         <Info room={room} />
         <div className="chat" ref={this.setRef}>
           <div className="events">
-            <button onClick={this.paginateBackwards}>
-              load older messages</button>
-            {this.state.loading &&
-            <div className="loading">
-              LOADING
-            </div>}
+            <div className="paginateBackwards" onClick={this.paginateBackwards}>
+              {this.state.loading ?
+                <Loading/> :
+                <span>load older messages</span>
+              }
+            </div>
             {events}
           </div>
         </div>

components/events/Event.js

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

public/scss/style.scss

@@ -282,6 +282,17 @@ body {
     justify-content: flex-end;
     min-height: 100%;
 
+    .paginateBackwards {
+      align-self: center;
+      border: 0.2rem solid $bg3;
+      background: $bg3;
+      color: $bg5;
+      border-radius: 0.2rem;
+      padding: 0.4rem;
+      cursor: pointer;
+      margin-top: 1rem;
+    }
+
     .eventGroup {
       padding-top: $spacing;
       display: grid;
@@ -479,3 +490,45 @@ body {
 .fg-palet-cyan {
   color: $cyan;
 }
+
+.spinner {
+  align-self: center;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 1rem;
+  height: 1rem;
+  margin: 0.2rem;
+  background-color: white;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}