Browse Source

fetch backlog

master
f0x 1 year 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')
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>


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

@@ -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>


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

@@ -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);
}
}

Loading…
Cancel
Save