Browse Source

fetch backlog

master
f0x 5 months ago
parent
commit
4e2043a0a8
3 changed files with 68 additions and 10 deletions
  1. 11
    9
      components/chat.js
  2. 4
    1
      components/events/Event.js
  3. 53
    0
      public/scss/style.scss

+ 11
- 9
components/chat.js View File

@@ -13,6 +13,7 @@ const Event = require('./events/Event.js')
13 13
 const Info = require('./info.js')
14 14
 const Input = require('./input.js')
15 15
 const User = require('./events/user.js')
16
+const Loading = require('./loading.js')
16 17
 
17 18
 jdenticon.config = {
18 19
     lightness: {
@@ -100,6 +101,9 @@ let chat = create({
100 101
   },
101 102
 
102 103
   paginateBackwards: function() {
104
+    if (this.state.loading) {
105
+      return
106
+    }
103 107
     let client = this.props.client
104 108
     client.paginateEventTimeline(client.getRoom(this.props.roomId).getLiveTimeline(), {backwards: true}).then(() => {
105 109
       this.setState({loading: false})
@@ -136,8 +140,6 @@ let chat = create({
136 140
     let liveTimeline = room.getLiveTimeline()
137 141
     let liveTimelineEvents = liveTimeline.getEvents()
138 142
 
139
-    // fetch more backlog if we don't have enough events
140
-
141 143
     let events = []
142 144
     if (liveTimelineEvents.length > 0) {
143 145
       liveTimelineEvents.forEach((MatrixEvent) => {
@@ -160,7 +162,7 @@ let chat = create({
160 162
       messageGroups.groups.push(messageGroups.current)
161 163
 
162 164
       events = messageGroups.groups.map((events, id) => {
163
-        return <EventGroup key={`${this.props.roomId}-${id}`} events={events} client={this.props.client} room={room} onReplyClick={this.onReplyClick}/>
165
+        return <EventGroup key={`${this.props.roomId}-${events[0].event_id}`} events={events} client={this.props.client} room={room} onReplyClick={this.onReplyClick}/>
164 166
       })
165 167
     }
166 168
     //TODO: replace with something that only renders events in view
@@ -169,12 +171,12 @@ let chat = create({
169 171
         <Info room={room} />
170 172
         <div className="chat" ref={this.setRef}>
171 173
           <div className="events">
172
-            <button onClick={this.paginateBackwards}>
173
-              load older messages</button>
174
-            {this.state.loading &&
175
-            <div className="loading">
176
-              LOADING
177
-            </div>}
174
+            <div className="paginateBackwards" onClick={this.paginateBackwards}>
175
+              {this.state.loading ?
176
+                <Loading/> :
177
+                <span>load older messages</span>
178
+              }
179
+            </div>
178 180
             {events}
179 181
           </div>
180 182
         </div>

+ 4
- 1
components/events/Event.js View File

@@ -64,7 +64,10 @@ let Event = create({
64 64
     }
65 65
 
66 66
     return (
67
-      <div className={"event" + state} onClick={() => {this.props.onReplyClick(event)}}>
67
+      <div className={"event" + state} onClick={() => {
68
+          this.props.onReplyClick(event)
69
+          console.log(event)
70
+        }}>
68 71
         {reply}
69 72
         {element}
70 73
       </div>

+ 53
- 0
public/scss/style.scss View File

@@ -282,6 +282,17 @@ body {
282 282
     justify-content: flex-end;
283 283
     min-height: 100%;
284 284
 
285
+    .paginateBackwards {
286
+      align-self: center;
287
+      border: 0.2rem solid $bg3;
288
+      background: $bg3;
289
+      color: $bg5;
290
+      border-radius: 0.2rem;
291
+      padding: 0.4rem;
292
+      cursor: pointer;
293
+      margin-top: 1rem;
294
+    }
295
+
285 296
     .eventGroup {
286 297
       padding-top: $spacing;
287 298
       display: grid;
@@ -479,3 +490,45 @@ body {
479 490
 .fg-palet-cyan {
480 491
   color: $cyan;
481 492
 }
493
+
494
+.spinner {
495
+  align-self: center;
496
+  text-align: center;
497
+}
498
+
499
+.spinner > div {
500
+  width: 1rem;
501
+  height: 1rem;
502
+  margin: 0.2rem;
503
+  background-color: white;
504
+
505
+  border-radius: 100%;
506
+  display: inline-block;
507
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
508
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
509
+}
510
+
511
+.spinner .bounce1 {
512
+  -webkit-animation-delay: -0.32s;
513
+  animation-delay: -0.32s;
514
+}
515
+
516
+.spinner .bounce2 {
517
+  -webkit-animation-delay: -0.16s;
518
+  animation-delay: -0.16s;
519
+}
520
+
521
+@-webkit-keyframes sk-bouncedelay {
522
+  0%, 80%, 100% { -webkit-transform: scale(0) }
523
+  40% { -webkit-transform: scale(1.0) }
524
+}
525
+
526
+@keyframes sk-bouncedelay {
527
+  0%, 80%, 100% {
528
+    -webkit-transform: scale(0);
529
+    transform: scale(0);
530
+  } 40% {
531
+    -webkit-transform: scale(1.0);
532
+    transform: scale(1.0);
533
+  }
534
+}

Loading…
Cancel
Save