Added readable error messages for all the APIs

src/api/pushshift/index.js

@@ -13,15 +13,14 @@ export const getPost = threadID => {
     }
   }
 
-  return (
-    window.fetch(postURL + JSON.stringify(elasticQuery))
-      .then(response => response.json())
-      .then(response => {
-        const post = response.hits.hits[0]._source
-        post.id = toBase36(post.id)
-        return post
-      })
-  )
+  return window.fetch(postURL + JSON.stringify(elasticQuery))
+    .then(response => response.json())
+    .then(response => {
+      const post = response.hits.hits[0]._source
+      post.id = toBase36(post.id)
+      return post
+    })
+    .catch(() => { throw new Error('Could not get removed post') })
 }
 
 // export const getComments = threadID => (
@@ -50,24 +49,23 @@ export const getComments = threadID => {
     ]
   }
 
-  return (
-    window.fetch(commentURL + JSON.stringify(elasticQuery))
-      .then(response => response.json())
-      .then(response => {
-        const comments = response.hits.hits
-        return comments.map(comment => {
-          comment._source.id = toBase36(comment._id)
-          comment._source.link_id = toBase36(comment._source.link_id)
+  return window.fetch(commentURL + JSON.stringify(elasticQuery))
+    .then(response => response.json())
+    .then(response => {
+      const comments = response.hits.hits
+      return comments.map(comment => {
+        comment._source.id = toBase36(comment._id)
+        comment._source.link_id = toBase36(comment._source.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)
-          }
+        // 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 comment._source
-        })
+        return comment._source
       })
-  )
+    })
+    .catch(() => { throw new Error('Could not get removed comments') })
 }

src/api/reddit/comment.js

@@ -1,18 +0,0 @@
-import { chunk, flatten } from '../../utils'
-import { getAuth } from './auth'
-
-export const getComments = commentIDs => {
-  return getAuth()
-    .then(auth => (
-      Promise.all(chunk(commentIDs, 100)
-        .map(ids => fetchComments(ids, auth)))
-        .then(flatten)
-    ))
-}
-
-export const fetchComments = (commentIDs, auth) => {
-  return window.fetch(`https://oauth.reddit.com/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`, auth)
-    .then(response => response.json())
-    .then(results => results.data.children)
-    .then(commentsData => commentsData.map(commentData => commentData.data))
-}

src/api/reddit/index.js

@@ -1,2 +1,43 @@
-export { getPost, getThreads } from './thread'
-export { getComments } from './comment'
+import { chunk, flatten } from '../../utils'
+import { getAuth } from './auth'
+
+const errorHandler = () => {
+  throw new Error('Could not connect to Reddit')
+}
+
+// Thread = Post + Comments
+// Return the post itself
+export const getPost = (subreddit, threadID) => (
+  getAuth()
+    .then(auth => window.fetch(`https://oauth.reddit.com/r/${subreddit}/comments/${threadID}/_/`, auth))
+    .then(response => response.json())
+    .then(thread => thread[0].data.children[0].data)
+    .catch(errorHandler)
+)
+
+// Fetch multiple threads (via the info endpoint)
+export const getThreads = threadIDs => {
+  return getAuth()
+    .then(auth => window.fetch(`https://oauth.reddit.com/api/info?id=${threadIDs.map(id => `t3_${id}`).join()}`, auth))
+    .then(response => response.json())
+    .then(response => response.data.children.map(threadData => threadData.data))
+    .catch(errorHandler)
+}
+
+// Helper function that fetches a list of comments
+const fetchComments = (commentIDs, auth) => {
+  return window.fetch(`https://oauth.reddit.com/api/info?id=${commentIDs.map(id => `t1_${id}`).join()}`, auth)
+    .then(response => response.json())
+    .then(results => results.data.children)
+    .then(commentsData => commentsData.map(commentData => commentData.data))
+}
+
+export const getComments = commentIDs => {
+  return getAuth()
+    .then(auth => (
+      Promise.all(chunk(commentIDs, 100)
+        .map(ids => fetchComments(ids, auth)))
+        .then(flatten)
+    ))
+    .catch(errorHandler)
+}

src/api/reddit/thread.js

@@ -1,18 +0,0 @@
-import { getAuth } from './auth'
-
-// Thread = Post + Comments
-// Return the post itself
-export const getPost = (subreddit, threadID) => (
-  getAuth()
-    .then(auth => window.fetch(`https://oauth.reddit.com/r/${subreddit}/comments/${threadID}/_/`, auth))
-    .then(response => response.json())
-    .then(thread => thread[0].data.children[0].data)
-)
-
-// Fetch multiple threads (via the info endpoint)
-export const getThreads = threadIDs => {
-  return getAuth()
-    .then(auth => window.fetch(`https://oauth.reddit.com/api/info?id=${threadIDs.map(id => `t3_${id}`).join()}`, auth))
-    .then(response => response.json())
-    .then(response => response.data.children.map(threadData => threadData.data))
-}

src/api/removeddit/index.js

@@ -7,4 +7,5 @@ export const getRemovedThreadIDs = (subreddit = '', page = 1) => {
 
   return window.fetch(`${baseURL}/threads?subreddit=${subreddit}&page=${page - 1}`)
     .then(response => response.json())
+    .catch(() => { throw new Error('Could not get removed threads') })
 }

src/pages/common/Post.js

@@ -36,8 +36,10 @@ export default (props) => {
       {thumbnail}
       <div className='thread-content'>
         <a className='thread-title' href={url}>{props.title}</a>
-        {props.link_flair_text &&
-        <span className='link-flair'>{props.link_flair_text}</span>}
+        {
+          props.link_flair_text &&
+          <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;
@@ -47,15 +49,9 @@ export default (props) => {
         {props.selftext &&
         <div className='thread-selftext user-text' dangerouslySetInnerHTML={{ __html: parse(props.selftext) }} />}
         <div className='total-comments'>
-          <Link className='grey-link' to={props.permalink}>
-            <b>{props.num_comments} comments</b>
-          </Link>&nbsp;
-          <a className='grey-link' href={`https://www.reddit.com${props.permalink}`}>
-            <b>reddit</b>
-          </a>&nbsp;
-          <a className='grey-link' href={`https://snew.github.io${props.permalink}`}>
-            <b>ceddit</b>
-          </a>
+          <Link className='grey-link' to={props.permalink}><b>{props.num_comments} comments</b></Link>&nbsp;
+          <a className='grey-link' href={`https://www.reddit.com${props.permalink}`}><b>reddit</b></a>&nbsp;
+          <a className='grey-link' href={`https://snew.github.io${props.permalink}`}><b>ceddit</b></a>
         </div>
       </div>
     </div>

src/pages/subreddit/SubredditSort.js

@@ -6,7 +6,6 @@ export default (props) => {
   return (
     <div className='subreddit-info'>
       top post of <a href={`https://www.reddit.com/r/${props.subreddit}`}>/r/{props.subreddit}</a> from:
-      {/* <select onchange='Vars.reload(this)'> */}
       <select>
         <option value='hour' selected={isSelected('hour')}>past hour</option>
         <option value='12hour' selected={isSelected('12hour')}>past 12 hours</option>

src/pages/thread/CommentSection.js

@@ -1,7 +1,5 @@
 import React from 'react'
 import Comment from './Comment'
-import CommentInfo from './CommentInfo'
-import SortBy from './SortBy'
 import {connect, sort, filter} from '../../state'
 import {
   topSort, bottomSort, newSort, oldSort,
@@ -112,20 +110,12 @@ const commentSection = (props) => {
   console.timeEnd('render comment section')
 
   return (
-    <div>
-      <CommentInfo
-        total={props.comments.length}
-        removed={props.removed.length}
-        deleted={props.deleted.length}
+    commentTree.map(comment => (
+      <Comment
+        key={comment.id}
+        {...comment}
       />
-      <SortBy />
-      {commentTree.map(comment => (
-        <Comment
-          key={comment.id}
-          {...comment}
-        />
-      ))}
-    </div>
+    ))
   )
 }
 

src/pages/thread/index.js

@@ -10,46 +10,42 @@ import {
   getComments as getPushshiftComments
 } from '../../api/pushshift'
 import { isDeleted, isRemoved } from '../../utils'
+import CommentInfo from './CommentInfo'
+import SortBy from './SortBy'
+import { connect } from '../../state'
 
-export default class Thread extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      post: {},
-      pushshiftComments: [],
-      removed: [],
-      deleted: [],
-      loadingComments: true
-    }
+class Thread extends React.Component {
+  state = {
+    post: {},
+    pushshiftComments: [],
+    removed: [],
+    deleted: [],
+    loadingComments: true
   }
 
   componentDidMount () {
     const { subreddit, threadID } = this.props.match.params
 
-    Promise.all([
-      // Get thread from reddit
-      getPost(subreddit, threadID)
-        .then(post => {
-          this.setState({ post })
-          // Fetch the thread from pushshift if it was deleted/removed
-          if (isDeleted(post.selftext)) {
-            getRemovedPost(threadID)
-              .then(removedPost => {
-                removedPost.removed = true
-                this.setState({ post: removedPost })
-              })
-          }
-        }),
-      // Get comment ids from pushshift
-      getPushshiftComments(threadID)
-    ])
-      .then(results => {
-        const pushshiftComments = results[1]
+    // Get thread from reddit
+    getPost(subreddit, threadID)
+      .then(post => {
+        this.setState({ post })
+        // Fetch the thread from pushshift if it was deleted/removed
+        if (isDeleted(post.selftext)) {
+          getRemovedPost(threadID)
+            .then(removedPost => {
+              removedPost.removed = true
+              this.setState({ post: removedPost })
+            })
+        }
+      })
+      .catch(error => console.log(error))
 
+      // Get comment ids from pushshift
+    getPushshiftComments(threadID)
+      .then(pushshiftComments => {
         // Extract ids from pushshift response
         const ids = pushshiftComments.map(comment => comment.id)
-        console.log('Number of comments from Pushshift:', ids.length)
 
         // Get all the comments from reddit
         return (
@@ -74,7 +70,6 @@ export default class Thread extends React.Component {
         )
       })
       .then(redditComments => {
-        console.log('Number of comments from Reddit:', redditComments.length)
         const removed = []
         const deleted = []
 
@@ -107,14 +102,24 @@ export default class Thread extends React.Component {
         <Post {...this.state.post} />
         {
           !this.state.loadingComments &&
-          <CommentSection
-            root={root}
-            comments={this.state.pushshiftComments}
-            removed={this.state.removed}
-            deleted={this.state.deleted}
-          />
+          <React.Fragment>
+            <CommentInfo
+              total={this.state.pushshiftComments.length}
+              removed={this.state.removed.length}
+              deleted={this.state.deleted.length}
+            />
+            <SortBy />
+            <CommentSection
+              root={root}
+              comments={this.state.pushshiftComments}
+              removed={this.state.removed}
+              deleted={this.state.deleted}
+            />
+          </React.Fragment>
         }
       </div>
     )
   }
 }
+
+export default connect(Thread)