b75a4014b6
* 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
75 lines
2 KiB
JavaScript
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>
|
|
);
|
|
}
|