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
68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import {
|
|
selectClaimForUri,
|
|
selectClaimIsMine,
|
|
selectFetchingMyChannels,
|
|
selectClaimsByUri,
|
|
} from 'redux/selectors/claims';
|
|
import {
|
|
selectTopLevelCommentsForUri,
|
|
makeSelectTopLevelTotalPagesForUri,
|
|
selectIsFetchingComments,
|
|
selectIsFetchingCommentsById,
|
|
selectIsFetchingReacts,
|
|
selectTotalCommentsCountForUri,
|
|
selectOthersReacts,
|
|
selectMyReacts,
|
|
selectCommentIdsForUri,
|
|
selectSettingsByChannelId,
|
|
selectPinnedCommentsForUri,
|
|
selectCommentForCommentId,
|
|
selectCommentAncestorsForId,
|
|
} from 'redux/selectors/comments';
|
|
import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
|
|
import { selectActiveChannelClaim } from 'redux/selectors/app';
|
|
import { getChannelIdFromClaim } from 'util/claim';
|
|
import { doFetchUserMemberships } from 'redux/actions/user';
|
|
import CommentsList from './view';
|
|
|
|
const select = (state, props) => {
|
|
const { uri, threadCommentId, linkedCommentId } = props;
|
|
|
|
const claim = selectClaimForUri(state, uri);
|
|
const activeChannelClaim = selectActiveChannelClaim(state);
|
|
const threadComment = selectCommentForCommentId(state, threadCommentId);
|
|
|
|
return {
|
|
topLevelComments: threadComment ? [threadComment] : selectTopLevelCommentsForUri(state, uri),
|
|
threadComment,
|
|
allCommentIds: selectCommentIdsForUri(state, uri),
|
|
pinnedComments: selectPinnedCommentsForUri(state, uri),
|
|
topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(uri)(state),
|
|
totalComments: selectTotalCommentsCountForUri(state, uri),
|
|
claimId: claim && claim.claim_id,
|
|
channelId: getChannelIdFromClaim(claim),
|
|
claimIsMine: selectClaimIsMine(state, claim),
|
|
isFetchingComments: selectIsFetchingComments(state),
|
|
isFetchingCommentsById: selectIsFetchingCommentsById(state),
|
|
isFetchingReacts: selectIsFetchingReacts(state),
|
|
fetchingChannels: selectFetchingMyChannels(state),
|
|
settingsByChannelId: selectSettingsByChannelId(state),
|
|
myReactsByCommentId: selectMyReacts(state),
|
|
othersReactsById: selectOthersReacts(state),
|
|
activeChannelId: activeChannelClaim && activeChannelClaim.claim_id,
|
|
claimsByUri: selectClaimsByUri(state),
|
|
threadCommentAncestors: selectCommentAncestorsForId(state, threadCommentId),
|
|
linkedCommentAncestors: selectCommentAncestorsForId(state, linkedCommentId),
|
|
};
|
|
};
|
|
|
|
const perform = {
|
|
fetchTopLevelComments: doCommentList,
|
|
fetchComment: doCommentById,
|
|
fetchReacts: doCommentReactList,
|
|
resetComments: doCommentReset,
|
|
doFetchUserMemberships,
|
|
};
|
|
|
|
export default connect(select, perform)(CommentsList);
|