Add *edited link to toggle archived/reddit post

src/api/pushshift/index.js

@@ -1,7 +1,7 @@
 import { fetchJson, sleep } from '../../utils'
 
 export const chunkSize = 100;
-const postURL    = 'https://api.pushshift.io/reddit/submission/search/?ids='
+const postURL    = 'https://api.pushshift.io/reddit/submission/search/?fields=author,created_utc,domain,edited,id,link_flair_text,num_comments,permalink,position,removed_by_category,retrieved_on,retrieved_utc,score,selftext,subreddit,thumbnail,thumbnail_height,thumbnail_width,title,url&ids='
 const commentURL = `https://api.pushshift.io/reddit/comment/search/?metadata=true&size=${chunkSize}&sort=asc&fields=author,body,created_utc,id,link_id,parent_id,retrieved_on,retrieved_utc,score,subreddit&q=*&link_id=`
 
 const errorHandler = (msg, origError, from) => {

src/pages/common/Post.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, redditThumbnails, isDeleted, isRemoved } from '../../utils'
 
@@ -24,7 +24,7 @@ export default (props) => {
     )
   }
 
-  let innerHTML;
+  let innerHTML, editedInnerHTML;
   if (isRemoved(props.selftext) && props.removed) {
     if (!props.hasOwnProperty('retrieved_utc') && !props.hasOwnProperty('retrieved_on') || !props.hasOwnProperty('created_utc')) {
       innerHTML = '<p>[removed too quickly to be archived]</p>'
@@ -34,8 +34,12 @@ export default (props) => {
     }
   } else if (props.selftext) {
     innerHTML = parse(props.selftext)
+    if (props.hasOwnProperty('edited_selftext'))
+      editedInnerHTML = parse(props.edited_selftext)
   }
 
+  const [showEdited, setShowEdited] = useState(false)
+
   return (
     <div className={`thread ${props.removed && 'removed'} ${props.deleted && 'deleted'}`}>
       {props.position &&
@@ -54,16 +58,24 @@ export default (props) => {
         }
         <span className='domain'>({props.domain})</span>
         <div className='thread-info'>
-          submitted <span className='thread-time' title={exactDateTime(props.created_utc)}>{prettyDate(props.created_utc)}</span> by&nbsp;
-          <a className='thread-author author' href={userLink}>{props.author}</a>
-          &nbsp;to /r/{props.subreddit}
+          submitted <span className='thread-time' title={exactDateTime(props.created_utc)}>{prettyDate(props.created_utc)}</span>
+          {props.edited &&
+            <span className='thread-time' title={exactDateTime(props.edited)}> * (last edited {prettyDate(props.edited)})</span>}
+          &nbsp;by <a className='thread-author author' href={userLink}>{props.author}</a> to /r/{props.subreddit}
         </div>
         {innerHTML !== undefined &&
-          <div className='thread-selftext user-text' dangerouslySetInnerHTML={{ __html: innerHTML }} />}
+          <div className='thread-selftext user-text' dangerouslySetInnerHTML={{ __html: showEdited ? editedInnerHTML : innerHTML }} />}
         <div className='total-comments'>
           <Link className='grey-link' to={props.permalink}><b>{props.num_comments} comments</b></Link>&nbsp;
           <a className='grey-link' href={`https://www.reddit.com${props.permalink}`}><b>reddit</b></a>&nbsp;
           <a className='grey-link' href={`https://reveddit.com${props.permalink}`}><b>reveddit</b></a>
+          {props.hasOwnProperty('edited_selftext') &&
+            <a onClick=  {() => setShowEdited(!showEdited)}
+               onKeyDown={e => e.key == "Enter" && setShowEdited(!showEdited)}
+               tabIndex= {0}
+               className='grey-link'
+               title=    {showEdited ? 'The most recent version is shown; click to show the earliest archived' : 'The earliest archived version is shown; click to show the most recent'}
+            ><b>*edited</b></a>}
         </div>
       </div>
     </div>

src/pages/thread/index.js

@@ -6,7 +6,7 @@ import {
   chunkSize as redditChunkSize
 } from '../../api/reddit'
 import {
-  getPost as getRemovedPost,
+  getPost as getPushshiftPost,
   getComments as getPushshiftComments
 } from '../../api/pushshift'
 import { isDeleted, isRemoved, sleep } from '../../utils'
@@ -65,32 +65,56 @@ class Thread extends React.Component {
     // Get post from reddit
     getPost(threadID)
       .then(post => {
+        let edited_selftext
         document.title = post.title
+        if (isDeleted(post.selftext))
+          post.deleted = true
+        else if (isRemoved(post.selftext) || post.removed_by_category)
+          post.removed = true
+        else if (post.edited) {
+          edited_selftext = post.selftext
+          post.selftext = '...'  // temporarily remove it to avoid flashing it onscreen
+        }
         this.setState({ post })
-        // Fetch the post from pushshift if it was deleted/removed
-        if (isDeleted(post.selftext) || isRemoved(post.selftext) || post.removed_by_category) {
-          getRemovedPost(threadID)
-            .then(removedPost => {
-              if (removedPost === undefined)
-                removedPost = post
-              else {
-                removedPost.score = post.score
-                removedPost.num_comments = post.num_comments
+        // Fetch the post from Pushshift if it was deleted/removed/edited
+        if (post.deleted || post.removed || post.edited) {
+          getPushshiftPost(threadID)
+            .then(origPost => {
+              if (origPost) {
+                if (post.deleted || post.removed) {  // use the post from Pushshift instead
+                  origPost.score = post.score
+                  origPost.num_comments = post.num_comments
+                  origPost.edited = post.edited
+                  if (post.deleted)
+                    origPost.deleted = true
+                  else
+                    origPost.removed = true
+                  this.setState({ post: origPost })
+                } else {  // it was only edited - update (if necessary) and use the Reddit post
+                  if (edited_selftext != origPost.selftext && !isRemoved(origPost.selftext)) {
+                    post.selftext = origPost.selftext
+                    post.edited_selftext = edited_selftext
+                  }
+                  this.setState({ post })
+                }
+              } else if (post.edited) {
+                post.selftext = edited_selftext  // restore it (after temporarily removing it above)
+                this.setState({ post })
+              }
+            })
+            .catch(e => {
+              this.props.global.setError(e, e.helpUrl)
+              if (post.edited) {
+                post.selftext = edited_selftext
+                this.setState({ post })
               }
-              if (isDeleted(post.selftext)) {
-                removedPost.deleted = true
-              } else {
-                removedPost.removed = true
-              }
-              this.setState({ post: removedPost })
             })
-            .catch(e => this.props.global.setError(e, e.helpUrl))
         }
       })
       .catch(error => {
         this.props.global.setError(error)
         // Fetch the post from pushshift on other errors (e.g. posts from banned subreddits)
-        getRemovedPost(threadID)
+        getPushshiftPost(threadID)
           .then(removedPost => {
             document.title = removedPost.title
             this.setState({ post: { ...removedPost, removed: true } })

src/sass/thread.sass

@@ -131,6 +131,7 @@
   .grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active  
     color: #828282
     margin-right: 4px
+    cursor: pointer
 
 
 .view-rest-of-comment