lbry-desktop/ui/component/blockButton/view.jsx

50 lines
1.5 KiB
React
Raw Normal View History

// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React, { useRef } from 'react';
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import useHover from 'effects/use-hover';
type Props = {
2019-09-04 06:22:31 +02:00
permanentUrl: ?string,
2019-08-02 17:11:31 +02:00
shortUrl: string,
isSubscribed: boolean,
toggleBlockChannel: (uri: string) => void,
channelIsBlocked: boolean,
claimIsMine: boolean,
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
};
export default function BlockButton(props: Props) {
2019-09-04 06:22:31 +02:00
const { permanentUrl, shortUrl, toggleBlockChannel, channelIsBlocked, claimIsMine, doToast } = props;
const blockRef = useRef();
const isHovering = useHover(blockRef);
const blockLabel = channelIsBlocked ? __('Blocked') : __('Block');
const blockTitlePrefix = channelIsBlocked ? __('Unblock this channel') : __('Block this channel');
const blockedOverride = channelIsBlocked && isHovering && __('Unblock');
2019-09-04 06:22:31 +02:00
return permanentUrl && !claimIsMine ? (
<Button
ref={blockRef}
icon={ICONS.BLOCK}
button={'alt'}
label={blockedOverride || blockLabel}
title={blockTitlePrefix}
requiresAuth={IS_WEB}
2019-09-04 06:22:31 +02:00
onClick={e => {
e.stopPropagation();
if (!channelIsBlocked) {
2020-09-04 05:41:37 +02:00
doToast({
message: __('Blocked %channelUrl%', { channelUrl: shortUrl }),
linkText: __('Manage'),
linkTarget: `/${PAGES.BLOCKED}`,
});
2019-09-04 06:22:31 +02:00
}
toggleBlockChannel(permanentUrl);
}}
/>
) : null;
}