Add *edited link to toggle archived/reddit comment

src/pages/thread/Comment.js

@@ -13,7 +13,7 @@ const Comment = (props) => {
     commentStyle += props.depth % 2 === 0 ? 'comment-even' : 'comment-odd'
   }
 
-  let innerHTML;
+  let innerHTML, editedInnerHTML;
   if (isRemoved(props.body) && props.removed) {
     if (!props.hasOwnProperty('retrieved_utc') && !props.hasOwnProperty('retrieved_on') || !props.hasOwnProperty('created_utc')) {
       innerHTML = '<p>[removed too quickly to be archived]</p>'
@@ -31,9 +31,12 @@ const Comment = (props) => {
     }
   } else {
     innerHTML = parse(props.body)
+    if (props.hasOwnProperty('edited_body'))
+      editedInnerHTML = parse(props.edited_body)
   }
 
   const [collapsed, setCollapsed] = useState(false)
+  const [showEdited, setShowEdited] = useState(false)
   const permalink = `/r/${props.subreddit}/comments/${props.link_id}/_/${props.id}/`
 
   return (
@@ -52,13 +55,19 @@ const Comment = (props) => {
         <span className='comment-score'>{prettyScore(props.score)} point{(props.score !== 1) && 's'}</span>
         <span className='space' />
         <span className='comment-time'>{prettyDate(props.created_utc)}</span>
+        {props.hasOwnProperty('edited_body') &&
+          <span className='comment-time'>* (last edited {prettyDate(props.edited ? props.edited : props.created_utc)})</span>}
       </div>
       <div style={collapsed ? {display: 'none'} : {}}>
-        <div className='comment-body' dangerouslySetInnerHTML={{ __html: innerHTML }} />
+        <div className='comment-body' dangerouslySetInnerHTML={{ __html: showEdited ? editedInnerHTML : innerHTML }} />
         <div className='comment-links'>
           <Link to={permalink}>permalink</Link>
           <a href={`https://www.reddit.com${permalink}`}>reddit</a>
           <a href={`https://reveddit.com${permalink}`}>reveddit</a>
+          {props.hasOwnProperty('edited_body') &&
+            <a onClick={() => setShowEdited(!showEdited)} 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'
+            }>*edited</a>}
         </div>
         <div>
           {props.replies.map(comment => (

src/pages/thread/index.js

@@ -118,11 +118,16 @@ class Thread extends React.Component {
               } else if (isDeleted(comment.body)) {
                 deleted.push(comment.id)
                 pushshiftComment.deleted = true
-              } else if (pushshiftComment !== comment && isRemoved(pushshiftComment.body)) {
-                // If it's deleted in pushshift, but later restored by a mod, use the restored
-                comment.parent_id = comment.parent_id.substring(3)
-                comment.link_id = comment.link_id.substring(3)
-                pushshiftCommentLookup.set(comment.id, comment)
+              } else if (pushshiftComment !== comment) {
+                if (isRemoved(pushshiftComment.body)) {
+                  // If it's deleted in pushshift, but later restored by a mod, use the restored
+                  comment.parent_id = comment.parent_id.substring(3)
+                  comment.link_id = comment.link_id.substring(3)
+                  pushshiftCommentLookup.set(comment.id, comment)
+                } else if (pushshiftComment.body != comment.body) {
+                  pushshiftComment.edited_body = comment.body
+                  pushshiftComment.edited = comment.edited
+                }
               }
             })
 

src/sass/comment.sass

@@ -49,6 +49,7 @@
     font-weight: bold
     font-size: 10px
     margin-right: 4px
+    cursor: pointer
 
 .comment-odd
   background-color: #121212