wait to render comments until reactions are fetched

This commit is contained in:
Sean Yesmunt 2020-10-27 22:07:40 -04:00
parent 43c2e9e0ed
commit e901daa849
2 changed files with 6 additions and 6 deletions

View file

@ -24,7 +24,7 @@ type Props = {
linkedComment: any, linkedComment: any,
totalComments: number, totalComments: number,
fetchingChannels: boolean, fetchingChannels: boolean,
reactionsById: { [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } }, reactionsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
activeChannel: string, activeChannel: string,
}; };
@ -49,12 +49,13 @@ function CommentList(props: Props) {
'comment-sort', 'comment-sort',
ENABLE_COMMENT_REACTIONS ? SORT_COMMENTS_BEST : SORT_COMMENTS_NEW ENABLE_COMMENT_REACTIONS ? SORT_COMMENTS_BEST : SORT_COMMENTS_NEW
); );
const [start] = React.useState(0); const [start] = React.useState(0);
const [end, setEnd] = React.useState(9); const [end, setEnd] = React.useState(9);
// Display comments immediately if not fetching reactions // Display comments immediately if not fetching reactions
// If not, wait to show comments until reactions are fetched // If not, wait to show comments until reactions are fetched
const [readyToDisplayComments, setReadyToDisplayComments] = React.useState( const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(
reactionsById || !ENABLE_COMMENT_REACTIONS Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS
); );
const linkedCommentId = linkedComment && linkedComment.comment_id; const linkedCommentId = linkedComment && linkedComment.comment_id;
const hasNoComments = totalComments === 0; const hasNoComments = totalComments === 0;
@ -144,8 +145,7 @@ function CommentList(props: Props) {
} }
// Default to newest first for apps that don't have comment reactions // Default to newest first for apps that don't have comment reactions
const sortedComments = sortComments({ comments, reactionsById, sort, isMyComment }); const sortedComments = reactionsById ? sortComments({ comments, reactionsById, sort, isMyComment }) : [];
const displayedComments = readyToDisplayComments const displayedComments = readyToDisplayComments
? prepareComments(sortedComments, linkedComment).slice(start, end) ? prepareComments(sortedComments, linkedComment).slice(start, end)
: []; : [];

View file

@ -14,8 +14,8 @@ const defaultState: CommentsState = {
isFetchingReacts: false, isFetchingReacts: false,
pendingCommentReactions: [], pendingCommentReactions: [],
typesReacting: [], typesReacting: [],
myReactsByCommentId: {}, myReactsByCommentId: undefined,
othersReactsByCommentId: {}, othersReactsByCommentId: undefined,
commentChannel: '', commentChannel: '',
}; };