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

106 lines
3.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as ICONS from 'constants/icons';
import React, { useRef } from 'react';
2018-11-21 22:20:55 +01:00
import { parseURI } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import useHover from 'effects/use-hover';
2020-08-10 22:47:39 +02:00
import { useIsMobile } from 'effects/use-screensize';
2018-03-26 23:32:43 +02:00
type SubscriptionArgs = {
2018-03-26 23:32:43 +02:00
channelName: string,
uri: string,
2020-11-02 17:51:08 +01:00
notificationsDisabled?: boolean,
2018-03-26 23:32:43 +02:00
};
type Props = {
2019-09-04 06:22:31 +02:00
permanentUrl: ?string,
2018-10-19 22:38:07 +02:00
isSubscribed: boolean,
2020-11-02 17:51:08 +01:00
doChannelSubscribe: SubscriptionArgs => void,
doChannelUnsubscribe: SubscriptionArgs => void,
2018-11-21 22:20:55 +01:00
showSnackBarOnSubscribe: boolean,
doToast: ({ message: string }) => void,
shrinkOnMobile: boolean,
2020-11-02 17:51:08 +01:00
notificationsDisabled: boolean,
user: ?User,
2018-03-26 23:32:43 +02:00
};
2019-06-11 20:10:58 +02:00
export default function SubscribeButton(props: Props) {
2018-03-26 23:32:43 +02:00
const {
2019-09-04 06:22:31 +02:00
permanentUrl,
2018-03-26 23:32:43 +02:00
doChannelSubscribe,
doChannelUnsubscribe,
2018-10-19 22:38:07 +02:00
isSubscribed,
2018-11-21 22:20:55 +01:00
showSnackBarOnSubscribe,
doToast,
shrinkOnMobile = false,
2020-11-02 17:51:08 +01:00
notificationsDisabled,
user,
2018-03-26 23:32:43 +02:00
} = props;
2019-06-28 09:33:07 +02:00
const buttonRef = useRef();
const isMobile = useIsMobile();
let isHovering = useHover(buttonRef);
isHovering = isMobile ? true : isHovering;
const uiNotificationsEnabled = user && user.experimental_ui;
2019-09-04 06:22:31 +02:00
const { channelName } = parseURI(permanentUrl);
const claimName = '@' + channelName;
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed
? __('Following --[button label indicating a channel has been followed]--')
: __('Follow');
2019-06-28 09:33:07 +02:00
const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
const titlePrefix = isSubscribed ? __('Unfollow this channel') : __('Follow this channel');
2019-09-04 06:22:31 +02:00
return permanentUrl ? (
2020-11-02 17:51:08 +01:00
<div className="button-group">
<Button
ref={buttonRef}
iconColor="red"
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
button={'alt'}
requiresAuth={IS_WEB}
label={label}
title={titlePrefix}
onClick={e => {
e.stopPropagation();
2020-11-02 17:51:08 +01:00
subscriptionHandler({
channelName: claimName,
uri: permanentUrl,
notificationsDisabled: true,
});
2018-11-21 22:20:55 +01:00
2020-11-02 17:51:08 +01:00
if (showSnackBarOnSubscribe) {
doToast({ message: __('Now following %channel%!', { channel: claimName }) });
}
}}
/>
{isSubscribed && uiNotificationsEnabled && (
2020-11-02 17:51:08 +01:00
<Button
button="alt"
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
2020-11-02 17:51:08 +01:00
onClick={() => {
const newNotificationsDisabled = !notificationsDisabled;
doChannelSubscribe({
channelName: claimName,
uri: permanentUrl,
notificationsDisabled: newNotificationsDisabled,
});
if (newNotificationsDisabled === false) {
doToast({ message: __('Notifications turned on for %channel%!', { channel: claimName }) });
2020-11-02 17:51:08 +01:00
}
}}
/>
)}
</div>
2019-09-04 06:22:31 +02:00
) : null;
2019-06-11 20:10:58 +02:00
}