Mock backend and revive subreddit

backend/app.js

@@ -0,0 +1,40 @@
+const http = require('http');
+const url = require('url');
+
+const server = http.createServer((req, res) => {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Request-Method', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
+  res.setHeader('Access-Control-Allow-Headers', '*');
+
+  if ( req.method === 'OPTIONS' ) {
+    res.writeHead(200);
+    res.end();
+    return;
+  }
+
+  const queryObject = url.parse(req.url,true).query;
+  const subreddit = queryObject.subreddit || '';
+  const page = queryObject.page || 1;
+
+  if (req.url.startsWith('/api/threads')) {
+    // Imitate the behavior of getRemovedThreadIDs
+    if (subreddit.toLowerCase() === 'all') {
+      subreddit = '';
+    }
+
+    // Mock data
+    const data = ['16bm9de'];
+
+    res.writeHead(200, {'Content-Type': 'application/json'});
+    res.end(JSON.stringify(data));
+  } else {
+    res.writeHead(404);
+    res.end();
+  }
+});
+
+server.listen(3000, () => {
+  console.log('Server listening on port 3000');
+});

src/api/reddit/index.js

@@ -82,11 +82,13 @@ export const getPost = threadID => (
 )
 
 //// Fetch multiple threads (via the info endpoint)
-//export const getThreads = threadIDs => (
-//  fetchJson(`${baseURL}/api/info?id=${threadIDs.map(id => `t3_${id}`).join()}`)
-//    .then(response => response.data.children.map(threadData => threadData.data))
-//    .catch(error => errorHandler(error, 'reddit.getThreads'))
-//)
+export const getThreads = threadIDs => {
+  console.log(threadIDs)
+  return (
+ fetchJson(`${baseURL}/api/info?id=${threadIDs.map(id => `t3_${id}`).join()}`)
+   .then(response => response.data.children.map(threadData => threadData.data))
+   .catch(error => errorHandler(error, 'reddit.getThreads'))
+)}
 
 // Fetch multiple comments by id
 export const getComments = commentIDs => (

src/api/removeddit/index.js

@@ -1,15 +1,15 @@
-//import { fetchJson } from '../../utils'
-//
-//const baseURL = 'http://unddit.com/api'
-//
-//export const getRemovedThreadIDs = (subreddit = '', page = 1) => {
-//  if (subreddit.toLowerCase() === 'all') {
-//    subreddit = ''
-//  }
-//
-//  return fetchJson(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
-//    .catch(error => {
-//      console.error('removeddit.getRemovedThreadIDs: ' + error)
-//      throw new Error('Could not get removed threads')
-//    })
-//}
+import { fetchJson } from '../../utils'
+
+const baseURL = 'http://localhost:3000/api'
+
+export const getRemovedThreadIDs = (subreddit = '', page = 1) => {
+ if (subreddit.toLowerCase() === 'all') {
+   subreddit = ''
+ }
+
+ return fetchJson(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
+   .catch(error => {
+     console.error('removeddit.getRemovedThreadIDs: ' + error)
+     throw new Error('Could not get removed threads')
+   })
+}

src/index.js

@@ -5,7 +5,7 @@ import { Provider } from 'unstated'
 
 import Header from './pages/common/Header'
 import About from './pages/about'
-//import Subreddit from './pages/subreddit'
+import Subreddit from './pages/subreddit'
 import Thread from './pages/thread'
 import NotFound from './pages/404'
 
@@ -22,6 +22,7 @@ ReactDOM.render(
             <Route path='/about' component={About} />
             <Route path='/r/:subreddit/comments/:threadID/:junk/:commentID' component={Thread} />
             <Route path='/r/:subreddit/comments/:threadID' component={Thread} />
+            <Route path='/r/:subreddit' component={Subreddit} />
             <Redirect from='/user/:username/comments/:threadID/:junk/:commentID'
                       to='/r/u_:username/comments/:threadID/:junk/:commentID' />
             <Redirect from='/user/:username/comments/:threadID' to='/r/u_:username/comments/:threadID' />

src/pages/subreddit/index.js

@@ -1,73 +1,72 @@
-//import React from 'react'
-//import { Link } from 'react-router-dom'
-//import { getRemovedThreadIDs } from '../../api/removeddit'
-//import { getThreads } from '../../api/reddit'
-//import Post from '../common/Post'
-//import { connect } from '../../state'
-//
-//class Subreddit extends React.Component {
-//  state = {
-//    threads: [],
-//    loading: true
-//  }
-//
-//  componentDidMount() {
-//    const { subreddit = 'all' } = this.props.match.params
-//    this.getRemovedThreads(subreddit)
-//  }
-//
-//  // Check if the subreddit has changed in the url, and fetch threads accordingly
-//  componentDidUpdate(prevProps) {
-//    const { subreddit: newSubreddit = 'all' } = this.props.match.params
-//    const { subreddit = 'all' } = prevProps.match.params
-//
-//    if (subreddit !== newSubreddit) {
-//      this.getRemovedThreads(newSubreddit)
-//    }
-//  }
-//
-//  // Download thread IDs from removeddit API, then thread info from reddit API
-//  getRemovedThreads(subreddit) {
-//    document.title = `/r/${subreddit}`
-//    this.setState({ threads: [], loading: true })
-//    this.props.global.setLoading('Loading removed threads...')
-//
-//    getRemovedThreadIDs(subreddit)
-//      .then(threadIDs => getThreads(threadIDs))
-//      .then(threads => {
-//        threads.forEach(thread => {
-//          thread.removed = true
-//          thread.selftext = ''
-//        })
-//        this.setState({ threads, loading: false })
-//        this.props.global.setSuccess()
-//      })
-//      .catch(this.props.global.setError)
-//  }
-//
-//  render() {
-//    const { subreddit = 'all' } = this.props.match.params
-//    const noThreadsFound = this.state.threads.length === 0 && !this.state.loading
-//
-//    return (
-//      <React.Fragment>
-//        <div className='subreddit-box'>
-//          <Link to={`/r/${subreddit}`} className='subreddit-title'>/r/{subreddit}</Link>
-//          <span className='space' />
-//          <a href={`https://www.reddit.com/r/${subreddit}`} className='subreddit-title-link'>reddit</a>
-//          <span className='space' />
-//          <a href={`https://reveddit.com/r/${subreddit}`} className='subreddit-title-link'>reveddit</a>
-//        </div>
-//        {
-//          noThreadsFound
-//            ? <p>No removed threads found for /r/{subreddit}</p>
-//            : this.state.threads.map(thread => (
-//              <Post key={thread.id} {...thread} />
-//            ))
-//        }
-//      </React.Fragment>
-//    )
-//  }
-//}
-//
-//export default connect(Subreddit)
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { getRemovedThreadIDs } from '../../api/removeddit'
+import { getThreads } from '../../api/reddit'
+import Post from '../common/Post'
+import { connect } from '../../state'
+
+class Subreddit extends React.Component {
+ state = {
+   threads: [],
+   loading: true
+ }
+
+ componentDidMount() {
+   const { subreddit = 'all' } = this.props.match.params
+   this.getRemovedThreads(subreddit)
+ }
+
+ // Check if the subreddit has changed in the url, and fetch threads accordingly
+ componentDidUpdate(prevProps) {
+   const { subreddit: newSubreddit = 'all' } = this.props.match.params
+   const { subreddit = 'all' } = prevProps.match.params
+   if (subreddit !== newSubreddit) {
+     this.getRemovedThreads(newSubreddit)
+   }
+ }
+
+ // Download thread IDs from removeddit API, then thread info from reddit API
+ getRemovedThreads(subreddit) {
+   document.title = `/r/${subreddit}`
+   this.setState({ threads: [], loading: true })
+   this.props.global.setLoading('Loading removed threads...')
+
+   getRemovedThreadIDs(subreddit)
+     .then(threadIDs => getThreads(threadIDs))
+     .then(threads => {
+       threads.forEach(thread => {
+         thread.removed = true
+         thread.selftext = ''
+       })
+       this.setState({ threads, loading: false })
+       this.props.global.setSuccess()
+     })
+     .catch(this.props.global.setError)
+ }
+
+ render() {
+   const { subreddit = 'all' } = this.props.match.params
+   const noThreadsFound = this.state.threads.length === 0 && !this.state.loading
+
+   return (
+     <React.Fragment>
+       <div className='subreddit-box'>
+         <Link to={`/r/${subreddit}`} className='subreddit-title'>/r/{subreddit}</Link>
+         <span className='space' />
+         <a href={`https://www.reddit.com/r/${subreddit}`} className='subreddit-title-link'>reddit</a>
+         <span className='space' />
+         <a href={`https://reveddit.com/r/${subreddit}`} className='subreddit-title-link'>reveddit</a>
+       </div>
+       {
+         noThreadsFound
+           ? <p>No removed threads found for /r/{subreddit}</p>
+           : this.state.threads.map(thread => (
+             <Post key={thread.id} {...thread} />
+           ))
+       }
+     </React.Fragment>
+   )
+ }
+}
+
+export default connect(Subreddit)