Now restores thread if it was removed

2026-03-11 08:54:27 +00:00 · 2018-01-14 20:21:53 +01:00 · 2018-01-14 20:21:53 +01:00 · 62ab281c58
commit 62ab281c58
parent 1af9e59644
13 changed files with 241 additions and 198 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,48 +1,57 @@
 {
-  "extends": "airbnb",
-  "env": {
-    "browser": true
-  },
-  "rules": {
-    "semi": "off",
-    "arrow-parens": "off",
-    "no-unused-vars": "warn",
-    "react/jsx-filename-extension": "off",
-    "react/prop-types": "off",
-    "jsx-quotes": "off",
-    "no-script-url": "off",
-    "max-len": "warn",
-    "import/no-extraneous-dependencies": "off",
-    "import/no-unresolved": "off",
-    "import/extensions": "off",
-    "react/no-danger": "off",
-    "no-underscore-dangle": "off",
-    "no-param-reassign": "warn",
-    "jsx-a11y/anchor-has-content": "off",
-    "jsx-a11y/anchor-is-valid": [ 
-      "error", 
-      {
-        "components": [ "Link" ],
-        "specialLink": [ "to", "hrefLeft", "hrefRight" ],
-        "aspects": [ "noHref", "invalidHref", "preferButton" ]
-      }
-    ],
-    
-    "no-plusplus": [
-        "error", 
-        { 
-            "allowForLoopAfterthoughts": true 
-        }
-    ],
-    "comma-dangle": [
-        "error", 
-        {
-            "arrays": "always-multiline",
-            "objects": "always-multiline",
-            "imports": "always-multiline",
-            "exports": "always-multiline",
-            "functions": "ignore"
-        }
-    ]
-  }
-}
+    "env": {
+        "browser": true
+    },
+    "extends": "airbnb",
+    "rules": {
+        "arrow-parens": "off",
+        "comma-dangle": [
+            "error",
+            {
+                "arrays": "always-multiline",
+                "exports": "always-multiline",
+                "functions": "ignore",
+                "imports": "always-multiline",
+                "objects": "always-multiline"
+            }            
+        ],
+        "import/extensions": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-unresolved": "off",
+        "jsx-a11y/anchor-has-content": "off",
+        "jsx-a11y/anchor-is-valid": [
+            "error",
+            {
+                "aspects": [
+                    "invalidHref",
+                    "noHref",
+                    "preferButton"
+                ],
+                "components": [
+                    "Link"
+                ],
+                "specialLink": [
+                    "hrefLeft",
+                    "hrefRight",
+                    "to"
+                ]
+            }
+        ],
+        "jsx-quotes": "off",
+        "max-len": "warn",
+        "no-param-reassign": "warn",
+        "no-plusplus": [
+            "error",
+            {
+                "allowForLoopAfterthoughts": true
+            }
+        ],
+        "no-script-url": "off",
+        "no-underscore-dangle": "off",
+        "no-unused-vars": "warn",
+        "react/jsx-filename-extension": "off",
+        "react/no-danger": "off",
+        "react/prop-types": "off",
+        "semi": "off"
+    }
+}
--- a/package.json
+++ b/package.json
@ -24,8 +24,7 @@
    "build": "webpack --config webpack.dev.js",
    "build-prod": "webpack --config webpack.prod.js",
    "clean": "rm -r node_modules && rm package-lock.json",
-    "gh-pages": "npm run build-prod && node publish.js",
-    "es": "eslint --init"
+    "gh-pages": "npm run build-prod && node publish.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.37",
--- a/src/js/App.js
+++ b/src/js/App.js
@ -14,7 +14,7 @@ export default props => (
      <Menu status={props.status} />
      <div className='main'>
        <Switch>
-          <Route exact path='/' component={Thread} />
+          <Route exact path='/' component={About} />
          <Route path='/about' component={About} />
          <Route path='/r/:subreddit/comments/:threadID' component={Thread} />
        </Switch>
--- a/src/js/components/Comment.js
+++ b/src/js/components/Comment.js
@ -2,14 +2,14 @@ import React from 'react'
 import { prettyScore, prettyDate, parse } from 'utils'

 export default (props) => {
-  let commentStyle = 'comment comment-'
+  let commentStyle = 'comment '

  if (props.removed) {
    commentStyle += 'removed'
  } else if (props.deleted) {
    commentStyle += 'deleted'
  } else {
-    commentStyle += props.depth % 2 === 0 ? 'even' : 'odd'
+    commentStyle += props.depth % 2 === 0 ? 'comment-even' : 'comment-odd'
  }

  const innerHTML = (props.body === '[removed]' && props.removed) ? '<p>[removed too quickly to be archived]</p>' : parse(props.body)
--- a/src/js/components/SubredditPagination.js
+++ b/src/js/components/SubredditPagination.js
@ -1,7 +1,7 @@
 import React from 'react'

 export default (props) => {
-  let pageination = <div></div>
+  let pageination = <></>

  for (let i = props.start; i <= props.end; i++) {
    if (props.currentPage === i) {
--- a/src/js/components/ThreadHead.js
+++ b/src/js/components/ThreadHead.js
@ -3,11 +3,11 @@ import { prettyScore, prettyDate, parse, redditThumbnails } from 'utils'

 export default (props) => {
  if (!props.title) {
-    return <></>
+    return <div />
  }

  const url = props.url.replace('https://www.reddit.com', '')
-  const userLink = props.author !== '[deleted]' ? `https://www.reddit.com/user/${props.author}` : ''
+  const userLink = props.author !== '[deleted]' ? `https://www.reddit.com/user/${props.author}` : undefined

  let thumbnail
  const thumbnailWidth = props.thumbnail_width ? props.thumbnail_width * 0.5 : 70
@ -24,7 +24,7 @@ export default (props) => {
  }

  return (
-    <div className='thread'>
+    <div className={`thread ${props.removed && 'removed'}`}>
      {props.position &&
      <span className='post-rank'>{props.position}</span>}
      <div className='thread-score-box'>
@ -39,7 +39,7 @@ export default (props) => {
        <span className='link-flair'>{props.link_flair_text}</span>}
        <span className='domain'>({props.domain})</span>
        <div className='thread-info'>
-          submitted <span className='thread-time'>{prettyDate(props.created_utc)}</span> by&nbsp;			
+          submitted <span className='thread-time'>{prettyDate(props.created_utc)}</span> by&nbsp;
          <a className='thread-author author' href={userLink}>{props.author}</a>
          &nbsp;to <a className='subreddit-link author' href={`/r/${props.subreddit}`}>/r/{props.subreddit}</a>
        </div>
--- a/src/js/pages/Thread.js
+++ b/src/js/pages/Thread.js
@ -1,6 +1,8 @@
 import React from 'react'
 import ThreadHead from 'components/ThreadHead'
 import { getThread } from 'reddit'
+import { getThread as getRemovedThread } from 'pushshift'
+import { isDeleted } from 'utils'

 export default class Thread extends React.Component {
  constructor(props) {
@ -12,22 +14,29 @@ export default class Thread extends React.Component {
  }

  componentDidMount() {
-    getThread(this.props.match.params.subreddit, this.props.match.params.threadID)
+    const { subreddit, threadID } = this.props.match.params
+
+    getThread(subreddit, threadID)
      .then(thread => {
        this.setState({ thread })

-        // check if thread is deleted
-        // if(thread.)
-        return thread
+        // Fetch the thread from pushshift if it was deleted/removed
+        if (isDeleted(thread.selftext)) {
+          getRemovedThread(threadID)
+            .then(removedThread => {
+              removedThread.removed = true
+              this.setState({ thread: removedThread })
+            })
+        }
      })
  }

  render() {
    return (
-      <>
+      <div>
        <ThreadHead {...this.state.thread} />
        <h1>lol</h1>
-      </>
+      </div>
    )
  }
 }
--- a/src/js/pushshift/index.js
+++ b/src/js/pushshift/index.js
@ -1,7 +1,7 @@
 import { json, toBase10, toBase36 } from 'utils'

 const baseURL = 'https://elastic.pushshift.io'
-const submissionURL = `${baseURL}/rs/submissions/_search?source=`
+const threadURL = `${baseURL}/rs/submissions/_search?source=`
 const commentURL = `${baseURL}/rc/comments/_search?source=`
 const commentIDsURL = 'https://api.pushshift.io/reddit/submission/comment_ids/'

@ -12,6 +12,22 @@ export const getCommentIDs = threadID => (
    .then(results => results.data)
 )

+export const getThread = threadID => {
+  const elasticQuery = {
+    query: {
+      term: {
+        id: toBase10(threadID),
+      },
+    },
+  }
+
+  return (
+    fetch(threadURL + JSON.stringify(elasticQuery))
+      .then(json)
+      .then(jsonData => jsonData.hits.hits[0]._source)
+  )
+}
+
 export const test = threadID => {
  const elasticQuery = {
    query: {
--- a/src/js/reddit/clientID.js
+++ b/src/js/reddit/clientID.js
@ -1,3 +1,3 @@
 // Change this to your own client ID: https://www.reddit.com/prefs/apps
 // The app NEEDS TO BE an installed app and NOT a web apps
-export default 'YSidAws9twqCZg'
+export default 'DGWxeL2H1iz7EA'
--- a/src/js/utils/index.js
+++ b/src/js/utils/index.js
@ -6,6 +6,9 @@ const markdown = SnuOwnd.getParser()
 export const toBase36 = number => parseInt(number, 10).toString(36)
 export const toBase10 = numberString => parseInt(numberString, 36)

+// Reddits way of indicating that something is deleted/removed
+export const isDeleted = testString => testString === '[deleted]'
+
 // Default thumbnails for reddit threads
 export const redditThumbnails = ['self', 'default', 'image', 'nsfw']

--- a/src/sass/comment.sass
+++ b/src/sass/comment.sass
@ -39,12 +39,6 @@
 		font-size: 10px
 		margin-right: 4px

-.comment-removed
-	background-color: #840c09
-
-.comment-deleted
-	background-color: #00007d
-
 .comment-odd
 	background-color: #121212

--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@ -1,30 +1,41 @@
 $background: #262626
-$red: #ca302c
+$red: #c70300
 $blue: #00007d
 $link: #8cb3d9
 $author: #6a98af
+$removed: #840c09
+$deleted: #00007d

 html, body 
-	margin: 0
-	padding: 0
-	background-color: $background
-	font-family: verdana, arial, helvetica, sans-serif
+  margin: 0
+  padding: 0
+  background-color: $background
+  font-family: verdana, arial, helvetica, sans-serif

 .main
-	margin: 15px
+  margin: 15px
+
+.removed
+	background-color: $removed
+
+.deleted
+	background-color: $deleted

 a
-	color: #8cb3d9
-	
+  color: $link
+  
 a:link, a:visited, a:active
-	text-decoration: none
+  text-decoration: none

 a:hover
-	text-decoration: underline
+  text-decoration: underline

 .author
-	color: $author
+  color: $author

+.author:not([href])
+  color: inherit
+  text-decoration: none

@import header
@import about
@ -32,4 +43,4 @@ a:hover
@import post
@import thread
@import subreddit
-@import search
+@import search
--- a/src/sass/thread.sass
+++ b/src/sass/thread.sass
@ -1,132 +1,134 @@
 .thread
-	display: flex
-	flex-grow: 1
-	margin-bottom: 7px
+  display: flex
+  flex-grow: 1
+  margin-bottom: 7px
+  border-radius: 1px
+  padding-top: 6px

-	.thumbnail
-		width: 70px
-		margin-right: 3px
+  .thumbnail
+    width: 70px
+    margin-right: 3px

-		img
-			border-radius: 1px
+    img
+      border-radius: 1px

-	.thumbnail-default
-		background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
-		background-position: 0px -1099px
-		background-repeat: no-repeat
-		height: 50px
+  .thumbnail-default
+    background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
+    background-position: 0px -1099px
+    background-repeat: no-repeat
+    height: 50px

-	.thumbnail-self
-		background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
-		background-position: 0px -1267px
-		background-repeat: no-repeat
-		height: 50px
-	
-	.thumbnail-image 
-		background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
-		background-position: 0px -1043px
-		background-repeat: no-repeat
-		height: 50px
+  .thumbnail-self
+    background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
+    background-position: 0px -1267px
+    background-repeat: no-repeat
+    height: 50px
+  
+  .thumbnail-image 
+    background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
+    background-position: 0px -1043px
+    background-repeat: no-repeat
+    height: 50px

-	.thumbnail-nsfw
-		background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
-		background-position: 0px -1155px
-		background-repeat: no-repeat
-		height: 50px
-	.thread-score-box
-		margin: 0 7px
-		width: 43px
+  .thumbnail-nsfw
+    background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png")
+    background-position: 0px -1155px
+    background-repeat: no-repeat
+    height: 50px
+  .thread-score-box
+    margin: 0 7px
+    width: 43px

-	.vote 
-		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==)
-		background-repeat: no-repeat
-		margin-left: auto
-		margin-right: auto
-		width: 15px
-		height: 14px
-		cursor: pointer
+  .vote 
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==)
+    background-repeat: no-repeat
+    margin-left: auto
+    margin-right: auto
+    width: 15px
+    height: 14px
+    cursor: pointer

-	.upvote 
-		background-position: -15px 0px
-		margin-top: 2px
+  .upvote 
+    background-position: -15px 0px
+    margin-top: 2px

-	.downvote 
-		background-position: -15px -14px
-		margin-top: 2px
-	
-	.thread-score 
-		color: #646464
-		font-size: 13px
-		font-weight: bold
-		text-align: center
+  .downvote 
+    background-position: -15px -14px
+    margin-top: 2px
+  
+  .thread-score 
+    color: #646464
+    font-size: 13px
+    font-weight: bold
+    text-align: center

-	.thread-content 
-		flex: 1
-		float: left
-		margin-left: 3px
-	
-	.link-flair 
-		display: inline-block
-		color: #c8c8c8
-		background-color: #404040
-		margin-right: 5px
-		border: 1px solid #4d4d4d
-		border-radius: 2px
-		padding: 0 2px
-		font-size: 10px
-	
-	.thread-title 
-		color: #a6a6a6
-		margin-right: 5px
-	
-	.thread-title:hover 
-		text-decoration: none
-	
-	.domain 
-		color: #888
-		font-size: 10px
-	
-	.thread-selftext 
-		border: 1px solid #666
-		border-radius: 7px
-		margin: 5px 0 7px
-		padding: 5px 10px
-		max-width: 840px
-		color: #ddd
-		font-size: 14px
+  .thread-content 
+    flex: 1
+    float: left
+    margin-left: 3px
+  
+  .link-flair 
+    display: inline-block
+    color: #c8c8c8
+    background-color: #404040
+    margin-right: 5px
+    border: 1px solid #4d4d4d
+    border-radius: 2px
+    padding: 0 2px
+    font-size: 10px
+  
+  .thread-title 
+    color: #a6a6a6
+    margin-right: 5px
+  
+  .thread-title:hover 
+    text-decoration: none
+  
+  .domain 
+    color: #888
+    font-size: 10px
+  
+  .thread-selftext 
+    border: 1px solid #666
+    border-radius: 7px
+    margin: 5px 0 7px
+    padding: 5px 10px
+    max-width: 840px
+    color: #ddd
+    font-size: 14px

-		p
-			margin: 5px 0
-			line-height: 20px
-		
-		a:hover
-			text-decoration: none
+    p
+      margin: 5px 0
+      line-height: 20px
+    
+    a:hover
+      text-decoration: none

-		p:first-child 
-			margin-top: 0px
+    p:first-child 
+      margin-top: 0px


-		p:last-child 
-			margin-bottom: 0px
+    p:last-child 
+      margin-bottom: 0px

-	
-	.thread-image 
-		max-width: 768px
-		max-height: 768px
-	
-	.thread-info 
-		color: #828282
-		font-size: 10px
-		margin-top: 2px
-	
+  
+  .thread-image 
+    max-width: 768px
+    max-height: 768px
+  
+  .thread-info 
+    color: #828282
+    font-size: 10px
+    margin-top: 2px
+  

-	.total-comments 
-		color: #828282
-		font-size: 10px
-		margin: 4px 0
-	
+  .total-comments 
+    color: #828282
+    font-size: 10px
+    margin: 4px 0
+  

-	.grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active  
-		color: #828282
-		margin-right: 4px
-	
+  .grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active  
+    color: #828282
+    margin-right: 4px
+