Refactor state.js a bit

src/api/pushshift/index.js

@@ -1,6 +1,6 @@
 import { fetchJson } from '../../utils'
 
-const chunkSize = 100;
+export const chunkSize = 100;
 const postURL    = 'https://api.pushshift.io/reddit/submission/search/?ids='
 const commentURL = `https://api.pushshift.io/reddit/comment/search/?size=${chunkSize}&sort=asc&fields=author,body,created_utc,id,link_id,parent_id,retrieved_on,retrieved_utc,score,subreddit&q=*&link_id=`
 

src/pages/thread/LoadMore.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import {connect, maxCommentsDefault} from '../../state'
+import {connect, getMaxComments, maxCommentsDefault} from '../../state'
 
 const loadMore = (props) => {
-  const maxCommentsPreferred = props.global.getMaxComments()
+  const maxCommentsPreferred = getMaxComments()
 
   if (props.reloadingComments)
     return <p className='loading-more'><span>loading...</span></p>

src/pages/thread/SortBy.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import {connect, sort, filter, maxCommentsLimit} from '../../state'
+import {connect, sort, filter, saveMaxComments, minCommentsLimit, maxCommentsLimit} from '../../state'
 
 const sortBy = props => {
   const [maxCommentsField, setMaxCommentsField] = useState(props.global.state.maxComments)
@@ -40,10 +40,11 @@ const sortBy = props => {
     <input id='maxComments'
       onKeyDown={e => e.key == "Enter" && e.target.blur()}
       onChange= {e => setMaxCommentsField(parseInt(e.target.value))}
-      onBlur=   {e => e.target.value = props.global.saveMaxComments(e.target.value)}
+      onBlur=   {e => e.target.value = 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' />
+      defaultValue={props.global.state.maxComments} type='number' maxLength='5' required
+      min={minCommentsLimit} max={maxCommentsLimit} step={minCommentsLimit} />
   </span>
   { maxCommentsField > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit && !props.reloadingComments &&
   <span className='nowrap'>

src/state.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Subscribe, Container } from 'unstated'
 import { get, put } from './utils'
+import { chunkSize } from './api/pushshift'
 
 // Sort types for comments
 export const sort = {
@@ -19,8 +20,21 @@ export const filter = {
 }
 
 export const maxCommentsDefault = 800
+export const minCommentsLimit   = chunkSize
 export const maxCommentsLimit   = 20000
 
+// Contrains, saves, and returns it, but does not change the state (does not load more comments)
+export const saveMaxComments = maxComments => {
+  maxComments = Math.min(Math.round(maxComments), maxCommentsLimit)
+  if (!(maxComments >= minCommentsLimit))  // also true when maxComments isn't a number
+    maxComments = minCommentsLimit
+  put(maxCommentsKey, maxComments)
+  return maxComments
+}
+
+// Gets the saved setting, regardless of the current state
+export const getMaxComments = () => get(maxCommentsKey, maxCommentsDefault)
+
 // Keys for localStorage
 const sortKey = 'commentSort'
 const filterKey = 'commentFilter'
@@ -46,20 +60,8 @@ 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
-      maxComments = 100
-    put(maxCommentsKey, maxComments)
-    return maxComments
-  }
-
-  // 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()})
+  loadMaxComments = () => this.setState({maxComments: getMaxComments()})
 
   // Sets the current state loading moreComments, ignoring the saved setting
   loadMoreComments = moreComments => this.setState({maxComments: this.state.maxComments + moreComments})