adds requiresAuth bool to button and enables it on selected buttons
This commit is contained in:
parent
edcd2900ca
commit
00262eeb92
9 changed files with 58 additions and 5 deletions
|
@ -30,6 +30,7 @@ export default function BlockButton(props: Props) {
|
||||||
icon={ICONS.BLOCK}
|
icon={ICONS.BLOCK}
|
||||||
button={'alt'}
|
button={'alt'}
|
||||||
label={blockedOverride || blockLabel}
|
label={blockedOverride || blockLabel}
|
||||||
|
requiresAuth={IS_WEB}
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (!channelIsBlocked) {
|
if (!channelIsBlocked) {
|
||||||
|
|
|
@ -1,3 +1,13 @@
|
||||||
import Button from './view';
|
import Button from './view';
|
||||||
|
import React, { forwardRef } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { selectUserVerifiedEmail } from 'lbryinc';
|
||||||
|
|
||||||
export default Button;
|
const mapStateToProps = state => ({
|
||||||
|
pathname: state.router.location.pathname,
|
||||||
|
emailVerified: selectUserVerifiedEmail(state),
|
||||||
|
});
|
||||||
|
|
||||||
|
const ConnectedButton = connect(mapStateToProps)(Button);
|
||||||
|
|
||||||
|
export default forwardRef((props, ref) => <ConnectedButton {...props} myref={ref} />);
|
||||||
|
|
|
@ -6,6 +6,7 @@ import classnames from 'classnames';
|
||||||
import { NavLink } from 'react-router-dom';
|
import { NavLink } from 'react-router-dom';
|
||||||
import { formatLbryUriForWeb } from 'util/uri';
|
import { formatLbryUriForWeb } from 'util/uri';
|
||||||
import { OutboundLink } from 'react-ga';
|
import { OutboundLink } from 'react-ga';
|
||||||
|
import * as PAGES from 'constants/pages';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
id: ?string,
|
id: ?string,
|
||||||
|
@ -30,6 +31,11 @@ type Props = {
|
||||||
onClick: ?(any) => any,
|
onClick: ?(any) => any,
|
||||||
onMouseEnter: ?(any) => any,
|
onMouseEnter: ?(any) => any,
|
||||||
onMouseLeave: ?(any) => any,
|
onMouseLeave: ?(any) => any,
|
||||||
|
pathname: string,
|
||||||
|
emailVerified: boolean,
|
||||||
|
requiresAuth: ?boolean,
|
||||||
|
myref: any,
|
||||||
|
dispatch: any,
|
||||||
};
|
};
|
||||||
|
|
||||||
// use forwardRef to allow consumers to pass refs to the button content if they want to
|
// use forwardRef to allow consumers to pass refs to the button content if they want to
|
||||||
|
@ -55,9 +61,15 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
iconColor,
|
iconColor,
|
||||||
constrict,
|
constrict,
|
||||||
activeClass,
|
activeClass,
|
||||||
|
emailVerified,
|
||||||
|
requiresAuth,
|
||||||
|
myref,
|
||||||
|
dispatch, // <button> doesn't know what to do with dispatch
|
||||||
|
pathname,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const currentPath = pathname.split('/$/')[1];
|
||||||
const combinedClassName = classnames(
|
const combinedClassName = classnames(
|
||||||
'button',
|
'button',
|
||||||
button
|
button
|
||||||
|
@ -103,6 +115,22 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (requiresAuth && !emailVerified) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
ref={ref}
|
||||||
|
exact
|
||||||
|
to={`/$/${PAGES.AUTH}?redirect=${currentPath}`}
|
||||||
|
title={title}
|
||||||
|
disabled={disabled}
|
||||||
|
className={combinedClassName}
|
||||||
|
activeClassName={activeClass}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return path ? (
|
return path ? (
|
||||||
<NavLink
|
<NavLink
|
||||||
ref={ref}
|
ref={ref}
|
||||||
|
|
|
@ -89,6 +89,7 @@ export function CommentCreate(props: Props) {
|
||||||
disabled={channel === CHANNEL_NEW || !commentValue.length}
|
disabled={channel === CHANNEL_NEW || !commentValue.length}
|
||||||
type="submit"
|
type="submit"
|
||||||
label={__('Post')}
|
label={__('Post')}
|
||||||
|
requiresAuth={IS_WEB}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
@ -47,6 +47,7 @@ export default function SubscribeButton(props: Props) {
|
||||||
iconColor="red"
|
iconColor="red"
|
||||||
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
|
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
|
||||||
button={'alt'}
|
button={'alt'}
|
||||||
|
requiresAuth={IS_WEB}
|
||||||
label={unfollowOverride || subscriptionLabel}
|
label={unfollowOverride || subscriptionLabel}
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
|
@ -21,7 +21,7 @@ function DiscoverPage(props: Props) {
|
||||||
hideCustomization={IS_WEB && !email}
|
hideCustomization={IS_WEB && !email}
|
||||||
personalView
|
personalView
|
||||||
tags={followedTags.map(tag => tag.name)}
|
tags={followedTags.map(tag => tag.name)}
|
||||||
meta={<Button button="link" label={__('Customize')} navigate={`/$/${PAGES.FOLLOWING}`} />}
|
meta={<Button button="link" label={__('Customize')} requiresAuth={IS_WEB} navigate={`/$/${PAGES.FOLLOWING}`} />}
|
||||||
/>
|
/>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
|
@ -184,6 +184,7 @@ class FilePage extends React.Component<Props> {
|
||||||
button="alt"
|
button="alt"
|
||||||
icon={icons.TIP}
|
icon={icons.TIP}
|
||||||
label={__('Tip')}
|
label={__('Tip')}
|
||||||
|
requiresAuth={IS_WEB}
|
||||||
title={__('Send a tip to this creator')}
|
title={__('Send a tip to this creator')}
|
||||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
|
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
|
||||||
/>
|
/>
|
||||||
|
@ -193,6 +194,7 @@ class FilePage extends React.Component<Props> {
|
||||||
button="alt"
|
button="alt"
|
||||||
icon={icons.SUPPORT}
|
icon={icons.SUPPORT}
|
||||||
label={__('Support')}
|
label={__('Support')}
|
||||||
|
requiresAuth={IS_WEB}
|
||||||
title={__('Support this claim')}
|
title={__('Support this claim')}
|
||||||
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
|
onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -45,7 +45,7 @@ function TagsPage(props: Props) {
|
||||||
<Page>
|
<Page>
|
||||||
<ClaimListDiscover
|
<ClaimListDiscover
|
||||||
tags={tags}
|
tags={tags}
|
||||||
meta={<Button ref={buttonRef} button="link" onClick={handleFollowClick} label={label} />}
|
meta={<Button ref={buttonRef} button="link" onClick={handleFollowClick} requiresAuth={IS_WEB} label={label} />}
|
||||||
/>
|
/>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
|
@ -803,5 +803,15 @@
|
||||||
"This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.": "This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.",
|
"This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.": "This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.",
|
||||||
"(Only available on the desktop app.)": "(Only available on the desktop app.)",
|
"(Only available on the desktop app.)": "(Only available on the desktop app.)",
|
||||||
"If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.": "If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.",
|
"If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.": "If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.",
|
||||||
"Light": "Light"
|
"Light": "Light",
|
||||||
}
|
"Subscriber": "Subscriber",
|
||||||
|
"This account must undergo review before you can participate in the rewards program.": "This account must undergo review before you can participate in the rewards program.",
|
||||||
|
"This can take anywhere from several minutes to several days.": "This can take anywhere from several minutes to several days.",
|
||||||
|
"We apologize for this inconvenience, but have added this additional step to prevent fraud.": "We apologize for this inconvenience, but have added this additional step to prevent fraud.",
|
||||||
|
"If you continue to see this message, send us an email to help@lbry.com.": "If you continue to see this message, send us an email to help@lbry.com.",
|
||||||
|
"Please enjoy free content in the meantime!": "Please enjoy free content in the meantime!",
|
||||||
|
"Claimed Rewards": "Claimed Rewards",
|
||||||
|
"This feature is not yet available for wallets with balances, but the gerbils are working on it.": "This feature is not yet available for wallets with balances, but the gerbils are working on it.",
|
||||||
|
"I Understand": "I Understand",
|
||||||
|
"No modifier provided after separator %modSeperator%.": "No modifier provided after separator %modSeperator%."
|
||||||
|
}
|
Loading…
Reference in a new issue