diff --git a/.eslintrc.json b/.eslintrc.json index 1f40a24..6909e48 100644 --- 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" - } - ] - } -} \ No newline at end of file + "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" + } +} diff --git a/package.json b/package.json index 9734884..e0c2969 100644 --- 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", diff --git a/src/js/App.js b/src/js/App.js index b3ee353..0791b51 100644 --- a/src/js/App.js +++ b/src/js/App.js @@ -14,7 +14,7 @@ export default props => (
- + diff --git a/src/js/components/Comment.js b/src/js/components/Comment.js index 27da3fe..e287c1c 100644 --- 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) ? '

[removed too quickly to be archived]

' : parse(props.body) diff --git a/src/js/components/SubredditPagination.js b/src/js/components/SubredditPagination.js index e2942cc..834ae22 100644 --- 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 =
+ let pageination = <> for (let i = props.start; i <= props.end; i++) { if (props.currentPage === i) { diff --git a/src/js/components/ThreadHead.js b/src/js/components/ThreadHead.js index 7a5f238..b55c314 100644 --- 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
} 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 ( -
+
{props.position && {props.position}}
@@ -39,7 +39,7 @@ export default (props) => { {props.link_flair_text}} ({props.domain})
- submitted {prettyDate(props.created_utc)} by  + submitted {prettyDate(props.created_utc)} by  {props.author}  to /r/{props.subreddit}
diff --git a/src/js/pages/Thread.js b/src/js/pages/Thread.js index d771f9a..80c59f4 100644 --- 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 ( - <> +

lol

- +
) } } diff --git a/src/js/pushshift/index.js b/src/js/pushshift/index.js index 86ea422..b89cd68 100644 --- 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: { diff --git a/src/js/reddit/clientID.js b/src/js/reddit/clientID.js index 44562d6..309af8f 100644 --- 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' diff --git a/src/js/utils/index.js b/src/js/utils/index.js index 251703e..ed0aad9 100644 --- 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'] diff --git a/src/sass/comment.sass b/src/sass/comment.sass index 2c30e1d..072ed48 100644 --- 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 diff --git a/src/sass/main.sass b/src/sass/main.sass index 62e1c10..c7ee11f 100644 --- 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 \ No newline at end of file +@import search diff --git a/src/sass/thread.sass b/src/sass/thread.sass index 7c0d20a..f95877b 100644 --- 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 - \ No newline at end of file + .grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active + color: #828282 + margin-right: 4px + \ No newline at end of file