removeddit/src/js/components/CommentSection.js

import React from 'react'
import Comment from 'components/Comment'
import CommentInfo from 'components/CommentInfo'
import SortBy from 'components/SortBy'
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 = {}

  commentList.forEach(comment => {
    comment.replies = []

    if (removed.includes(comment.id)) {
      comment.removed = true
    } else if (deleted.includes(comment.id)) {
      comment.deleted = true
    }

    lookup[comment.id] = comment
  })

  return lookup
}

const unflatten = (comments, root, removed, deleted) => {
  const lookup = arrayToLookup(comments, removed, deleted)
  const commentTree = []

  Object.keys(lookup).forEach(commentID => {
    const comment = lookup[commentID]
    const parentID = comment.parent_id

    if (parentID === root) {
      commentTree.push(comment)
    } else {
      lookup[parentID].replies.push(comment)
    }
  })

  return commentTree
}

const sortCommentTree = (comments, sortFunction) => {
  comments.sort(sortFunction)

  comments.forEach(comment => {
    if (comment.replies.length > 0) {
      sortCommentTree(comment.replies, sortFunction)
    }
  })
}

const filerCommentTree = (comments, filterFunction) => {
  // comments.forEach()
}

const commentSection = (props) => {
  const commentTree = unflatten(props.comments, props.root, props.removed, props.deleted)

  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)
  console.log(commentTree)
  return (
    <div>
      <CommentInfo
        total={props.comments.length}
        removed={props.removed.length}
        deleted={props.deleted.length}
      />
      <SortBy />
      {commentTree.map(comment => (
        <Comment
          key={comment.id}
          {...comment}
        />
      ))}
    </div>
  )
}

const mapStateToProps = state => ({
  sort: state.commentSection.sort,
  show: state.commentSection.show,
})


export default connect(mapStateToProps)(commentSection)