Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GH-2273, GH-2285, GH-2286: Optimizations to onboarding login & logout UX #689

Merged
merged 8 commits into from Mar 16, 2021
Next

Fix login not propagating to Dawn onboarding

  • Loading branch information
leuryr committed Feb 16, 2021
commit 2c75a312b6f7c86539689bfec3927b3695aef55d
@@ -11,7 +11,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import React from 'react';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { WELCOME } from '../../OnboardingView/OnboardingConstants';
@@ -24,12 +24,32 @@ import { WELCOME } from '../../OnboardingView/OnboardingConstants';
const WelcomeView = (props) => {
const { actions } = props;
const { setSetupStep } = actions;

const [getUserResolved, setGetUserResolved] = useState(false);

const gateSetupStep = (e) => {
if (getUserResolved) {
setSetupStep({ setup_step: WELCOME, origin: WELCOME });
} else {
e.preventDefault();
}
};

useEffect(() => {
actions.getUser();
const timer = setTimeout(() => setGetUserResolved(true), 500);

return () => {
clearTimeout(timer);
};
}, []);

This conversation was marked as resolved by wlycdgr
Comment on lines +27 to +46

This comment has been minimized.

@wlycdgr

wlycdgr Mar 9, 2021
Member

I think this satisfies the mild requirements of the use case fine. I mean, we could wait for actions.getUser() to resolve, but if that fails, we have to let the user through anyway, and either way we don't have any designs or copy for communicating an error to the user in this very unlikely but not particularly terrible scenario.

My only suggestion is, I think we can afford to raise the timeout to a second, given the flow of accessing this page.

This comment has been minimized.

@leuryr

leuryr Mar 11, 2021
Author Contributor

Yea, I agree eventually having some UI/UX feedback to the user for this would be ideal on the off chance that it happens. I've raised the timeout delay for now though 👍

return (
<div className="WelcomeView__container">
<div className="WelcomeView__title">{t('ghostery_dawn_onboarding_welcome')}</div>
<div className="WelcomeView__subtitle">{t('ghostery_dawn_onboarding_welcome_message')}</div>
<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
<NavLink className="WelcomeView__ctaButton" to="/onboarding/1" onClick={() => setSetupStep({ setup_step: WELCOME, origin: WELCOME })}>
<NavLink className="WelcomeView__ctaButton" to={getUserResolved ? '/onboarding/1' : '#'} onClick={gateSetupStep}>
<span>{t('ghostery_dawn_onboarding_lets_do_this')}</span>
</NavLink>
</div>
@@ -14,9 +14,11 @@
import { buildReduxHOC } from '../../../../shared-hub/utils';
import WelcomeView from './WelcomeView';
import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
import { getUser } from '../../../../Account/AccountActions';

const actionCreators = {
setSetupStep,
getUser
};

export default buildReduxHOC([], actionCreators, WelcomeView);
ProTip! Use n and p to navigate between commits in a pull request.