Skip reloading existing comments from Pushshift

src/api/pushshift/index.js

@@ -67,10 +67,8 @@ export const getPost = async threadID => {
   }
 }
 
-export const getComments = async (threadID, maxComments) => {
-  let chunks = Math.ceil(maxComments / chunkSize)
-  let after = 0, comments
-  const allComments = new Map()
+export const getComments = async (allComments, threadID, maxComments, after) => {
+  let chunks = Math.ceil(maxComments / chunkSize), comments
   while (true) {
 
     let delay = 0
@@ -97,8 +95,8 @@ export const getComments = async (threadID, maxComments) => {
     }))
     if (comments.length < chunkSize/2 || chunks <= 1)
       break
-    chunks -= 1
+    chunks--
     after = Math.max(comments[comments.length - 1].created_utc - 1, after + 1)
   }
-  return allComments
+  return comments[comments.length - 1].created_utc
 }

src/pages/thread/SortBy.js

@@ -42,7 +42,7 @@ const sortBy = props => {
       { ...(isFirefox ? {
         onClick: e => e.target.focus() } : {}) }
       defaultValue={props.global.state.maxComments} type='number' maxLength='5' required min='100' max={maxCommentsLimit} step='100' />
-  {reloadVisible && <>
+  {reloadVisible && !props.reloadingComments && <>
     <span className='space' />
     <input onClick={() => {props.global.loadMaxComments(); setReloadVisible(false)}} type='button' value='Reload' />
   </>}

src/pages/thread/index.js

@@ -21,7 +21,8 @@ class Thread extends React.Component {
     pushshiftCommentLookup: new Map(),
     removed: [],
     deleted: [],
-    loadingComments: true
+    loadingComments: true,
+    reloadingComments: false
   }
 
   componentDidMount () {
@@ -67,32 +68,30 @@ class Thread extends React.Component {
           this.props.global.setLoading('Loading comments from Pushshift...')
       })
 
-    this.getComments()
+    this.getComments(this.props.global.state.maxComments, 0)
   }
 
   componentDidUpdate () {
-    if (this.props.global.state.maxComments > this.curMaxComments) {
+    const newCommentCount = this.props.global.state.maxComments - this.curMaxComments
+    if (newCommentCount > 0) {
       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()
+      this.setState({reloadingComments: true})
+      this.props.global.setLoading('Loading more comments from Pushshift...')
+      this.getComments(newCommentCount, this.lastCreatedUtc - 1)
     }
   }
 
-  getComments () {
+  getComments (newCommentCount, after) {
     const { threadID } = this.props.match.params
+    const pushshiftCommentLookup = this.state.pushshiftCommentLookup
 
     // Get comment ids from pushshift
-    getPushshiftComments(threadID, this.props.global.state.maxComments)
-      .then(pushshiftCommentLookup => {
+    getPushshiftComments(pushshiftCommentLookup, threadID, newCommentCount, after)
+      .then(lastCreatedUtc => {
         console.log(`Pushshift: ${pushshiftCommentLookup.size} comments`)
         const ids = []
         const missingIds = new Set()
+        this.lastCreatedUtc = lastCreatedUtc
 
         // Extract ids from pushshift response
         pushshiftCommentLookup.forEach(comment => {
@@ -152,7 +151,8 @@ class Thread extends React.Component {
               pushshiftCommentLookup,
               removed,
               deleted,
-              loadingComments: false
+              loadingComments: false,
+              reloadingComments: false
             })
           })
           .catch(e => {
@@ -196,7 +196,9 @@ class Thread extends React.Component {
               removed={this.state.removed.length}
               deleted={this.state.deleted.length}
             />
-            <SortBy />
+            <SortBy
+              reloadingComments={this.state.reloadingComments}
+            />
             {isSingleComment &&
               <div className='view-rest-of-comment'>
                 <div>you are viewing a single comment's thread.</div>

src/sass/common.sass

@@ -4,6 +4,9 @@ html, body
   background-color: $background
   font-family: verdana, arial, helvetica, sans-serif
 
+.wait
+  cursor: wait
+
 .main
   margin: 15px
   color: white

src/state.js

@@ -56,14 +56,24 @@ class GlobalState extends Container {
 
   loadMaxComments = () => this.setState({maxComments: get(maxCommentsKey, maxCommentsDefault)})
 
-  setSuccess = () => this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'})
-  setLoading = (text) => this.setState({statusText: text, statusImage: '/images/loading.gif'})
+  setSuccess = () => {
+    this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'})
+    document.body.classList.remove('wait')
+  }
+  setLoading = text => {
+    this.setState({statusText: text, statusImage: '/images/loading.gif'})
+    document.body.classList.add('wait')
+  }
   setError = (error, helpUrl = undefined) => {
     this.setState({statusText: error.message, statusImage: '/images/error.png'})
     if (helpUrl)
       this.setState({statusHelpUrl: helpUrl})
+    document.body.classList.remove('wait')
+  }
+  clearStatus = () => {
+    this.setState({statusText: '', statusHelpUrl: undefined, statusImage: undefined})
+    document.body.classList.remove('wait')
   }
-  clearStatus = () => this.setState({statusText: '', statusHelpUrl: undefined, statusImage: undefined})
 }
 
 // A redux-like connect function for Unstated