lbry-desktop/ui/component/commentsReplies/view.jsx
saltrafael b75a4014b6
Re-design comment threads (#1489)
* Redesign threadline and fetching state

- threadline goes right below channel avatar, mimicking reddits implementation, has a increase effect on hover and is slimmer, creating more space for comments on screen
- fetching state now replaces show/hide button, also mimicking reddit, and now says that it is loading, instead of a blank spinner, and also improves space a bit

* Redesign comment threads

- Allow for infinite comment chains
- Can go back and forth between the pages
- Can go back to all comments or to the first comment in the chain
- Some other improvements, which include:
- add title on non-drawer comment sections (couldn't see amount of comments)
- fix Expandable component (would begin expanded and collapse after the effect runs, which looked bad and shifted the layout, now each comments greater than the set length begins collapsed)
- used constants for consistency

* Fix replying to last thread comment

* Fix buttons condition (only on fetched comment to avoid deleted case)

* Fix auto-scroll

* Bring back instant feedback for Show More replies

* Improve thread back links

- Now going back to all comments links the top-level comment for easier navigation
- Going back to ~ previous ~ now goes back into the chain instead of topmost level

* Clear timeouts due to unrelated issue

* Fix deep thread linked comment case and more scroll improvements

* More minor changes

* Flow

* Fix commentList tile style

* Fix long channel names overflowing on small screens

* More scroll changes

* Fix threadline

* Revert "Fix long channel names overflowing on small screens"

This reverts commit e4d2dc7da5861ed8136a60f3352e41a690cd4d33.

* Fix replies fetch

* Revert "Fix replies fetch"

This reverts commit ec70054675a604a7a5f3764ba07c36bf7b0f49c8.

* Cleanup and make smooth

* Always use linked comment on threads

* Cleanup

* Higlight thread comment

* Fix comment body styles
2022-05-16 06:22:13 -04:00

75 lines
2 KiB
JavaScript

// @flow
import Button from 'component/button';
import Comment from 'component/comment';
import React from 'react';
import Spinner from 'component/spinner';
type Props = {
uri: string,
linkedCommentId?: string,
threadCommentId?: string,
numDirectReplies: number, // Total replies for parentId as reported by 'comment[replies]'. Includes blocked items.
hasMore: boolean,
supportDisabled: boolean,
threadDepthLevel?: number,
onShowMore?: () => void,
// redux
fetchedReplies: Array<Comment>,
claimIsMine: boolean,
threadLevel: number,
isFetching: boolean,
};
export default function CommentsReplies(props: Props) {
const {
uri,
fetchedReplies,
claimIsMine,
linkedCommentId,
threadCommentId,
numDirectReplies,
hasMore,
supportDisabled,
threadDepthLevel,
onShowMore,
threadLevel,
isFetching,
} = props;
return !numDirectReplies ? null : (
<div className="comment__replies-container">
<ul className="comment__replies">
{fetchedReplies.map((comment) => (
<Comment
key={comment.comment_id}
uri={uri}
comment={comment}
claimIsMine={claimIsMine}
linkedCommentId={linkedCommentId}
threadCommentId={threadCommentId}
supportDisabled={supportDisabled}
threadLevel={threadLevel + 1}
threadDepthLevel={threadDepthLevel}
/>
))}
</ul>
{fetchedReplies.length > 0 &&
hasMore &&
(isFetching ? (
<span className="comment__actions--nested comment__replies-loading--more">
<Spinner text={__('Loading')} type="small" />
</span>
) : (
<div className="comment__actions--nested">
<Button
button="link"
label={__('Show more')}
onClick={() => onShowMore && onShowMore()}
className="button--uri-indicator"
/>
</div>
))}
</div>
);
}