50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import * as PAGES from 'constants/pages';
|
|
import React, { useRef } from 'react';
|
|
import Button from 'component/button';
|
|
import useHover from 'effects/use-hover';
|
|
|
|
type Props = {
|
|
permanentUrl: ?string,
|
|
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) {
|
|
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');
|
|
|
|
return permanentUrl && (!claimIsMine || channelIsBlocked) ? (
|
|
<Button
|
|
ref={blockRef}
|
|
icon={ICONS.BLOCK}
|
|
button={'alt'}
|
|
label={blockedOverride || blockLabel}
|
|
title={blockTitlePrefix}
|
|
requiresAuth={IS_WEB}
|
|
onClick={e => {
|
|
e.stopPropagation();
|
|
if (!channelIsBlocked) {
|
|
doToast({
|
|
message: __('Blocked %channelUrl%', { channelUrl: shortUrl }),
|
|
linkText: __('Manage'),
|
|
linkTarget: `/${PAGES.BLOCKED}`,
|
|
});
|
|
}
|
|
|
|
toggleBlockChannel(permanentUrl);
|
|
}}
|
|
/>
|
|
) : null;
|
|
}
|