Sorting comments now work

optimization

@@ -1 +1,4 @@
-take utc from thread and limit pushshift comments
+take utc from thread and limit pushshift comments
+
+
+rename show to filter

src/js/components/CommentSection.js

@@ -2,8 +2,15 @@ import React from 'react'
 import Comment from 'components/Comment'
 import CommentInfo from 'components/CommentInfo'
 import SortBy from 'components/SortBy'
-import { topSort, bottomSort, newSort, oldSort } from 'utils'
-
+import { connect } from 'react-redux'
+import {
+  SORT_TOP, SORT_BOTTOM, SORT_NEW, SORT_OLD,
+  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED,
+} from 'state'
+import {
+  topSort, bottomSort, newSort, oldSort,
+  showRemovedAndDeleted, showRemoved, showDeleted,
+} from 'utils'
 
 const arrayToLookup = (commentList, removed, deleted) => {
   const lookup = {}
@@ -51,10 +58,30 @@ const sortCommentTree = (comments, sortFunction) => {
   })
 }
 
+const filerCommentTree = (comments, filterFunction) => {
+  // comments.forEach()
+}
+
 const commentSection = (props) => {
   const commentTree = unflatten(props.comments, props.root, props.removed, props.deleted)
-  sortCommentTree(commentTree, newSort)// props.comments.sort(topSort)
 
+  if (props.show === SHOW_REMOVED_DELETED) {
+    filerCommentTree(commentTree, showRemovedAndDeleted)
+  } else if (props.show === SHOW_REMOVED) {
+    filerCommentTree(commentTree, showRemoved)
+  } else if (props.show === SHOW_DELETED) {
+    filerCommentTree(commentTree, showDeleted)
+  }
+
+  if (props.sort === SORT_TOP) {
+    sortCommentTree(commentTree, topSort)
+  } else if (props.sort === SORT_BOTTOM) {
+    sortCommentTree(commentTree, bottomSort)
+  } else if (props.sort === SORT_NEW) {
+    sortCommentTree(commentTree, newSort)
+  } else if (props.sort === SORT_OLD) {
+    sortCommentTree(commentTree, oldSort)
+  }
 
   console.log('COMMENT SECTION RENDERED')
   console.log(props.root)
@@ -77,5 +104,10 @@ const commentSection = (props) => {
   )
 }
 
+const mapStateToProps = state => ({
+  sort: state.commentSection.sort,
+  show: state.commentSection.show,
+})
 
-export default commentSection
+
+export default connect(mapStateToProps)(commentSection)

src/js/components/SortBy.js

@@ -1,23 +1,46 @@
 import React from 'react'
+import {
+  setCommentSort,
+  setCommentShow,
+  SORT_TOP, SORT_BOTTOM, SORT_NEW, SORT_OLD,
+  SHOW_ALL, SHOW_REMOVED_DELETED, SHOW_REMOVED, SHOW_DELETED,
+} from 'state'
+import { connect } from 'react-redux'
 
-export default props => (
+const sortBy = props => (
   <div id='comment-sort'>
   sorted by:
     <span className='space' />
-    <select>
-      <option value='top'>top</option>
-      <option value='bottom'>bottom</option>
-      <option value='new'>new</option>
-      <option value='old'>old</option>
+    <select onChange={e => props.setSort(e.target.value)}>
+      <option value={SORT_TOP}>top</option>
+      <option value={SORT_BOTTOM}>bottom</option>
+      <option value={SORT_NEW}>new</option>
+      <option value={SORT_OLD}>old</option>
     </select>
     <span className='space' />
   show:
     <span className='space' />
-    <select>
-      <option value='all'>All comments</option>
-      <option value='removed-deleted'>Removed and deleted</option>
-      <option value='removed'>Removed</option>
-      <option value='deleted'>Deleted</option>
+    <select onChange={e => props.setShow(e.target.value)}>
+      <option value={SHOW_ALL}>All comments</option>
+      <option value={SHOW_REMOVED_DELETED}>Removed and deleted</option>
+      <option value={SHOW_REMOVED}>Removed</option>
+      <option value={SHOW_DELETED}>Deleted</option>
     </select>
   </div>
 )
+
+const mapStateToProps = state => ({
+  sort: state.commentSection.sort,
+  show: state.commentSection.show,
+})
+
+const mapDispatchToProps = dispatch => ({
+  setSort: sortString => dispatch(setCommentSort(sortString)),
+  setShow: showString => dispatch(setCommentShow(showString)),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(sortBy)
+

src/js/state/commentSection.js

@@ -0,0 +1,42 @@
+// 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
+export const SHOW_ALL = 'SHOW_ALL'
+export const SHOW_REMOVED_DELETED = 'SHOW_REMOVED_DELETED'
+export const SHOW_REMOVED = 'SHOW_REMOVED'
+export const SHOW_DELETED = 'SHOW_DELETED'
+
+// Action types
+export const COMMENT_SORT = 'COMMENT_SORT'
+export const COMMENT_SHOW = 'COMMENT_SHOW'
+
+// Action creators
+export const setCommentSort = payload => ({ type: COMMENT_SORT, payload })
+export const setCommentShow = payload => ({ type: COMMENT_SHOW, payload })
+
+// Init state
+const initialStatusState = {
+  sort: SORT_TOP,
+  show: SHOW_REMOVED_DELETED,
+}
+
+export const commentSectionReducer = (state = initialStatusState, action) => {
+  switch (action.type) {
+    case COMMENT_SORT:
+      return {
+        ...state,
+        sort: action.payload,
+      }
+    case COMMENT_SHOW:
+      return {
+        ...state,
+        show: action.payload,
+      }
+    default:
+      return state
+  }
+}

src/js/state/index.js

@@ -1,11 +1,14 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 import logger from 'redux-logger'
 import { statusReducer } from './status'
+import { commentSectionReducer } from './commentSection'
 
 export { setStatusLoading, setStatusSuccess, setStatusError } from './status'
+export * from './commentSection'
 
 const reducer = combineReducers({
   status: statusReducer,
+  commentSection: commentSectionReducer,
 })
 
 export const store = createStore(reducer, applyMiddleware(logger))

src/js/utils/index.js

@@ -98,8 +98,8 @@ export const bottomSort = (commentA, commentB) => {
 }
 
 export const newSort = (commentA, commentB) => {
-  if (commentA.created_utc < commentB.created_utc) return -1
-  if (commentA.created_utc > commentB.created_utc) return 1
+  if (commentA.created_utc > commentB.created_utc) return -1
+  if (commentA.created_utc < commentB.created_utc) return 1
   return 0
 }
 
@@ -108,3 +108,8 @@ export const oldSort = (commentA, commentB) => {
   if (commentA.created_utc > commentB.created_utc) return 1
   return 0
 }
+
+// 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)