Handle permalinks w/mismatched link_ids correctly

src/pages/thread/LoadMore.js

@@ -11,7 +11,9 @@ const loadMore = (props) => {
   const maxCommentsPreferred = props.global.maxComments
   let loadElements
 
-  if (props.reloadingComments)
+  if (props.global.isErrored())
+    return null
+  else if (props.reloadingComments)
     loadElements = [<span key='loading'>loading...</span>]
   else {
     if (props.loadedAllComments)

src/pages/thread/SortBy.js

@@ -47,7 +47,8 @@ const sortBy = props => {
       defaultValue={props.global.maxComments} type='number' maxLength='5' required
       min={minCommentsLimit} max={maxCommentsLimit} step={minCommentsLimit} />
   </span>
-  { !props.reloadingComments && !props.loadedAllComments && maxCommentsField > props.global.maxComments && maxCommentsField - minCommentsLimit >= props.total &&
+  { !props.reloadingComments && !props.loadedAllComments && !props.global.isErrored() &&
+    maxCommentsField > props.global.maxComments && maxCommentsField - minCommentsLimit >= props.total &&
   <span className='nowrap'>
     <span className='space' />
     <input onClick={() => props.global.loadMoreComments(props.global.maxComments - props.total)} type='button' value='Reload' />

src/pages/thread/index.js

@@ -207,6 +207,16 @@ class Thread extends React.Component {
       this.commentIdAttempts.add(commentID)
       getRedditComments([commentID])
         .then(([comment]) => {
+          if (comment?.link_id) {
+            this.redditIdsToPushshift(comment)
+            if (comment.link_id != threadID) {
+              console.timeEnd('Load comments')
+              this.props.global.setError({ message: 'Invalid permalink' })
+              this.state.loadingComments = false
+              console.error('link_id mismatch:', comment)
+              return
+            }
+          }
           this.contigs.unshift({firstCreated: comment?.created_utc || EARLIEST_CREATED})
           this.getComments(maxComments, false, comment)
         })
@@ -228,7 +238,7 @@ class Thread extends React.Component {
     const { commentID } = this.props.match.params
     let curContigIdx = -1
     if (commentID === undefined)
-      curContigIdx = this.contigs[0].firstCreated == EARLIEST_CREATED ? 0 : -1
+      curContigIdx = this.contigs[0]?.firstCreated == EARLIEST_CREATED ? 0 : -1
     else {
       const created_utc = this.state.pushshiftCommentLookup.get(commentID)?.created_utc
       if (created_utc > EARLIEST_CREATED)
@@ -325,7 +335,7 @@ class Thread extends React.Component {
       }
     }
 
-    if (!loadingComments && this.props.location.state?.scrollBehavior) {
+    if (!loadingComments && !this.props.global.isErrored() && this.props.location.state?.scrollBehavior) {
       const { location } = this.props
       const id = location.hash.substring(1)
       if (id)

src/state.js

@@ -106,6 +106,8 @@ class GlobalState extends Container {
     this.setState({statusText: '', statusHelpUrl: undefined, statusImage: undefined})
     document.body.classList.remove('wait')
   }
+
+  isErrored = () => this.state.statusImage?.endsWith('error.png')
 }
 
 // A redux-like connect function for Unstated