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
60 lines
2.4 KiB
JavaScript
60 lines
2.4 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import {
|
|
selectStakedLevelForChannelUri,
|
|
makeSelectClaimForUri,
|
|
selectThumbnailForUri,
|
|
selectHasChannels,
|
|
selectMyClaimIdsRaw,
|
|
selectOdyseeMembershipForUri,
|
|
} from 'redux/selectors/claims';
|
|
import { doCommentUpdate, doCommentList } from 'redux/actions/comments';
|
|
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
|
|
import { doToast } from 'redux/actions/notifications';
|
|
import { doClearPlayingUri } from 'redux/actions/content';
|
|
import {
|
|
selectFetchedCommentAncestors,
|
|
selectOthersReactsForComment,
|
|
makeSelectTotalReplyPagesForParentId,
|
|
selectIsFetchingCommentsForParentId,
|
|
selectRepliesForParentId,
|
|
} from 'redux/selectors/comments';
|
|
import { selectActiveChannelClaim } from 'redux/selectors/app';
|
|
import { selectPlayingUri } from 'redux/selectors/content';
|
|
import { selectUserVerifiedEmail } from 'redux/selectors/user';
|
|
import Comment from './view';
|
|
|
|
const select = (state, props) => {
|
|
const { comment, uri } = props;
|
|
const { comment_id, channel_url } = comment || {};
|
|
|
|
const activeChannelClaim = selectActiveChannelClaim(state);
|
|
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
|
|
const reactionKey = activeChannelId ? `${comment_id}:${activeChannelId}` : comment_id;
|
|
|
|
return {
|
|
myChannelIds: selectMyClaimIdsRaw(state),
|
|
claim: makeSelectClaimForUri(uri)(state),
|
|
thumbnail: channel_url && selectThumbnailForUri(state, channel_url),
|
|
channelIsBlocked: channel_url && makeSelectChannelIsMuted(channel_url)(state),
|
|
commentingEnabled: Boolean(selectUserVerifiedEmail(state)),
|
|
othersReacts: selectOthersReactsForComment(state, reactionKey),
|
|
activeChannelClaim,
|
|
hasChannels: selectHasChannels(state),
|
|
playingUri: selectPlayingUri(state),
|
|
stakedLevel: selectStakedLevelForChannelUri(state, channel_url),
|
|
linkedCommentAncestors: selectFetchedCommentAncestors(state),
|
|
totalReplyPages: makeSelectTotalReplyPagesForParentId(comment_id)(state),
|
|
selectOdyseeMembershipForUri: channel_url && selectOdyseeMembershipForUri(state, channel_url),
|
|
repliesFetching: selectIsFetchingCommentsForParentId(state, comment_id),
|
|
fetchedReplies: selectRepliesForParentId(state, comment_id),
|
|
};
|
|
};
|
|
|
|
const perform = {
|
|
doClearPlayingUri,
|
|
updateComment: doCommentUpdate,
|
|
fetchReplies: doCommentList,
|
|
doToast,
|
|
};
|
|
|
|
export default connect(select, perform)(Comment);
|