From 73ee6c13aefe72066c1eb724a43b1d4ca2964bfa Mon Sep 17 00:00:00 2001 From: Jubbeart Date: Sun, 4 Feb 2018 19:35:07 +0100 Subject: [PATCH] Sorting comments now work --- optimization | 5 +++- src/js/components/CommentSection.js | 40 ++++++++++++++++++++++--- src/js/components/SortBy.js | 45 ++++++++++++++++++++++------- src/js/state/commentSection.js | 42 +++++++++++++++++++++++++++ src/js/state/index.js | 3 ++ src/js/utils/index.js | 9 ++++-- 6 files changed, 126 insertions(+), 18 deletions(-) create mode 100644 src/js/state/commentSection.js diff --git a/optimization b/optimization index d8d5180..552fd2e 100644 --- a/optimization +++ b/optimization @@ -1 +1,4 @@ -take utc from thread and limit pushshift comments \ No newline at end of file +take utc from thread and limit pushshift comments + + +rename show to filter \ No newline at end of file diff --git a/src/js/components/CommentSection.js b/src/js/components/CommentSection.js index 521adb4..425bb5d 100644 --- a/src/js/components/CommentSection.js +++ b/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) diff --git a/src/js/components/SortBy.js b/src/js/components/SortBy.js index 23d466d..c047657 100644 --- a/src/js/components/SortBy.js +++ b/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 => (
sorted by: - props.setSort(e.target.value)}> + + + + show: - props.setShow(e.target.value)}> + + + +
) + +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) + diff --git a/src/js/state/commentSection.js b/src/js/state/commentSection.js new file mode 100644 index 0000000..eb38a86 --- /dev/null +++ b/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 + } +} diff --git a/src/js/state/index.js b/src/js/state/index.js index 2330ea6..0d5fd58 100644 --- a/src/js/state/index.js +++ b/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)) diff --git a/src/js/utils/index.js b/src/js/utils/index.js index 6fc6ee6..89bdf18 100644 --- a/src/js/utils/index.js +++ b/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)