Add "max. comments to download" setting

src/api/pushshift/index.js

@@ -7,9 +7,6 @@ const commentURL = `https://api.pushshift.io/reddit/comment/search/?size=${chunk
 const sleep = ms =>
   new Promise(slept => setTimeout(slept, ms))
 
-const max = (a, b) =>
-  a > b ? a : b
-
 export const getPost = threadID =>
   fetchJson(`${postURL}${threadID}`)
     .then(({ data }) => data[0])
@@ -40,14 +37,14 @@ const fetchComments = (threadID, after, delay) =>
         .then(() => fetchComments(threadID, after, delay * 2))
     })
 
-export const getComments = (threadID, chunks = 10, after = 0, delay = 500) =>
+const doGetComments = (threadID, chunks = 10, after = 0, delay = 500) =>
   fetchComments(threadID, after, delay)
     .then(([comments, newDelay]) => {
       if (comments.length < chunkSize/2 || chunks <= 1)
         return comments;
-      const newAfter = max(comments[comments.length - 1].created_utc - 1, after + 1);
+      const newAfter = Math.max(comments[comments.length - 1].created_utc - 1, after + 1);
       return (newDelay > 500 ? sleep(newDelay / 2) : Promise.resolve())
-        .then(() => getComments(threadID, chunks - 1, newAfter, newDelay))
+        .then(() => doGetComments(threadID, chunks - 1, newAfter, newDelay))
         .then(remainingComments => {
           const seenIDs = new Set(comments.map(c => c.id));
           for (var i = 0; i < remainingComments.length; i++) {
@@ -58,3 +55,6 @@ export const getComments = (threadID, chunks = 10, after = 0, delay = 500) =>
           return comments;
         })
     })
+
+export const getComments = (threadID, maxComments) =>
+  doGetComments(threadID, Math.ceil(maxComments / chunkSize))

src/pages/thread/SortBy.js

@@ -1,26 +1,42 @@
-import React from 'react'
-import {connect, sort, filter} from '../../state'
+import React, { useState } from 'react'
+import {connect, sort, filter, maxCommentsLimit} from '../../state'
 
-const sortBy = props => (
+const sortBy = props => {
+  const [reloadVisible, setReloadVisible] = useState(false)
+
+  return (
   <div id='comment-sort'>
-  sorted by:
+  <label htmlFor='commentSort'>sorted by:</label>
     <span className='space' />
-    <select onChange={e => props.global.setCommentSort(e.target.value)} defaultValue={props.global.state.commentSort}>
+    <select id='commentSort' onChange={e => props.global.setCommentSort(e.target.value)} defaultValue={props.global.state.commentSort}>
       <option value={sort.top}>top</option>
       <option value={sort.bottom}>bottom</option>
       <option value={sort.new}>new</option>
       <option value={sort.old}>old</option>
     </select>
     <span className='space' />
-  show:
+  <label htmlFor='commentFilter'>show:</label>
     <span className='space' />
-    <select onChange={e => props.global.setCommentFilter(e.target.value)} defaultValue={props.global.state.commentFilter}>
+    <select id='commentFilter' onChange={e => props.global.setCommentFilter(e.target.value)} defaultValue={props.global.state.commentFilter}>
       <option value={filter.all}>All comments</option>
       <option value={filter.removedDeleted}>Removed and deleted</option>
       <option value={filter.removed}>Removed</option>
       <option value={filter.deleted}>Deleted</option>
     </select>
+    <span className='space' />
+  <label htmlFor='maxComments'>max. to download:</label>
+    <span className='space' />
+    <input id='maxComments' onChange={e => {
+      if (e.target.value > props.global.state.maxComments)
+        setReloadVisible(true)
+      props.global.setMaxComments(e.target.value)
+    }} value={props.global.state.maxComments} type='number' size='5' maxLength='5' required min='100' max={maxCommentsLimit} step='100' />
+  {reloadVisible && <>
+    <span className='space' />
+    <input onClick={() => location.replace(location.href)} type='button' value='Reload' />
+  </>}
   </div>
-)
+  )
+}
 
 export default connect(sortBy)

src/pages/thread/index.js

@@ -66,7 +66,7 @@ class Thread extends React.Component {
       })
 
     // Get comment ids from pushshift
-    getPushshiftComments(threadID)
+    getPushshiftComments(threadID, this.props.global.state.maxComments)
       .then(pushshiftComments => {
         console.log(`Pushshift: ${pushshiftComments.length} comments`)
         const pushshiftCommentLookup = new Map(pushshiftComments.map(c => [c.id, c]))

src/sass/post.sass

@@ -7,7 +7,11 @@
   font-size: 16px
 
 
-#comment-sort 
+#comment-sort, #comment-sort input
   color: #808080
   font-size: 12px
-  margin: 5px 0 10px
+  margin: 5px 0
+  background-color: $background
+
+#comment-sort input[type='number']:focus
+  color: #ffffff

src/state.js

@@ -18,14 +18,18 @@ export const filter = {
   deleted: 'SHOW_DELETED'
 }
 
+export const maxCommentsLimit = 20000
+
 // Keys for localStorage
 const sortKey = 'commentSort'
 const filterKey = 'commentFilter'
+const maxCommentsKey = 'maxComments'
 
 class GlobalState extends Container {
   state = {
     commentSort: get(sortKey, sort.top),
     commentFilter: get(filterKey, filter.removedDeleted),
+    maxComments: get(maxCommentsKey, 800),
     statusText: '',
     statusImage: undefined
   }
@@ -40,6 +44,14 @@ class GlobalState extends Container {
     this.setState({commentFilter: filterType})
   }
 
+  setMaxComments (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})
+  }
+
   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'})