Fixed some bugs with displaying all removed comments

src/js/components/CommentInfo.js

@@ -1,13 +1,15 @@
 import React from 'react'
 
+const getProcent = (part, total) => (total === 0 ? '0.0' : ((100 * part) / total).toFixed(1))
+
 export default props => (
   <div id='comment-info'>
     <span className='removed-text'>
-      removed comments: {props.removed}/{props.total} ({((100 * props.removed) / props.total).toFixed(1)}%)
+      removed comments: {props.removed}/{props.total} ({getProcent(props.removed, props.total)}%)
     </span>
     <br />
     <span className='deleted-text'>
-      deleted comments:  {props.deleted}/{props.total} ({((100 * props.deleted) / props.total).toFixed(1)}%)
+      deleted comments:  {props.deleted}/{props.total} ({getProcent(props.deleted, props.total)}%)
     </span>
   </div>
 )

src/js/components/CommentSection.js

@@ -41,6 +41,11 @@ const unflatten = (comments, root, removed, deleted) => {
     if (parentID === root) {
       commentTree.push(comment)
     } else {
+      if (lookup[parentID] === undefined) {
+        console.error('MISSING PARENT ID:', parentID, 'for comment', comment)
+        return
+      }
+
       lookup[parentID].replies.push(comment)
     }
   })
@@ -58,19 +63,38 @@ const sortCommentTree = (comments, sortFunction) => {
   })
 }
 
-const filerCommentTree = (comments, filterFunction) => {
-  // comments.forEach()
+const filterCommentTree = (comments, filterFunction) => {
+  if (comments.length === 0) {
+    return false
+  }
+
+  let hasOkComment = false
+
+  // Reverse for loop since we are removing stuff
+  for (let i = comments.length - 1; i >= 0; i--) {
+    const comment = comments[i]
+    const isRepliesOk = filterCommentTree(comment.replies, filterFunction)
+    const isCommentOk = filterFunction(comment)
+
+    if (!isRepliesOk && !isCommentOk) {
+      comments.splice(i, 1)
+    } else {
+      hasOkComment = true
+    }
+  }
+
+  return hasOkComment
 }
 
 const commentSection = (props) => {
   const commentTree = unflatten(props.comments, props.root, props.removed, props.deleted)
 
   if (props.show === SHOW_REMOVED_DELETED) {
-    filerCommentTree(commentTree, showRemovedAndDeleted)
+    filterCommentTree(commentTree, showRemovedAndDeleted)
   } else if (props.show === SHOW_REMOVED) {
-    filerCommentTree(commentTree, showRemoved)
+    filterCommentTree(commentTree, showRemoved)
   } else if (props.show === SHOW_DELETED) {
-    filerCommentTree(commentTree, showDeleted)
+    filterCommentTree(commentTree, showDeleted)
   }
 
   if (props.sort === SORT_TOP) {
@@ -84,8 +108,7 @@ const commentSection = (props) => {
   }
 
   console.log('COMMENT SECTION RENDERED')
-  console.log(props.root)
-  console.log(commentTree)
+
   return (
     <div>
       <CommentInfo

src/js/components/SortBy.js

@@ -7,11 +7,12 @@ import {
 } from 'state'
 import { connect } from 'react-redux'
 
+
 const sortBy = props => (
   <div id='comment-sort'>
   sorted by:
     <span className='space' />
-    <select onChange={e => props.setSort(e.target.value)}>
+    <select onChange={e => props.setSort(e.target.value)} defaultValue={props.sort}>
       <option value={SORT_TOP}>top</option>
       <option value={SORT_BOTTOM}>bottom</option>
       <option value={SORT_NEW}>new</option>
@@ -20,7 +21,7 @@ const sortBy = props => (
     <span className='space' />
   show:
     <span className='space' />
-    <select onChange={e => props.setShow(e.target.value)}>
+    <select onChange={e => props.setShow(e.target.value)} defaultValue={props.show}>
       <option value={SHOW_ALL}>All comments</option>
       <option value={SHOW_REMOVED_DELETED}>Removed and deleted</option>
       <option value={SHOW_REMOVED}>Removed</option>

src/js/pages/Thread.js

@@ -48,13 +48,28 @@ export default class Thread extends React.Component {
     ])
       .then(results => {
         const pushshiftComments = results[1]
-        this.setState({ pushshiftComments })
+
 
         // Extract ids from pushshift response
         const ids = pushshiftComments.map(comment => comment.id)
         console.log('pushshift:', ids.length)
+
         // Get all the comments from reddit
-        return getRedditComments(ids)
+        return (
+          getRedditComments(ids)
+            .then(redditComments => {
+              pushshiftComments.forEach(comment => {
+                // Replace pushshift score with reddit (its usually more accurate)
+                const redditComment = redditComments.find(rComment => rComment.id === comment.id)
+                if (redditComment !== undefined) {
+                  comment.score = redditComment.score
+                }
+              })
+
+              this.setState({ pushshiftComments })
+              return redditComments
+            })
+        )
       })
       .then(redditComments => {
         console.log('reddit:', redditComments.length)
@@ -80,8 +95,6 @@ export default class Thread extends React.Component {
   }
 
   render() {
-    console.log('loading', this.state.loadingComments)
-
     return (
       <div>
         <Post {...this.state.post} />

src/js/state/commentSection.js

@@ -1,10 +1,12 @@
+import { get, put } from 'utils'
+
 // Sort types
 export const SORT_TOP = 'SORT_TOP'
 export const SORT_BOTTOM = 'SORT_BOTTOM'
 export const SORT_NEW = 'SORT_NEW'
 export const SORT_OLD = 'SORT_OLD'
 
-// Show types
+// Filter types
 export const SHOW_ALL = 'SHOW_ALL'
 export const SHOW_REMOVED_DELETED = 'SHOW_REMOVED_DELETED'
 export const SHOW_REMOVED = 'SHOW_REMOVED'
@@ -18,20 +20,25 @@ export const COMMENT_SHOW = 'COMMENT_SHOW'
 export const setCommentSort = payload => ({ type: COMMENT_SORT, payload })
 export const setCommentShow = payload => ({ type: COMMENT_SHOW, payload })
 
+const sortKey = 'commentSort'
+const filterKey = 'commentFilter'
+
 // Init state
 const initialStatusState = {
-  sort: SORT_TOP,
-  show: SHOW_REMOVED_DELETED,
+  sort: get(sortKey, SORT_TOP),
+  show: get(filterKey, SHOW_REMOVED_DELETED),
 }
 
 export const commentSectionReducer = (state = initialStatusState, action) => {
   switch (action.type) {
     case COMMENT_SORT:
+      put(sortKey, action.payload)
       return {
         ...state,
         sort: action.payload,
       }
     case COMMENT_SHOW:
+      put(filterKey, action.payload)
       return {
         ...state,
         show: action.payload,

src/js/utils/index.js

@@ -84,6 +84,14 @@ export const prettyScore = score => {
   return score
 }
 
+// Retrieve, store and delete stuff in the local storage
+export const get = (key, defaultValue) => (
+  localStorage.getItem(key) !== null ? JSON.parse(localStorage.getItem(key)) : defaultValue
+)
+
+export const put = (key, value) => localStorage.setItem(key, JSON.stringify(value))
+
+
 // Sorting for comments
 export const topSort = (commentA, commentB) => {
   if (commentA.score > commentB.score) return -1
@@ -110,6 +118,6 @@ export const oldSort = (commentA, commentB) => {
 }
 
 // Filter comments
-export const showRemoved = comment => isRemoved(comment.body)
-export const showDeleted = comment => isDeleted(comment.body)
-export const showRemovedAndDeleted = comment => isRemoved(comment.body) || isDeleted(comment.body)
+export const showRemoved = comment => comment.removed === true
+export const showDeleted = comment => comment.deleted === true
+export const showRemovedAndDeleted = comment => comment.removed === true || comment.deleted === true