Improve speed of changing max comments setting

* Just changing it no longer causes all comments to be rerendered
 * Reloading now only reloads comments intead of entire page
 * Reload button correctly hides when new setting <= current

src/pages/thread/SortBy.js

@@ -34,14 +34,13 @@ const sortBy = props => {
   <label htmlFor='maxComments'>max. to download:</label>
     <span className='space' />
     <input id='maxComments' onChange={e => {
-      if (parseInt(e.target.value) > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit)
-        setReloadVisible(true)
+      setReloadVisible(parseInt(e.target.value) > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit)
     }} onBlur={e => {
-      e.target.value = props.global.setMaxComments(e.target.value)
+      e.target.value = props.global.saveMaxComments(e.target.value)
     }} defaultValue={props.global.state.maxComments} type='number' maxLength='5' required min='100' max={maxCommentsLimit} step='100' />
   {reloadVisible && <>
     <span className='space' />
-    <input onClick={() => location.replace(location.href)} type='button' value='Reload' />
+    <input onClick={() => {props.global.loadMaxComments(); setReloadVisible(false)}} type='button' value='Reload' />
   </>}
   </div>
   )

src/pages/thread/index.js

@@ -26,6 +26,7 @@ class Thread extends React.Component {
 
   componentDidMount () {
     const { subreddit, threadID } = this.props.match.params
+    this.curMaxComments = this.props.global.state.maxComments
     this.props.global.setLoading('Loading post...')
 
     // Get post from reddit
@@ -66,6 +67,26 @@ class Thread extends React.Component {
           this.props.global.setLoading('Loading comments from Pushshift...')
       })
 
+    this.getComments()
+  }
+
+  componentDidUpdate () {
+    if (this.props.global.state.maxComments > this.curMaxComments) {
+      this.curMaxComments = this.props.global.state.maxComments
+      this.setState({
+        pushshiftCommentLookup: new Map(),
+        removed: [],
+        deleted: [],
+        loadingComments: true
+      })
+      this.props.global.setLoading('Loading comments from Pushshift...')
+      this.getComments()
+    }
+  }
+
+  getComments () {
+    const { threadID } = this.props.match.params
+
     // Get comment ids from pushshift
     getPushshiftComments(threadID, this.props.global.state.maxComments)
       .then(pushshiftComments => {

src/state.js

@@ -18,7 +18,8 @@ export const filter = {
   deleted: 'SHOW_DELETED'
 }
 
-export const maxCommentsLimit = 20000
+export const maxCommentsDefault = 800
+export const maxCommentsLimit   = 20000
 
 // Keys for localStorage
 const sortKey = 'commentSort'
@@ -29,7 +30,7 @@ class GlobalState extends Container {
   state = {
     commentSort: get(sortKey, sort.top),
     commentFilter: get(filterKey, filter.removedDeleted),
-    maxComments: get(maxCommentsKey, 800),
+    maxComments: get(maxCommentsKey, maxCommentsDefault),
     statusText: '',
     statusImage: undefined
   }
@@ -44,15 +45,16 @@ class GlobalState extends Container {
     this.setState({commentFilter: filterType})
   }
 
-  setMaxComments (maxComments) {
+  saveMaxComments (maxComments) {
     maxComments = Math.min(Math.round(maxComments), maxCommentsLimit)
     if (!(maxComments >= 100))  // also true when maxComments isn't a number
       maxComments = 100
     put(maxCommentsKey, maxComments)
-    this.setState({maxComments})
     return maxComments
   }
 
+  loadMaxComments = () => this.setState({maxComments: get(maxCommentsKey, maxCommentsDefault)})
+
   setSuccess = () => this.setState({statusText: '', statusImage: '/images/success.png'})
   setLoading = (text) => this.setState({statusText: text, statusImage: '/images/loading.gif'})
   setError = (error) => this.setState({statusText: error.message, statusImage: '/images/error.png'})
@@ -63,7 +65,7 @@ class GlobalState extends Container {
 export const connect = Component => {
   return props => (
     <Subscribe to={[GlobalState]}>
-      {gloablState => <Component {...props} global={gloablState} />}
+      {globalState => <Component {...props} global={globalState} />}
     </Subscribe>
   )
 }