2016-05-28 05:05:27 +08:00
|
|
|
import React from 'react';
|
2018-01-23 14:18:46 +08:00
|
|
|
import { CSSTransitionGroup } from 'react-transition-group';
|
2016-05-28 05:05:27 +08:00
|
|
|
import OnboardingStore from './onboarding-store';
|
|
|
|
import PageTopBar from './page-top-bar';
|
|
|
|
|
|
|
|
import WelcomePage from './page-welcome';
|
|
|
|
import TutorialPage from './page-tutorial';
|
|
|
|
import AuthenticatePage from './page-authenticate';
|
|
|
|
import AccountChoosePage from './page-account-choose';
|
|
|
|
import AccountSettingsPage from './page-account-settings';
|
|
|
|
import AccountSettingsPageGmail from './page-account-settings-gmail';
|
|
|
|
import AccountSettingsPageIMAP from './page-account-settings-imap';
|
2017-01-24 23:34:07 +08:00
|
|
|
import AccountOnboardingSuccess from './page-account-onboarding-success';
|
2016-05-28 05:05:27 +08:00
|
|
|
import InitialPreferencesPage from './page-initial-preferences';
|
2017-12-05 04:04:48 +08:00
|
|
|
import InitialSubscriptionPage from './page-initial-subscription';
|
2016-05-28 05:05:27 +08:00
|
|
|
|
|
|
|
const PageComponents = {
|
2017-09-27 02:33:08 +08:00
|
|
|
welcome: WelcomePage,
|
|
|
|
tutorial: TutorialPage,
|
|
|
|
authenticate: AuthenticatePage,
|
|
|
|
'account-choose': AccountChoosePage,
|
|
|
|
'account-settings': AccountSettingsPage,
|
|
|
|
'account-settings-gmail': AccountSettingsPageGmail,
|
|
|
|
'account-settings-imap': AccountSettingsPageIMAP,
|
|
|
|
'account-onboarding-success': AccountOnboardingSuccess,
|
|
|
|
'initial-preferences': InitialPreferencesPage,
|
2017-12-05 04:04:48 +08:00
|
|
|
'initial-subscription': InitialSubscriptionPage,
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-05-28 05:05:27 +08:00
|
|
|
|
|
|
|
export default class OnboardingRoot extends React.Component {
|
|
|
|
static displayName = 'OnboardingRoot';
|
|
|
|
static containerRequired = false;
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = this._getStateFromStore();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.unsubscribe = OnboardingStore.listen(this._onStateChanged, this);
|
2017-09-27 02:36:58 +08:00
|
|
|
AppEnv.center();
|
|
|
|
AppEnv.displayWindow();
|
2016-05-28 05:05:27 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.unsubscribe) {
|
|
|
|
this.unsubscribe();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_getStateFromStore = () => {
|
|
|
|
return {
|
|
|
|
page: OnboardingStore.page(),
|
|
|
|
pageDepth: OnboardingStore.pageDepth(),
|
2017-09-11 13:45:48 +08:00
|
|
|
account: OnboardingStore.account(),
|
2016-05-28 05:05:27 +08:00
|
|
|
};
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-05-28 05:05:27 +08:00
|
|
|
|
|
|
|
_onStateChanged = () => {
|
|
|
|
this.setState(this._getStateFromStore());
|
2017-09-27 02:33:08 +08:00
|
|
|
};
|
2016-05-28 05:05:27 +08:00
|
|
|
|
|
|
|
render() {
|
|
|
|
const Component = PageComponents[this.state.page];
|
|
|
|
if (!Component) {
|
|
|
|
throw new Error(`Cannot find component for page: ${this.state.page}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="page-frame">
|
2016-06-09 04:47:53 +08:00
|
|
|
<PageTopBar
|
|
|
|
pageDepth={this.state.pageDepth}
|
2016-09-02 02:11:25 +08:00
|
|
|
allowMoveBack={!['initial-preferences', 'account-choose'].includes(this.state.page)}
|
2016-06-09 04:47:53 +08:00
|
|
|
/>
|
2018-01-23 14:18:46 +08:00
|
|
|
<CSSTransitionGroup
|
2016-05-28 05:05:27 +08:00
|
|
|
transitionName="alpha-fade"
|
|
|
|
transitionLeaveTimeout={150}
|
|
|
|
transitionEnterTimeout={150}
|
|
|
|
>
|
|
|
|
<div key={this.state.page} className="page-container">
|
2017-09-11 13:45:48 +08:00
|
|
|
<Component account={this.state.account} />
|
2016-05-28 05:05:27 +08:00
|
|
|
</div>
|
2018-01-23 14:18:46 +08:00
|
|
|
</CSSTransitionGroup>
|
2016-05-28 05:05:27 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|