Now works with subreddits!

README.md

@@ -15,22 +15,24 @@ npm start
 
 Visit http://localhost:8080 and make sure the site is running. Subreddits and the banned subreddit list will not work unless you also set up a backend. This might change in the future if I decide to open up my backend on removeddit.com/api. Contact me if you want this feature and we can discuss it. 
 
-# Production
+# Production (basic setup)
 **THIS WILL BE UPDATED LATER WHEN THE PROJECT IN REWRITTEN**
 
 Using [Ubuntu 16.04](http://releases.ubuntu.com/16.04/) and [nginx](https://www.nginx.com/resources/wiki/)
 
 ```
-sudo git clone https://github.com/JubbeArt/removeddit.git /var/www/removeddit
+cd /srv
+sudo git clone https://github.com/JubbeArt/removeddit.git /srv/removeddit/site
+chown -R www-data:www-data /srv/removeddit
 sudo apt install -y nginx
-sudo cp /var/www/removeddit/server-config/basic /etc/nginx/sites-available/default
+sudo cp /srv/removeddit/site/production/nginx-basic /etc/nginx/sites-available/default
 ```
 
 Create a reddit app [here](https://www.reddit.com/prefs/apps/), select **installed app**. For "redirect url" it doesn't really matter in this case, you can pick `http://localhost`.
 
 Copy the **client ID** for your app set it as a variable in `id.js`, e.g. with 
 ```
-sudo nano /var/www/removeddit/static/js/id.js
+sudo nano /srv/removeddit/site/..../id.js
 # Insert with ctrl-shift-v
 # Save with ctrl-o, exit with ctrl-x
 ```
@@ -57,7 +59,7 @@ In the same file you also want to change `gzip on` to `gzip off` (read more [her
 ## Nginx server config
 Copy the ssl config and create a soft link. Create folder for logs and also remove the default config
 ```
-sudo cp /var/www/removeddit/server-config/ssl /etc/nginx/sites-available/removeddit.com
+sudo cp /srv/removeddit/site/production/nginx-ssl /etc/nginx/sites-available/removeddit.com
 sudo ln -s /etc/nginx/sites-available/removeddit.com /etc/nginx/sites-enabled/removeddit.com
 sudo mkdir /var/log/nginx/removeddit
 sudo rm /etc/nginx/sites-enabled/default
@@ -77,13 +79,12 @@ sudo apt install -y python-certbot-nginx
 Copy the Let's Encrypt config file for our site 
 ```
 sudo mkdir /etc/letsencrypt/configs
-cp /var/www/removeddit/server-config/letsencrypt.conf /etc/letsencrypt/configs/removeddit.com.conf
+cp /srv/removeddit/site/production/letsencrypt.conf /etc/letsencrypt/configs/removeddit.com.conf
 ```
 
 In this config file change the domains and the email address for your own. The emails tells you when the certificates are close to expiring.
 
-This is when the webmasters start praying to God, for only He can deside the fate of the certbot. 
-Forgive me Father, for I have committed.
+Pray to God and do this
 ```
 sudo certbot --config /etc/letsencrypt/configs/removeddit.com.conf certonly
 ```
@@ -108,6 +109,6 @@ Add the following lines at the bottom
 30 4 * * * certbot renew --post-hook "systemctl reload nginx"
 ```
 
-Then just restart nginx and that should do it! 
+Then just restart nginx and that should do it!
 
-This guide was mostly written for myself, you learn a shitton writing guides, highly recommended. Hopefully you learned something too.
+This guide was mostly written for myself, you learn a shitton writing guides, highly recommended. Hopefully you learned something too.

production/letsencrypt.conf

@@ -6,4 +6,4 @@ email = removeddit@gmail.com
 rsa-key-size = 2048
 text = True
 authenticator = webroot
-webroot-path = /var/www/removeddit/
+webroot-path = /srv/removeddit/site/

production/nginx-basic

@@ -2,12 +2,17 @@ server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
 
-	root /var/www/removeddit;
+	root /srv/removeddit/site;
 	index index.html;
 	server_name _;
 
 	error_page 404 /index.html
 
+	#location /api/ {
+	#	include uwsgi_params;
+	#	uwsgi_pass unix:/srv/removeddit-api/socket/uwsgi.sock;
+	#}
+
 	location / {
 		try_files $uri $uri/ /index.html =404;
 	}

production/nginx-ssl

@@ -2,7 +2,7 @@ server {
 	listen 443 ssl http2 default_server;
 	listen [::]:443 ssl http2 default_server;
 	
-	root /var/www/removeddit;
+	root /srv/removeddit/site;
 	index index.html;
 	server_name removeddit.com www.removeddit.com;
 
@@ -16,6 +16,11 @@ server {
 	location / {
 		try_files $uri $uri/ /index.html =404;
 	}	
+	
+	#location /api/ {
+	#	include uwsgi_params;
+	#	uwsgi_pass unix:/srv/removeddit-api/socket/uwsgi.sock;
+	#}
 }
 
 server {
@@ -30,4 +35,4 @@ server {
 	location ~ /.well-known {
 		allow all;
 	}
-}
+}

src/js/App.js

@@ -14,10 +14,12 @@ export default () => (
       <Header />
       <div className='main'>
         <Switch>
-          <Route exact path='/' component={About} />
+          <Route exact path='/' component={Subreddit} />
           <Route path='/about' component={About} />
-          <Route path='/r/:subreddit/comments/:threadID' component={Thread} />
           <Route path='/r/:subreddit/comments/:threadID/:junk/:commentID' component={Thread} />
+          <Route path='/r/:subreddit/comments/:threadID' component={Thread} />
+          <Route path='/r/:subreddit' component={Subreddit} />
+
         </Switch>
       </div>
     </React.Fragment>

src/js/api/pushshift/index.js

@@ -24,34 +24,52 @@ export const getPost = threadID => {
   )
 }
 
-export const getComments = threadID => {
-  const elasticQuery = {
-    query: {
-      match: {
-        link_id: toBase10(threadID),
-      },
-    },
-    size: 10000,
-    _source: [
-      'author', 'body', 'created_utc', 'parent_id', 'score',
-    ],
-  }
+export const getComments = threadID => (
+  fetch(`https://api.pushshift.io/reddit/comment/search?link_id=${threadID}&limit=10000`)
+    .then(json)
+    .then(data => data.data)
+    .then(comments => {
+      comments.forEach(comment => {
+        comment.link_id = comment.link_id.split('_')[1]
+        comment.parent_id = comment.parent_id.split('_')[1]
+      })
+      return comments
+    })
+)
 
-  return (
-    fetch(commentURL + JSON.stringify(elasticQuery))
-      .then(json)
-      .then(jsonData => jsonData.hits.hits)
-      .then(comments => comments.map(comment => {
-        comment._source.id = toBase36(comment._id)
+// export const getComments = threadID => {
+//   const elasticQuery = {
+//     query: {
+//       match: {
+//         link_id: toBase10(threadID),
+//       },
+//     },
+//     size: 10000,
+//     // _source: [
+//     //   'author', 'body', 'created_utc', 'parent_id', 'score', 'subreddit', 'link_id',
+//     // ],
+//   }
 
-        // Missing parent id === direct reply to thread
-        if (!comment._source.parent_id) {
-          comment._source.parent_id = threadID
-        } else {
-          comment._source.parent_id = toBase36(comment._source.parent_id)
-        }
+//   return (
+//     fetch(commentURL + JSON.stringify(elasticQuery))
+//       .then(json)
+//       .then(jsonData => jsonData.hits.hits)
+//       .then(comments => comments.map(comment => {
+//         comment._source.id = toBase36(comment._id)
+//         comment._source.link_id = toBase36(comment._source.link_id)
 
-        return comment._source
-      }))
-  )
-}
+//         // Missing parent id === direct reply to thread
+//         if (!comment._source.parent_id) {
+//           comment._source.parent_id = threadID
+//         } else {
+//           comment._source.parent_id = toBase36(comment._source.parent_id)
+//         }
+
+//         if (comment._source.id === 'dmrxgic') {
+//           console.log(JSON.stringify(comment._source))
+//         }
+
+//         return comment._source
+//       }))
+//   )
+// }

src/js/api/reddit/index.js

@@ -1,2 +1,2 @@
-export { getPost } from './thread'
+export { getPost, getThreads } from './thread'
 export { getComments } from './comment'

src/js/api/reddit/thread.js

@@ -38,3 +38,18 @@ export const getThread = (subreddit, threadID, commentID = '') => {
       })
   )
 }
+
+
+export const getThreads = threadIDs => {
+  const threadString = threadIDs.map(id => `t3_${id}`).join()
+
+  return (
+    getAuth()
+      .then(auth => fetch(`https://oauth.reddit.com/api/info?id=${threadString}`, auth))
+      .then(json)
+      .then(response => {
+        const threads = response.data.children
+        return threads.map(threadData => threadData.data)
+      })
+  )
+}

src/js/api/removeddit/index.js

@@ -0,0 +1,8 @@
+import { json } from 'utils'
+
+const baseURL = 'http://localhost:9000/api'
+
+export const getRemovedThreadIDs = (subreddit = '', page = 1) => (
+  fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
+    .then(json)
+)

src/js/components/Comment.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { prettyScore, prettyDate, parse, sortComments } from 'utils'
+import { prettyScore, prettyDate, parse } from 'utils'
 
 const Comment = (props) => {
   let commentStyle = 'comment '
@@ -13,7 +13,7 @@ const Comment = (props) => {
   }
 
   const innerHTML = (props.body === '[removed]' && props.removed) ? '<p>[removed too quickly to be archived]</p>' : parse(props.body)
-  const permalink = `/r/${props.subreddit}/comments/${props.threadID}/_/${props.id}/`
+  const permalink = `/r/${props.subreddit}/comments/${props.link_id}/_/${props.id}/`
 
   return (
     <div id={props.id} className={commentStyle}>

src/js/components/CommentSection.js

@@ -50,6 +50,11 @@ const unflatten = (comments, root, removed, deleted) => {
     }
   })
 
+  if (lookup[root] !== undefined) {
+    lookup[root].replies = commentTree
+    return [lookup[root]]
+  }
+
   return commentTree
 }
 

src/js/pages/Subreddit.js

@@ -1,14 +1,67 @@
 import React from 'react'
+import { getRemovedThreadIDs } from 'api/removeddit'
+import { getThreads } from 'api/reddit'
+import Post from 'components/Post'
+
+const displaySubreddit = props => {
+  const subreddit = props.match.params.subreddit
+  if (subreddit === undefined) {
+    return 'all'
+  }
+  return subreddit
+}
+
+const getSubredditForAPI = props => {
+  const subreddit = props.match.params.subreddit
+  if (subreddit === undefined) {
+    return ''
+  } else if (subreddit.toLowerCase() === 'all') {
+    return ''
+  }
+  return subreddit.toLowerCase()
+}
+
 
 export default class Subreddit extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
-
+      threads: [],
     }
   }
+
+  componentDidMount() {
+    const subreddit = getSubredditForAPI(this.props)
+    getRemovedThreadIDs(subreddit)
+      .then(threadIDs => getThreads(threadIDs))
+      .then(threads => {
+        threads.forEach(thread => {
+          thread.removed = true
+          thread.selftext = ''
+        })
+        this.setState({ threads })
+      })
+  }
+
   render() {
-    return <h1>Subreddit</h1>
+    const subreddit = `/r/${displaySubreddit(this.props)}`
+
+    return (
+      <React.Fragment>
+        <div className='subreddit-box'>
+          <a href={subreddit} className='subreddit-title'>{subreddit}</a>
+          <span className='space' />
+          <a href={`https://www.reddit.com${subreddit}`} className='subreddit-title-link'>reddit</a>
+          <span className='space' />
+          <a href={`https://snew.github.io${subreddit}`} className='subreddit-title-link'>ceddit</a>
+        </div>
+        {
+        this.state.threads.map(thread => (
+          <Post key={thread.id} {...thread} />
+        ))
+        }
+      </React.Fragment>
+    )
   }
 }

src/js/pages/Thread.js

@@ -95,13 +95,19 @@ export default class Thread extends React.Component {
   }
 
   render() {
+    let root = this.state.post.id
+
+    if (this.props.match.params.commentID !== undefined) {
+      root = this.props.match.params.commentID
+    }
+
     return (
       <div>
         <Post {...this.state.post} />
         {
           !this.state.loadingComments &&
           <CommentSection
-            root={this.state.post.id}
+            root={root}
             comments={this.state.pushshiftComments}
             removed={this.state.removed}
             deleted={this.state.deleted}

src/sass/subreddit.sass

@@ -26,4 +26,19 @@
   color: #ccc
   font-size: 16px
   span, a
-    margin: 5px
+    margin: 5px
+
+.subreddit-box
+  margin-bottom: 15px
+  
+.subreddit-title
+  margin-left: 5px
+  font-size: 22px
+  font-weight: bold
+  color: white
+
+.subreddit-title-link
+  margin-bottom: 15px
+  margin-left: 5px
+  font-size: 14px
+  color: white

src/sass/thread.sass

@@ -8,6 +8,7 @@
   .thumbnail
     width: 70px
     margin-right: 3px
+    margin-top: -2px
 
     img
       border-radius: 1px