diff --git a/src/js/components/CommentInfo.js b/src/js/components/CommentInfo.js index 2a0be2a..0866f7f 100644 --- a/src/js/components/CommentInfo.js +++ b/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 => (
- removed comments: {props.removed}/{props.total} ({((100 * props.removed) / props.total).toFixed(1)}%) + removed comments: {props.removed}/{props.total} ({getProcent(props.removed, props.total)}%)
- deleted comments: {props.deleted}/{props.total} ({((100 * props.deleted) / props.total).toFixed(1)}%) + deleted comments: {props.deleted}/{props.total} ({getProcent(props.deleted, props.total)}%)
) diff --git a/src/js/components/CommentSection.js b/src/js/components/CommentSection.js index 425bb5d..b161004 100644 --- a/src/js/components/CommentSection.js +++ b/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 (
(
sorted by: - props.setSort(e.target.value)} defaultValue={props.sort}> @@ -20,7 +21,7 @@ const sortBy = props => ( show: - props.setShow(e.target.value)} defaultValue={props.show}> diff --git a/src/js/pages/Thread.js b/src/js/pages/Thread.js index 677fa5e..03da0e5 100644 --- a/src/js/pages/Thread.js +++ b/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 (
diff --git a/src/js/state/commentSection.js b/src/js/state/commentSection.js index eb38a86..6a9f2fa 100644 --- a/src/js/state/commentSection.js +++ b/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, diff --git a/src/js/utils/index.js b/src/js/utils/index.js index 89bdf18..192c5fc 100644 --- a/src/js/utils/index.js +++ b/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