lbry-desktop/ui/component/fileReactions/view.jsx
2021-01-22 11:46:27 -05:00

64 lines
1.8 KiB
JavaScript

// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
import Button from 'component/button';
import { formatNumberWithCommas } from 'util/number';
import NudgeFloating from 'component/nudgeFloating';
type Props = {
claim: StreamClaim,
doFetchReactions: string => void,
doReactionLike: string => void,
doReactionDislike: string => void,
uri: string,
likeCount: number,
dislikeCount: number,
myReaction: ?string,
};
function FileReactions(props: Props) {
const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
const claimId = claim && claim.claim_id;
const channel = claim && claim.signing_channel && claim.signing_channel.name;
React.useEffect(() => {
if (claimId) {
doFetchReactions(claimId);
}
}, [claimId, doFetchReactions]);
return (
<>
{channel && (
<NudgeFloating
name="nudge:support-acknowledge"
text={__('Let %channel% know you enjoyed this!', { channel })}
/>
)}
<Button
title={__('I like this')}
requiresAuth={IS_WEB}
authSrc="filereaction_like"
className={classnames('button--file-action')}
label={formatNumberWithCommas(likeCount, 0)}
iconSize={18}
icon={ICONS.UPVOTE}
onClick={() => doReactionLike(uri)}
/>
<Button
requiresAuth={IS_WEB}
authSrc={'filereaction_dislike'}
title={__('I dislike this')}
className={classnames('button--file-action')}
label={formatNumberWithCommas(dislikeCount, 0)}
iconSize={18}
icon={ICONS.DOWNVOTE}
onClick={() => doReactionDislike(uri)}
/>
</>
);
}
export default FileReactions;