Refactor fileReactions component
- makeSelectReactionsForUri and selectThemePath were not being used - isLivestreamClaim from redux - Reduce repetition, make single reaction component
This commit is contained in:
Rafael
Thomas Zarebczan
parent
dbeb102dc4
commit
21a5e27cd2
2 changed files with 118 additions and 78 deletions
|
|
@ -1,26 +1,37 @@
|
|||
import { connect } from 'react-redux';
|
||||
import {
|
||||
makeSelectReactionsForUri,
|
||||
makeSelectMyReactionForUri,
|
||||
makeSelectLikeCountForUri,
|
||||
makeSelectDislikeCountForUri,
|
||||
} from 'redux/selectors/reactions';
|
||||
import { doFetchReactions, doReactionLike, doReactionDislike } from 'redux/actions/reactions';
|
||||
import { selectThemePath } from 'redux/selectors/settings';
|
||||
import FileViewCount from './view';
|
||||
import { makeSelectClaimForUri } from 'redux/selectors/claims';
|
||||
import { selectClaimForUri, selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
|
||||
|
||||
const select = (state, props) => ({
|
||||
claim: makeSelectClaimForUri(props.uri)(state),
|
||||
reactions: makeSelectReactionsForUri(props.uri)(state),
|
||||
myReaction: makeSelectMyReactionForUri(props.uri)(state),
|
||||
likeCount: makeSelectLikeCountForUri(props.uri)(state),
|
||||
dislikeCount: makeSelectDislikeCountForUri(props.uri)(state),
|
||||
theme: selectThemePath(state),
|
||||
});
|
||||
const select = (state, props) => {
|
||||
const { uri } = props;
|
||||
|
||||
export default connect(select, {
|
||||
const claim = selectClaimForUri(state, uri);
|
||||
const { claim_id: claimId, signing_channel, value_type } = claim || {};
|
||||
|
||||
const channelName = signing_channel && signing_channel.name;
|
||||
const isCollection = value_type && value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
||||
|
||||
return {
|
||||
myReaction: makeSelectMyReactionForUri(uri)(state),
|
||||
likeCount: makeSelectLikeCountForUri(uri)(state),
|
||||
dislikeCount: makeSelectDislikeCountForUri(uri)(state),
|
||||
isLivestreamClaim: selectIsStreamPlaceholderForUri(state, uri),
|
||||
claimId,
|
||||
channelName,
|
||||
isCollection,
|
||||
};
|
||||
};
|
||||
|
||||
const perform = {
|
||||
doFetchReactions,
|
||||
doReactionLike,
|
||||
doReactionDislike,
|
||||
})(FileViewCount);
|
||||
};
|
||||
|
||||
export default connect(select, perform)(FileViewCount);
|
||||
|
|
|
|||
|
|
@ -6,42 +6,73 @@ import classnames from 'classnames';
|
|||
import Button from 'component/button';
|
||||
import { formatNumberWithCommas } from 'util/number';
|
||||
import NudgeFloating from 'component/nudgeFloating';
|
||||
import { SIMPLE_SITE } from 'config';
|
||||
import Tooltip from 'component/common/tooltip';
|
||||
|
||||
const LIVE_REACTION_FETCH_MS = 1000 * 45;
|
||||
|
||||
type Props = {
|
||||
claim: StreamClaim,
|
||||
doFetchReactions: (string) => void,
|
||||
doReactionLike: (string) => void,
|
||||
doReactionDislike: (string) => void,
|
||||
uri: string,
|
||||
// redux
|
||||
claimId?: string,
|
||||
channelName?: string,
|
||||
isCollection?: boolean,
|
||||
likeCount: number,
|
||||
dislikeCount: number,
|
||||
myReaction: ?string,
|
||||
livestream?: boolean,
|
||||
isLivestreamClaim?: boolean,
|
||||
doFetchReactions: (claimId: ?string) => void,
|
||||
doReactionLike: (uri: string) => void,
|
||||
doReactionDislike: (uri: string) => void,
|
||||
};
|
||||
|
||||
function FileReactions(props: Props) {
|
||||
export default function FileReactions(props: Props) {
|
||||
const {
|
||||
claim,
|
||||
uri,
|
||||
doFetchReactions,
|
||||
doReactionLike,
|
||||
doReactionDislike,
|
||||
claimId,
|
||||
channelName,
|
||||
isCollection,
|
||||
myReaction,
|
||||
likeCount,
|
||||
dislikeCount,
|
||||
livestream,
|
||||
isLivestreamClaim,
|
||||
doFetchReactions,
|
||||
doReactionLike,
|
||||
doReactionDislike,
|
||||
} = props;
|
||||
|
||||
const claimId = claim && claim.claim_id;
|
||||
const channel = claim && claim.signing_channel && claim.signing_channel.name;
|
||||
const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
||||
const likeIcon = SIMPLE_SITE ? (myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE) : ICONS.UPVOTE;
|
||||
const dislikeIcon = SIMPLE_SITE
|
||||
? myReaction === REACTION_TYPES.DISLIKE
|
||||
? ICONS.SLIME_ACTIVE
|
||||
: ICONS.SLIME
|
||||
: ICONS.DOWNVOTE;
|
||||
const likeIcon = myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE;
|
||||
const dislikeIcon = myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME;
|
||||
|
||||
const likeLabel = (
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.LIKE && (
|
||||
<>
|
||||
<div className="button__fire-glow" />
|
||||
<div className="button__fire-particle1" />
|
||||
<div className="button__fire-particle2" />
|
||||
<div className="button__fire-particle3" />
|
||||
<div className="button__fire-particle4" />
|
||||
<div className="button__fire-particle5" />
|
||||
<div className="button__fire-particle6" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(likeCount, 0)}
|
||||
</>
|
||||
);
|
||||
|
||||
const dislikeLabel = (
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.DISLIKE && (
|
||||
<>
|
||||
<div className="button__slime-stain" />
|
||||
<div className="button__slime-drop1" />
|
||||
<div className="button__slime-drop2" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(dislikeCount, 0)}
|
||||
</>
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
function fetchReactions() {
|
||||
doFetchReactions(claimId);
|
||||
|
|
@ -51,8 +82,8 @@ function FileReactions(props: Props) {
|
|||
if (claimId) {
|
||||
fetchReactions();
|
||||
|
||||
if (livestream) {
|
||||
fetchInterval = setInterval(fetchReactions, 45000);
|
||||
if (isLivestreamClaim) {
|
||||
fetchInterval = setInterval(fetchReactions, LIVE_REACTION_FETCH_MS);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,65 +92,63 @@ function FileReactions(props: Props) {
|
|||
clearInterval(fetchInterval);
|
||||
}
|
||||
};
|
||||
}, [claimId, doFetchReactions, livestream]);
|
||||
}, [claimId, doFetchReactions, isLivestreamClaim]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{channel && !isCollection && (
|
||||
{channelName && !isCollection && (
|
||||
<NudgeFloating
|
||||
name="nudge:support-acknowledge"
|
||||
text={__('Let %channel% know you enjoyed this!', { channel })}
|
||||
text={__('Let %channel% know you enjoyed this!', { channel: channelName })}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
<FileReaction
|
||||
title={__('I like this')}
|
||||
requiresAuth={IS_WEB}
|
||||
authSrc="filereaction_like"
|
||||
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
||||
label={
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && (
|
||||
<>
|
||||
<div className="button__fire-glow" />
|
||||
<div className="button__fire-particle1" />
|
||||
<div className="button__fire-particle2" />
|
||||
<div className="button__fire-particle3" />
|
||||
<div className="button__fire-particle4" />
|
||||
<div className="button__fire-particle5" />
|
||||
<div className="button__fire-particle6" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(likeCount, 0)}
|
||||
</>
|
||||
}
|
||||
iconSize={18}
|
||||
label={likeLabel}
|
||||
icon={likeIcon}
|
||||
isActive={myReaction === REACTION_TYPES.LIKE}
|
||||
activeClassName="button--fire"
|
||||
onClick={() => doReactionLike(uri)}
|
||||
/>
|
||||
<Button
|
||||
requiresAuth={IS_WEB}
|
||||
authSrc={'filereaction_dislike'}
|
||||
|
||||
<FileReaction
|
||||
title={__('I dislike this')}
|
||||
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
||||
label={
|
||||
<>
|
||||
{myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && (
|
||||
<>
|
||||
<div className="button__slime-stain" />
|
||||
<div className="button__slime-drop1" />
|
||||
<div className="button__slime-drop2" />
|
||||
</>
|
||||
)}
|
||||
{formatNumberWithCommas(dislikeCount, 0)}
|
||||
</>
|
||||
}
|
||||
iconSize={18}
|
||||
label={dislikeLabel}
|
||||
icon={dislikeIcon}
|
||||
isActive={myReaction === REACTION_TYPES.DISLIKE}
|
||||
activeClassName="button--slime"
|
||||
onClick={() => doReactionDislike(uri)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FileReactions;
|
||||
type ReactionProps = {
|
||||
title: string,
|
||||
label: any,
|
||||
icon: string,
|
||||
isActive: boolean,
|
||||
activeClassName: string,
|
||||
onClick: () => void,
|
||||
};
|
||||
|
||||
const FileReaction = (reactionProps: ReactionProps) => {
|
||||
const { title, label, icon, isActive, activeClassName, onClick } = reactionProps;
|
||||
|
||||
return (
|
||||
<Tooltip title={title} arrow={false}>
|
||||
<div style={{ margin: '0' }}>
|
||||
<Button
|
||||
requiresAuth
|
||||
authSrc="filereaction_like"
|
||||
className={classnames('button--file-action', { [activeClassName]: isActive })}
|
||||
label={label}
|
||||
iconSize={18}
|
||||
icon={icon}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue