LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Remove expand/collapse from channel discussion page

Browse source
This commit is contained in:
saltrafael 2021-10-04 16:25:43 -03:00 committed by infinite-persistence
parent fc2e08c882
commit 256ed6a106
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelDiscussion/view.jsx
View file

@ -17,7 +17,7 @@ function ChannelDiscussion(props: Props) {
} }
return ( return (
<section className="section"> <section className="section">
<CommentsList uri={uri} linkedCommentId={linkedCommentId} /> <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
</section> </section>
); );
} }

13
ui/component/commentsList/view.jsx
View file

@ -48,6 +48,7 @@ type Props = {
activeChannelId: ?string, activeChannelId: ?string,
settingsByChannelId: { [channelId: string]: PerChannelSettings }, settingsByChannelId: { [channelId: string]: PerChannelSettings },
fetchReacts: (Array<string>) => Promise<any>, fetchReacts: (Array<string>) => Promise<any>,
commentsAreExpanded?: boolean,
fetchTopLevelComments: (string, number, number, number) => void, fetchTopLevelComments: (string, number, number, number) => void,
fetchComment: (string) => void, fetchComment: (string) => void,
resetComments: (string) => void, resetComments: (string) => void,
@ -74,6 +75,7 @@ function CommentList(props: Props) {
activeChannelId, activeChannelId,
settingsByChannelId, settingsByChannelId,
fetchReacts, fetchReacts,
commentsAreExpanded,
fetchTopLevelComments, fetchTopLevelComments,
fetchComment, fetchComment,
resetComments, resetComments,
@ -88,7 +90,8 @@ function CommentList(props: Props) {
const fetchedCommentsOnce = useFetched(isFetchingComments); const fetchedCommentsOnce = useFetched(isFetchingComments);
const fetchedReactsOnce = useFetched(isFetchingReacts); const fetchedReactsOnce = useFetched(isFetchingReacts);
const fetchedLinkedComment = useFetched(isFetchingCommentsById); const fetchedLinkedComment = useFetched(isFetchingCommentsById);
const [expandedComments, setExpandedComments] = React.useState(!isMobile && !isMediumScreen); const hasDefaultExpansion = commentsAreExpanded || (!isMobile && !isMediumScreen);
const [expandedComments, setExpandedComments] = React.useState(hasDefaultExpansion);
const totalFetchedComments = allCommentIds ? allCommentIds.length : 0; const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
const channelId = getChannelIdFromClaim(claim); const channelId = getChannelIdFromClaim(claim);
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined; const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
@ -203,7 +206,7 @@ function CommentList(props: Props) {
} }
const handleCommentScroll = debounce(() => { const handleCommentScroll = debounce(() => {
if (!isMobile && !isMediumScreen && shouldFetchNextPage(page, topLevelTotalPages, window, document)) { if (hasDefaultExpansion && shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
setPage(page + 1); setPage(page + 1);
} }
}, DEBOUNCE_SCROLL_HANDLER_MS); }, DEBOUNCE_SCROLL_HANDLER_MS);
@ -216,7 +219,7 @@ function CommentList(props: Props) {
return () => window.removeEventListener('scroll', handleCommentScroll); return () => window.removeEventListener('scroll', handleCommentScroll);
} }
} }
}, [isFetchingComments, isMediumScreen, isMobile, moreBelow, page, readyToDisplayComments, topLevelTotalPages]); }, [hasDefaultExpansion, isFetchingComments, moreBelow, page, readyToDisplayComments, topLevelTotalPages]);
const getCommentElems = (comments) => { const getCommentElems = (comments) => {
return comments.map((comment) => ( return comments.map((comment) => (
@ -299,7 +302,7 @@ function CommentList(props: Props) {
{readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)} {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
</ul> </ul>
{(isMobile || isMediumScreen) && ( {!hasDefaultExpansion && (
<div className="card__bottom-actions--comments"> <div className="card__bottom-actions--comments">
{(!expandedComments || moreBelow) && ( {(!expandedComments || moreBelow) && (
<Button <Button
@ -320,7 +323,7 @@ function CommentList(props: Props) {
</div> </div>
)} )}
{(isFetchingComments || (!isMobile && !isMediumScreen && moreBelow)) && ( {(isFetchingComments || (hasDefaultExpansion && moreBelow)) && (
<div className="main--empty" ref={spinnerRef}> <div className="main--empty" ref={spinnerRef}>
<Spinner type="small" /> <Spinner type="small" />
</div> </div>

2
ui/page/file/view.jsx
View file

@ -220,7 +220,7 @@ function FilePage(props: Props) {
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />} {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
{isMarkdown && ( {isMarkdown && (
<div className="file-page__post-comments"> <div className="file-page__post-comments">
<CommentsList uri={uri} linkedCommentId={linkedCommentId} /> <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
</div> </div>
)} )}
</Page> </Page>