prehistoric-systems/removeddit
1
0
Fork 0
mirror of https://github.com/gurnec/removeddit.git synced 2026-03-11 08:54:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add feedback after 'load more comments' completes

Browse source
This commit is contained in:
Christopher Gurnee 2022-02-26 12:52:24 -05:00
parent fb327e7b94
commit 94d4514922
5 changed files with 42 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/main.css vendored
View file

File diff suppressed because one or more lines are too long

42
src/pages/thread/LoadMore.js
View file

@ -1,25 +1,37 @@
import React from 'react'
import {connect, getMaxComments, maxCommentsDefault} from '../../state'
let lastTotal
const loadMoreComments = (props, maxComments) => {
lastTotal = props.total
props.global.loadMoreComments(maxComments)
}
const loadMore = (props) => {
const maxCommentsPreferred = getMaxComments()
let loadElements
if (props.reloadingComments)
return <p className='loading-more'><span>loading...</span></p>
else if (props.loadedAllComments)
return <p className='load-more'>
<a onClick={() => props.global.loadMoreComments(maxCommentsDefault)}>load new comments</a>
</p>
else
return <p className='load-more'>
{maxCommentsPreferred <= maxCommentsDefault / 2 &&
<a onClick={() => props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments</a>
}
<a onClick={() => props.global.loadMoreComments(maxCommentsDefault)}>load {maxCommentsDefault} more comments</a>
{maxCommentsPreferred >= maxCommentsDefault * 2 &&
<a onClick={() => props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments</a>
}
</p>
loadElements = [<span key='loading'>loading...</span>]
else {
if (props.loadedAllComments)
loadElements = [<a key='default' onClick={() => loadMoreComments(props, maxCommentsDefault)}>load new comments</a>]
else {
loadElements = []
if (maxCommentsPreferred <= maxCommentsDefault / 2)
loadElements.push(<a key='pref' onClick={() => loadMoreComments(props, maxCommentsPreferred)}>load {maxCommentsPreferred} more comments</a>)
loadElements.push(<a key='default' onClick={() => loadMoreComments(props, maxCommentsDefault)}>load {maxCommentsDefault} more comments</a>)
if (maxCommentsPreferred >= maxCommentsDefault * 2)
loadElements.push(<a key='pref' onClick={() => loadMoreComments(props, maxCommentsPreferred)}>load {maxCommentsPreferred} more comments</a>)
}
if (lastTotal !== undefined) {
const newComments = props.total - lastTotal
loadElements.push(<span key='loaded' className='fade'>
{newComments > 0 ? `loaded ${newComments} more comments` : 'no new comments found'}
</span>)
}
}
return <p className='load-more'>{loadElements}</p>
}
export default connect(loadMore)

1
src/pages/thread/index.js
View file

@ -227,6 +227,7 @@ class Thread extends React.Component {
<LoadMore
loadedAllComments={this.state.loadedAllComments}
reloadingComments={this.state.reloadingComments}
total={this.state.pushshiftCommentLookup.size}
/>
</>
}

2
src/sass/about.sass
View file

@ -24,8 +24,6 @@
@keyframes highlighted-anim
0%
background-color: lightblue
100%
background-color: #161616
.question
font-size: 18px

20
src/sass/thread.sass
View file

@ -142,14 +142,20 @@
margin-bottom: 10px
.load-more a
font-weight: bold
font-size: 10px
.load-more
font-weight: bold
font-size: 10px
a
margin-left: 16px
cursor: pointer
.loading-more span
color: $link
font-weight: bold
font-size: 10px
span
margin-left: 16px
.fade
animation: fade-anim 3s 2s ease-in-out forwards
@keyframes fade-anim
100%
color: $background