Add 'load more comments' links to the thread's end

src/pages/thread/CommentSection.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Comment from './Comment'
-import {connect, sort, filter} from '../../state'
+import {connect, sort, filter, maxCommentsDefault} from '../../state'
 import {
   topSort, bottomSort, newSort, oldSort,
   showRemovedAndDeleted, showRemoved, showDeleted
@@ -72,6 +72,7 @@ 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()
 
   if (commentFilter === filter.removedDeleted) {
     filterCommentTree(commentTree, showRemovedAndDeleted)
@@ -94,14 +95,24 @@ const commentSection = (props) => {
 
   return (
     commentTree.length !== 0
-      ? commentTree.map(comment => (
+      ? <> {commentTree.map(comment => (
         <Comment
           key={comment.id}
           {...comment}
           depth={0}
           postAuthor={props.postAuthor}
         />
-      ))
+      ))}
+      <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>
+      </>
       : <p>No comments found</p>
   )
 }

src/pages/thread/SortBy.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import {connect, sort, filter, maxCommentsLimit} from '../../state'
 
 const sortBy = props => {
-  const [reloadVisible, setReloadVisible] = useState(false)
+  const [maxCommentsField, setMaxCommentsField] = useState(props.global.state.maxComments)
   const isFirefox = typeof InstallTrigger !== 'undefined'
   let usedMouse;
 
@@ -36,13 +36,12 @@ const sortBy = props => {
     <span className='space' />
     <input id='maxComments'
       onKeyDown={e => e.key == "Enter" && e.target.blur()}
-      onChange= {e =>
-        setReloadVisible(parseInt(e.target.value) > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit)}
+      onChange= {e => setMaxCommentsField(parseInt(e.target.value))}
       onBlur=   {e => e.target.value = props.global.saveMaxComments(e.target.value)}
       { ...(isFirefox ? {
         onClick: e => e.target.focus() } : {}) }
       defaultValue={props.global.state.maxComments} type='number' maxLength='5' required min='100' max={maxCommentsLimit} step='100' />
-  {reloadVisible && !props.reloadingComments && <>
+  {maxCommentsField > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit && !props.reloadingComments && <>
     <span className='space' />
     <input onClick={() => {props.global.loadMaxComments(); setReloadVisible(false)}} type='button' value='Reload' />
   </>}

src/sass/thread.sass

@@ -140,4 +140,11 @@
     padding: 10px
     color: rgb(204, 204, 204)
     margin-bottom: 10px
-    
+
+
+.load-more a
+    color: $author
+    font-weight: bold
+    font-size: 10px
+    margin-left: 16px
+    cursor: pointer

src/state.js

@@ -46,6 +46,7 @@ class GlobalState extends Container {
     this.setState({commentFilter: filterType})
   }
 
+  // Contrains, saves, and returns it, but does not change the state (does not load more comments)
   saveMaxComments (maxComments) {
     maxComments = Math.min(Math.round(maxComments), maxCommentsLimit)
     if (!(maxComments >= 100))  // also true when maxComments isn't a number
@@ -54,7 +55,14 @@ class GlobalState extends Container {
     return maxComments
   }
 
-  loadMaxComments = () => this.setState({maxComments: get(maxCommentsKey, maxCommentsDefault)})
+  // Gets the saved setting, regardless of the current state
+  getMaxComments = () => get(maxCommentsKey, maxCommentsDefault)
+
+  // Sets the current state based on the saved setting (loads more comments)
+  loadMaxComments = () => this.setState({maxComments: this.getMaxComments()})
+
+  // Sets the current state loading moreComments, ignoring the saved setting
+  loadMoreComments = moreComments => this.setState({maxComments: this.state.maxComments + moreComments})
 
   setSuccess = () => {
     this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'})