prehistoric-systems/removeddit
1
0
Fork 0
mirror of https://github.com/gurnec/removeddit.git synced 2026-03-11 08:54:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Speed up sort & filter changes

Browse source
This commit is contained in:
Christopher Gurnee 2022-03-05 12:50:18 -05:00
parent 1b156c5f56
commit 3c728e569a
2 changed files with 50 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/pages/thread/CommentSection.js
View file

@ -6,7 +6,7 @@ import {
showRemovedAndDeleted, showRemoved, showDeleted
} from '../../utils'
const unflatten = (commentMap, root, removed, deleted) => {
const unflatten = (commentMap, root) => {
const commentTree = []
commentMap.forEach(comment => {
@ -68,31 +68,53 @@ const filterCommentTree = (comments, filterFunction) => {
return hasOkComment
}
let commentTree, lastTotal, lastRoot, lastFilter, lastSort
const commentSection = (props) => {
console.time('render comment section')
const commentTree = unflatten(props.comments, props.root, props.removed, props.deleted)
const {commentFilter, commentSort} = props
console.time('Build comment tree')
const {total, root, commentFilter, commentSort} = props
if (commentFilter === filter.removedDeleted) {
filterCommentTree(commentTree, showRemovedAndDeleted)
} else if (commentFilter === filter.removed) {
filterCommentTree(commentTree, showRemoved)
} else if (commentFilter === filter.deleted) {
filterCommentTree(commentTree, showDeleted)
const needsRebuild = !(total === lastTotal && root === lastRoot && (
commentFilter === lastFilter ||
lastFilter === filter.all ||
lastFilter === filter.removedDeleted && (
commentFilter === filter.removed ||
commentFilter === filter.deleted
)
))
if (needsRebuild)
commentTree = unflatten(props.comments, root)
if (needsRebuild || commentFilter !== lastFilter) {
if (commentFilter === filter.removedDeleted) {
filterCommentTree(commentTree, showRemovedAndDeleted)
} else if (commentFilter === filter.removed) {
filterCommentTree(commentTree, showRemoved)
} else if (commentFilter === filter.deleted) {
filterCommentTree(commentTree, showDeleted)
}
}
if (commentSort === sort.top) {
sortCommentTree(commentTree, topSort)
} else if (commentSort === sort.bottom) {
sortCommentTree(commentTree, bottomSort)
} else if (commentSort === sort.new) {
sortCommentTree(commentTree, newSort)
} else if (commentSort === sort.old) {
sortCommentTree(commentTree, oldSort)
if (needsRebuild || commentSort !== lastSort) {
if (commentSort === sort.top) {
sortCommentTree(commentTree, topSort)
} else if (commentSort === sort.bottom) {
sortCommentTree(commentTree, bottomSort)
} else if (commentSort === sort.new) {
sortCommentTree(commentTree, newSort)
} else if (commentSort === sort.old) {
sortCommentTree(commentTree, oldSort)
}
}
console.timeEnd('render comment section')
return (
lastTotal = total
lastRoot = root
lastFilter = commentFilter
lastSort = commentSort
console.timeEnd('Build comment tree')
console.time('Build html tree')
const htmlTree = (
commentTree.length !== 0
? commentTree.map(comment => (
<Comment
@ -104,6 +126,8 @@ const commentSection = (props) => {
))
: <p>No comments found</p>
)
console.timeEnd('Build html tree')
return htmlTree
}
const areEqual = (prevProps, nextProps) => {
@ -113,10 +137,8 @@ const areEqual = (prevProps, nextProps) => {
return false
if (nextProps.reloadingComments)
return true
return prevProps.total === nextProps.total &&
prevProps.removed.length === nextProps.removed.length &&
prevProps.deleted.length === nextProps.deleted.length &&
prevProps.postAuthor === nextProps.postAuthor
return prevProps.total === nextProps.total &&
prevProps.postAuthor === nextProps.postAuthor
}
export default React.memo(commentSection, areEqual)

27
src/utils.js
View file

@ -99,29 +99,10 @@ export const get = (key, defaultValue) => {
export const put = (key, value) => window.localStorage.setItem(key, JSON.stringify(value))
// Sorting for comments
export const topSort = (commentA, commentB) => {
if (commentA.score > commentB.score) return -1
if (commentA.score < commentB.score) return 1
return 0
}
export const bottomSort = (commentA, commentB) => {
if (commentA.score < commentB.score) return -1
if (commentA.score > commentB.score) return 1
return 0
}
export const newSort = (commentA, commentB) => {
if (commentA.created_utc > commentB.created_utc) return -1
if (commentA.created_utc < commentB.created_utc) return 1
return 0
}
export const oldSort = (commentA, commentB) => {
if (commentA.created_utc < commentB.created_utc) return -1
if (commentA.created_utc > commentB.created_utc) return 1
return 0
}
export const topSort = (commentA, commentB) => commentB.score - commentA.score
export const bottomSort = (commentA, commentB) => commentA.score - commentB.score
export const newSort = (commentA, commentB) => commentB.created_utc - commentA.created_utc
export const oldSort = (commentA, commentB) => commentA.created_utc - commentB.created_utc
// Filter comments
export const showRemoved = comment => comment.removed === true