diff --git a/dist/main.css b/dist/main.css
index 7dd7723..31097cb 100644
--- a/dist/main.css
+++ b/dist/main.css
@@ -1 +1 @@
-html,body{margin:0;padding:0;background-color:#262626;font-family:verdana,arial,helvetica,sans-serif}.wait{cursor:wait}.main{margin:15px;color:#fff}.removed{background-color:#840c09}.deleted{background-color:#00007d}.removed-text{color:#c70300}.deleted-text{color:blue}a{color:#8cb3d9}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:#6a98af}.author:not([href]){color:inherit;text-decoration:none}.space{margin-left:5px}select{background:transparent;border:0;color:#828282}header{background-color:#c70300;display:flex;justify-content:space-between;align-items:center;padding:10px}header #header a{color:#fff}header #header h1{margin:7px 0;text-align:center}header #header h1 a{transition:color .3s}header #header h1 a:hover{text-decoration:none;color:#ff8b88}header #header nav a{margin:0 7px;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text,header #status #status-helpurl{color:#fff;margin:0 20px 0 0}header #status #status-helpurl{font-size:20px}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:#ddd;word-wrap:break-word;max-width:800px;background-color:#161616}#main-box h2{margin:20px 0px 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box .highlighted{animation:highlighted-anim 3s ease-out}@keyframes highlighted-anim{0%{background-color:#add8e6}100%{background-color:#161616}}#main-box .question{font-size:18px;color:#add8e6}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{min-width:240px;margin:0 0 8px 0;padding:5px 8px 5px 20px;border:1px solid #333;border-radius:3px;color:#ddd;font-size:14px}.comment .comment-head{font-size:10px}.comment .comment-collapse{cursor:pointer}.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:#828282;font-style:oblique}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:#828282}.comment .comment-poster{color:#ddd;background-color:#0055df;padding:0 2px;border-radius:3px}.comment .comment-score{color:#b4b4b4;font-weight:bold}.comment .comment-time{color:#828282}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:#828282;font-weight:bold;font-size:10px;margin-right:4px;cursor:pointer}.comment-odd{background-color:#121212}.comment-even{background-color:#161616}#comment-info{margin-top:13px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#sort-by{color:#828282;font-size:12px;margin:5px 0 10px}#comment-info{color:#ca302c;margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#comment-sort,#comment-sort input{color:gray;font-size:12px;margin:5px 0;background-color:#262626}#comment-sort input{border-color:#767676}#comment-sort input[type=number]{width:54px;appearance:textfield}#comment-sort input[type=number]:hover,#comment-sort input[type=number]:focus{appearance:none}#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:#ddd}#comment-sort option{color:#ddd;background-color:#262626}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1155px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0px;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:#646464;font-size:13px;font-weight:bold;text-align:center}.thread .thread-content{flex:1;float:left;margin-left:3px}.thread .link-flair{display:inline-block;color:#c8c8c8;background-color:#404040;margin-right:5px;border:1px solid #4d4d4d;border-radius:2px;padding:0 2px;font-size:10px}.thread .thread-title{color:#a6a6a6;margin-right:5px}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:#888;font-size:10px}.thread .thread-selftext{border:1px solid #666;border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:#ddd;font-size:14px}.thread .thread-selftext p{margin:5px 0;line-height:20px}.thread .thread-selftext a:hover{text-decoration:none}.thread .thread-selftext p:first-child{margin-top:0px}.thread .thread-selftext p:last-child{margin-bottom:0px}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:#828282;font-size:10px;margin-top:2px}.thread .total-comments{color:#828282;font-size:10px;margin:4px 0}.thread .grey-link,.thread .grey-link:link,.thread .grey-link:visited,.thread .grey-link:hover,.thread .grey-link:focus,.thread .grey-link:active{color:#828282;margin-right:4px}.view-rest-of-comment{background-color:#264d73;border-color:#2966a3;font-size:13px;padding:10px;color:#ccc;margin-bottom:10px}.load-more a{color:#6a98af;font-weight:bold;font-size:10px;margin-left:16px;cursor:pointer}.post-rank{min-width:20px;color:#505050;font-size:16px;text-align:right;margin:14px 4px 0 0}
+html,body{margin:0;padding:0;background-color:#262626;font-family:verdana,arial,helvetica,sans-serif}.wait{cursor:wait}.main{margin:15px;color:#fff}.removed{background-color:#840c09}.deleted{background-color:#00007d}.removed-text{color:#c70300}.deleted-text{color:blue}a{color:#8cb3d9}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:#6a98af}.author:not([href]){color:inherit;text-decoration:none}.space{margin-left:5px}select{background:transparent;border:0;color:#828282}header{background-color:#c70300;display:flex;justify-content:space-between;align-items:center;padding:10px}header #header a{color:#fff}header #header h1{margin:7px 0;text-align:center}header #header h1 a{transition:color .3s}header #header h1 a:hover{text-decoration:none;color:#ff8b88}header #header nav a{margin:0 7px;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text,header #status #status-helpurl{color:#fff;margin:0 20px 0 0}header #status #status-helpurl{font-size:20px}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:#ddd;word-wrap:break-word;max-width:800px;background-color:#161616}#main-box h2{margin:20px 0px 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box .highlighted{animation:highlighted-anim 3s ease-out}@keyframes highlighted-anim{0%{background-color:#add8e6}100%{background-color:#161616}}#main-box .question{font-size:18px;color:#add8e6}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{min-width:240px;margin:0 0 8px 0;padding:5px 8px 5px 20px;border:1px solid #333;border-radius:3px;color:#ddd;font-size:14px}.comment .comment-head{font-size:10px}.comment .comment-collapse{cursor:pointer}.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:#828282;font-style:oblique}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:#828282}.comment .comment-poster{color:#ddd;background-color:#0055df;padding:0 2px;border-radius:3px}.comment .comment-score{color:#b4b4b4;font-weight:bold}.comment .comment-time{color:#828282}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:#828282;font-weight:bold;font-size:10px;margin-right:4px;cursor:pointer}.comment-odd{background-color:#121212}.comment-even{background-color:#161616}#comment-info{margin-top:13px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#sort-by{color:#828282;font-size:12px;margin:5px 0 10px}#comment-info{color:#ca302c;margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#comment-sort,#comment-sort input{color:gray;font-size:12px;margin:5px 0;background-color:#262626}#comment-sort input{border-color:#767676}#comment-sort input[type=number]{width:54px;appearance:textfield}#comment-sort input[type=number]:hover,#comment-sort input[type=number]:focus{appearance:none}#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:#ddd}#comment-sort option{color:#ddd;background-color:#262626}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1155px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0px;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:#646464;font-size:13px;font-weight:bold;text-align:center}.thread .thread-content{flex:1;float:left;margin-left:3px}.thread .link-flair{display:inline-block;color:#c8c8c8;background-color:#404040;margin-right:5px;border:1px solid #4d4d4d;border-radius:2px;padding:0 2px;font-size:10px}.thread .thread-title{color:#a6a6a6;margin-right:5px}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:#888;font-size:10px}.thread .thread-selftext{border:1px solid #666;border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:#ddd;font-size:14px}.thread .thread-selftext p{margin:5px 0;line-height:20px}.thread .thread-selftext a:hover{text-decoration:none}.thread .thread-selftext p:first-child{margin-top:0px}.thread .thread-selftext p:last-child{margin-bottom:0px}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:#828282;font-size:10px;margin-top:2px}.thread .total-comments{color:#828282;font-size:10px;margin:4px 0}.thread .grey-link,.thread .grey-link:link,.thread .grey-link:visited,.thread .grey-link:hover,.thread .grey-link:focus,.thread .grey-link:active{color:#828282;margin-right:4px}.view-rest-of-comment{background-color:#264d73;border-color:#2966a3;font-size:13px;padding:10px;color:#ccc;margin-bottom:10px}.load-more a{font-weight:bold;font-size:10px;margin-left:16px;cursor:pointer}.loading-more span{color:#8cb3d9;font-weight:bold;font-size:10px;margin-left:16px}.post-rank{min-width:20px;color:#505050;font-size:16px;text-align:right;margin:14px 4px 0 0}
diff --git a/src/api/pushshift/index.js b/src/api/pushshift/index.js
index b9bd991..d6a72d1 100644
--- a/src/api/pushshift/index.js
+++ b/src/api/pushshift/index.js
@@ -93,10 +93,11 @@ export const getComments = async (allComments, threadID, maxComments, after) =>
parent_id: c.parent_id?.substring(3) || threadID,
link_id: c.link_id?.substring(3) || threadID
}))
- if (comments.length < chunkSize/2 || chunks <= 1)
- break
+ if (comments.length < chunkSize/2)
+ return [ comments[comments.length - 1].created_utc, true ]
+ if (chunks <= 1)
+ return [ comments[comments.length - 1].created_utc, false ]
chunks--
after = Math.max(comments[comments.length - 1].created_utc - 1, after + 1)
}
- return comments[comments.length - 1].created_utc
}
diff --git a/src/pages/thread/CommentSection.js b/src/pages/thread/CommentSection.js
index 27c5c06..a75f498 100644
--- a/src/pages/thread/CommentSection.js
+++ b/src/pages/thread/CommentSection.js
@@ -1,6 +1,6 @@
import React from 'react'
import Comment from './Comment'
-import {connect, sort, filter, maxCommentsDefault} from '../../state'
+import {sort, filter} from '../../state'
import {
topSort, bottomSort, newSort, oldSort,
showRemovedAndDeleted, showRemoved, showDeleted
@@ -71,8 +71,7 @@ const filterCommentTree = (comments, filterFunction) => {
const commentSection = (props) => {
console.time('render comment section')
const commentTree = unflatten(props.comments, props.root, props.removed, props.deleted)
- const {commentFilter, commentSort} = props.global.state
- const maxCommentsPreferred = props.global.getMaxComments()
+ const {commentFilter, commentSort} = props
if (commentFilter === filter.removedDeleted) {
filterCommentTree(commentTree, showRemovedAndDeleted)
@@ -95,26 +94,29 @@ const commentSection = (props) => {
return (
commentTree.length !== 0
- ? <> {commentTree.map(comment => (
+ ? commentTree.map(comment => (
- ))}
-
- {maxCommentsPreferred <= maxCommentsDefault / 2 &&
- props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments
- }
- props.global.loadMoreComments(maxCommentsDefault)}>load {maxCommentsDefault} more comments
- {maxCommentsPreferred >= maxCommentsDefault * 2 &&
- props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments
- }
-
-
+ ))
: No comments found
)
}
-export default connect(commentSection)
+const areEqual = (prevProps, nextProps) => {
+ if (prevProps.commentFilter !== nextProps.commentFilter ||
+ prevProps.commentSort !== nextProps.commentSort ||
+ prevProps.root !== nextProps.root)
+ return false
+ if (nextProps.reloadingComments)
+ return true
+ return prevProps.total === nextProps.total &&
+ prevProps.removed.length === nextProps.removed.length &&
+ prevProps.deleted.length === nextProps.deleted.length &&
+ prevProps.postAuthor === nextProps.postAuthor
+}
+
+export default React.memo(commentSection, areEqual)
diff --git a/src/pages/thread/LoadMore.js b/src/pages/thread/LoadMore.js
new file mode 100644
index 0000000..4bad834
--- /dev/null
+++ b/src/pages/thread/LoadMore.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import {connect, maxCommentsDefault} from '../../state'
+
+const loadMore = (props) => {
+ const maxCommentsPreferred = props.global.getMaxComments()
+
+ if (props.reloadingComments)
+ return loading...
+ else if (props.loadedAllComments)
+ return
+ props.global.loadMoreComments(maxCommentsDefault)}>load new comments
+
+ else
+ return
+ {maxCommentsPreferred <= maxCommentsDefault / 2 &&
+ props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments
+ }
+ props.global.loadMoreComments(maxCommentsDefault)}>load {maxCommentsDefault} more comments
+ {maxCommentsPreferred >= maxCommentsDefault * 2 &&
+ props.global.loadMoreComments(maxCommentsPreferred)}>load {maxCommentsPreferred} more comments
+ }
+
+}
+
+export default connect(loadMore)
diff --git a/src/pages/thread/index.js b/src/pages/thread/index.js
index 3ea81ff..3149a0b 100644
--- a/src/pages/thread/index.js
+++ b/src/pages/thread/index.js
@@ -14,6 +14,7 @@ import Post from '../common/Post'
import CommentSection from './CommentSection'
import SortBy from './SortBy'
import CommentInfo from './CommentInfo'
+import LoadMore from './LoadMore'
class Thread extends React.Component {
state = {
@@ -21,6 +22,7 @@ class Thread extends React.Component {
pushshiftCommentLookup: new Map(),
removed: [],
deleted: [],
+ loadedAllComments: false,
loadingComments: true,
reloadingComments: false
}
@@ -87,7 +89,7 @@ class Thread extends React.Component {
// Get comment ids from pushshift
getPushshiftComments(pushshiftCommentLookup, threadID, newCommentCount, after)
- .then(lastCreatedUtc => {
+ .then(([lastCreatedUtc, loadedAllComments]) => {
console.log(`Pushshift: ${pushshiftCommentLookup.size} comments`)
const ids = []
const missingIds = new Set()
@@ -151,6 +153,7 @@ class Thread extends React.Component {
pushshiftCommentLookup,
removed,
deleted,
+ loadedAllComments,
loadingComments: false,
reloadingComments: false
})
@@ -186,11 +189,11 @@ class Thread extends React.Component {
const root = isSingleComment ? commentID : id
return (
-
+ <>
{
(!this.state.loadingComments && root) &&
-
+ <>
-
+
+
}
-
+
)
}
}
diff --git a/src/sass/thread.sass b/src/sass/thread.sass
index 98bea9d..09a8408 100644
--- a/src/sass/thread.sass
+++ b/src/sass/thread.sass
@@ -143,8 +143,13 @@
.load-more a
- color: $author
font-weight: bold
font-size: 10px
margin-left: 16px
cursor: pointer
+
+.loading-more span
+ color: $link
+ font-weight: bold
+ font-size: 10px
+ margin-left: 16px