diff --git a/static/app-strings.json b/static/app-strings.json index 5baa9217f..100546ac1 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2145,11 +2145,8 @@ "%title% by %channelTitle%": "%title% by %channelTitle%", "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%", "%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%", - "Collapse Thread": "Collapse Thread", "Collapse": "Collapse", - "Expand Comments": "Expand Comments", "Expand": "Expand", - "Load More": "Load More", "%formattedSubCount% Followers": "%formattedSubCount% Followers", "1 Follower": "1 Follower", "Collection": "Collection", diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 35525d19a..29023e241 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -1,22 +1,22 @@ // @flow -import * as REACTION_TYPES from 'constants/reactions'; -import * as ICONS from 'constants/icons'; import { COMMENT_HIGHLIGHTED } from 'constants/classnames'; import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment'; -import React, { useEffect } from 'react'; -import classnames from 'classnames'; -import CommentView from 'component/comment'; -import Spinner from 'component/spinner'; +import { ENABLE_COMMENT_REACTIONS } from 'config'; +import { getChannelIdFromClaim } from 'util/claim'; +import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; +import * as ICONS from 'constants/icons'; +import * as REACTION_TYPES from 'constants/reactions'; import Button from 'component/button'; import Card from 'component/common/card'; +import classnames from 'classnames'; import CommentCreate from 'component/commentCreate'; -import usePersistedState from 'effects/use-persisted-state'; -import { ENABLE_COMMENT_REACTIONS } from 'config'; -import Empty from 'component/common/empty'; +import CommentView from 'component/comment'; import debounce from 'util/debounce'; +import Empty from 'component/common/empty'; +import React, { useEffect } from 'react'; +import Spinner from 'component/spinner'; import useFetched from 'effects/use-fetched'; -import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; -import { getChannelIdFromClaim } from 'util/claim'; +import usePersistedState from 'effects/use-persisted-state'; const DEBOUNCE_SCROLL_HANDLER_MS = 200; @@ -33,10 +33,6 @@ type Props = { pinnedComments: Array, topLevelComments: Array, topLevelTotalPages: number, - fetchTopLevelComments: (string, number, number, number) => void, - fetchComment: (string) => void, - fetchReacts: (Array) => Promise, - resetComments: (string) => void, uri: string, claim: ?Claim, claimIsMine: boolean, @@ -51,15 +47,15 @@ type Props = { othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } }, activeChannelId: ?string, settingsByChannelId: { [channelId: string]: PerChannelSettings }, + fetchReacts: (Array) => Promise, + fetchTopLevelComments: (string, number, number, number) => void, + fetchComment: (string) => void, + resetComments: (string) => void, }; function CommentList(props: Props) { const { allCommentIds, - fetchTopLevelComments, - fetchComment, - fetchReacts, - resetComments, uri, pinnedComments, topLevelComments, @@ -77,21 +73,26 @@ function CommentList(props: Props) { othersReactsById, activeChannelId, settingsByChannelId, + fetchReacts, + fetchTopLevelComments, + fetchComment, + resetComments, } = props; + const isMobile = useIsMobile(); + const isMediumScreen = useIsMediumScreen(); const spinnerRef = React.useRef(); const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST; const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT); const [page, setPage] = React.useState(0); - const isMobile = useIsMobile(); - const isMediumScreen = useIsMediumScreen(); + const fetchedCommentsOnce = useFetched(isFetchingComments); + const fetchedReactsOnce = useFetched(isFetchingReacts); + const fetchedLinkedComment = useFetched(isFetchingCommentsById); const [expandedComments, setExpandedComments] = React.useState(!isMobile && !isMediumScreen); const totalFetchedComments = allCommentIds ? allCommentIds.length : 0; const channelId = getChannelIdFromClaim(claim); const channelSettings = channelId ? settingsByChannelId[channelId] : undefined; - const fetchedCommentsOnce = useFetched(isFetchingComments); - const fetchedReactsOnce = useFetched(isFetchingReacts); - const fetchedLinkedComment = useFetched(isFetchingCommentsById); + const moreBelow = page < topLevelTotalPages; // Display comments immediately if not fetching reactions // If not, wait to show comments until reactions are fetched @@ -99,20 +100,6 @@ function CommentList(props: Props) { Boolean(othersReactsById) || !ENABLE_COMMENT_REACTIONS ); - const hasNoComments = !totalComments; - const moreBelow = page < topLevelTotalPages; - - const isMyComment = (channelId: string): boolean => { - if (myChannels != null && channelId != null) { - for (let i = 0; i < myChannels.length; i++) { - if (myChannels[i].claim_id === channelId) { - return true; - } - } - } - return false; - }; - function changeSort(newSort) { if (sort !== newSort) { setSort(newSort); @@ -120,34 +107,6 @@ function CommentList(props: Props) { } } - function getCommentElems(comments) { - return comments.map((comment) => { - return ( - - ); - }); - } - // Reset comments useEffect(() => { if (page === 0) { @@ -168,7 +127,7 @@ function CommentList(props: Props) { fetchTopLevelComments(uri, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort); } - }, [fetchTopLevelComments, uri, page, resetComments, sort, linkedCommentId, fetchComment]); + }, [fetchComment, fetchTopLevelComments, linkedCommentId, page, sort, uri]); // Fetch reacts useEffect(() => { @@ -193,15 +152,14 @@ function CommentList(props: Props) { } } }, [ - totalFetchedComments, - allCommentIds, - othersReactsById, - myReactsByCommentId, - fetchReacts, - uri, activeChannelId, + allCommentIds, + fetchReacts, fetchingChannels, isFetchingReacts, + myReactsByCommentId, + othersReactsById, + totalFetchedComments, ]); // Scroll to linked-comment @@ -223,9 +181,7 @@ function CommentList(props: Props) { // Infinite scroll useEffect(() => { function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) { - if (!spinnerRef || !spinnerRef.current) { - return false; - } + if (!spinnerRef || !spinnerRef.current) return false; const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe @@ -260,86 +216,76 @@ function CommentList(props: Props) { return () => window.removeEventListener('scroll', handleCommentScroll); } } - }, [ - isMobile, - isMediumScreen, - page, - moreBelow, - spinnerRef, - isFetchingComments, - readyToDisplayComments, - topLevelComments.length, - topLevelTotalPages, - ]); + }, [isFetchingComments, isMediumScreen, isMobile, moreBelow, page, readyToDisplayComments, topLevelTotalPages]); - // Expand comments - useEffect(() => { - if (!isMobile && !isMediumScreen && !expandedComments) { - setExpandedComments(true); - } - }, [isMobile, isMediumScreen, expandedComments]); + const getCommentElems = (comments) => { + return comments.map((comment) => ( + claim_id === comment.channel_id) + } + linkedCommentId={linkedCommentId} + isPinned={comment.is_pinned} + supportAmount={comment.support_amount} + numDirectReplies={comment.replies} + isModerator={comment.is_moderator} + isGlobalMod={comment.is_global_mod} + isFiat={comment.is_fiat} + /> + )); + }; + + const sortButton = (label, icon, sortOption) => { + return ( +