lbry-desktop/src/ui/component/userSignIn/view.jsx

136 lines
5.3 KiB
React
Raw Normal View History

2019-08-27 16:43:42 +02:00
// @flow
import React from 'react';
2019-09-26 18:07:11 +02:00
import { withRouter } from 'react-router';
2019-08-27 16:43:42 +02:00
import UserEmailNew from 'component/userEmailNew';
import UserEmailVerify from 'component/userEmailVerify';
2019-09-26 18:07:11 +02:00
import UserFirstChannel from 'component/userFirstChannel';
import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
import { rewards as REWARDS } from 'lbryinc';
import UserVerify from 'component/userVerify';
import Spinner from 'component/spinner';
import YoutubeTransferWelcome from 'component/youtubeTransferWelcome';
import SyncPassword from 'component/syncPassword';
2019-09-27 20:56:15 +02:00
import useFetched from 'effects/use-fetched';
2019-08-27 16:43:42 +02:00
type Props = {
user: ?User,
emailToVerify: ?string,
2019-09-26 18:07:11 +02:00
channels: ?Array<string>,
balance: ?number,
fetchingChannels: boolean,
claimingReward: boolean,
claimReward: () => void,
fetchUser: () => void,
2019-09-26 18:07:11 +02:00
claimedRewards: Array<Reward>,
history: { replace: string => void },
location: { search: string },
youtubeChannels: Array<any>,
2019-09-27 20:56:15 +02:00
syncEnabled: boolean,
hasSynced: boolean,
syncingWallet: boolean,
getSyncError: ?string,
2019-08-27 16:43:42 +02:00
};
2019-09-26 18:07:11 +02:00
function UserSignIn(props: Props) {
const {
emailToVerify,
user,
claimingReward,
claimedRewards,
channels,
claimReward,
balance,
history,
location,
fetchUser,
youtubeChannels,
syncEnabled,
2019-09-27 20:56:15 +02:00
syncingWallet,
getSyncError,
2019-09-27 20:56:15 +02:00
hasSynced,
fetchingChannels,
} = props;
2019-09-26 18:07:11 +02:00
const { search } = location;
const urlParams = new URLSearchParams(search);
const redirect = urlParams.get('redirect');
const hasVerifiedEmail = user && user.has_verified_email;
const rewardsApproved = user && user.is_reward_approved;
const hasFetchedReward = useFetched(claimingReward);
2019-09-26 18:07:11 +02:00
const channelCount = channels ? channels.length : 0;
const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
2019-09-27 20:56:15 +02:00
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
const hasPendingYoutubeTransfer =
hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === 'pending_transfer');
2019-09-26 18:07:11 +02:00
2019-09-27 20:56:15 +02:00
// Complexity warning
// We can't just check if we are currently fetching something
// We may want to keep a component rendered while something is being fetched, instead of replacing it with the large spinner
// The verbose variable names are an attempt to alleviate _some_ of the confusion from handling all edge cases that come from
// reward claiming (plus the balance updating after), channel creation, account syncing, and youtube transfer
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && balance === 0 && !getSyncError;
const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet;
const isWaitingForSomethingToFinish =
// If the user has claimed the email award, we need to wait until the balance updates sometime in the future
!hasFetchedReward || (hasFetchedReward && hasClaimedEmailAward) || (syncEnabled && !hasSynced);
// The possible screens for the sign in flow
const showEmail = !emailToVerify && !hasVerifiedEmail;
const showEmailVerification = emailToVerify && !hasVerifiedEmail;
const showUserVerification = hasVerifiedEmail && !rewardsApproved;
const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
const showChannelCreation =
hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
const showYoutubeTransfer =
hasVerifiedEmail && hasYoutubeChannels && (hasTransferrableYoutubeChannels || hasPendingYoutubeTransfer);
const showLoadingSpinner =
canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
2019-09-26 18:07:11 +02:00
React.useEffect(() => {
fetchUser();
}, [fetchUser]);
2019-09-26 18:07:11 +02:00
2019-09-27 20:56:15 +02:00
React.useEffect(() => {
// Don't claim the reward if sync is enabled until after a sync has been completed successfully
// If we do it before, we could end up trying to sync a wallet with a non-zero balance which will fail to sync
const delayForSync = syncEnabled && !hasSynced;
if (hasVerifiedEmail && !hasClaimedEmailAward && !hasFetchedReward && !delayForSync) {
claimReward();
}
}, [hasVerifiedEmail, claimReward, hasClaimedEmailAward, hasFetchedReward, syncEnabled, hasSynced]);
// Loop through this list from the end, until it finds a matching component
// If it never finds one, assume the user has completed every step and redirect them
const SIGN_IN_FLOW = [
2019-09-27 20:56:15 +02:00
showEmail && <UserEmailNew />,
showEmailVerification && <UserEmailVerify />,
showUserVerification && <UserVerify />,
showSyncPassword && <SyncPassword />,
showChannelCreation && <UserFirstChannel />,
showYoutubeTransfer && <YoutubeTransferWelcome />,
showLoadingSpinner && (
<div className="main--empty">
<Spinner />
</div>
),
];
2019-09-26 18:07:11 +02:00
let componentToRender;
for (var i = SIGN_IN_FLOW.length - 1; i > -1; i--) {
const Component = SIGN_IN_FLOW[i];
if (Component) {
componentToRender = Component;
break;
}
2019-09-26 18:07:11 +02:00
}
if (!componentToRender) {
2019-09-26 18:07:11 +02:00
history.replace(redirect || '/');
2019-08-27 16:43:42 +02:00
}
return <section className="main--contained">{componentToRender}</section>;
2019-08-27 16:43:42 +02:00
}
2019-09-26 18:07:11 +02:00
export default withRouter(UserSignIn);