From e575323c6013b89873b698a7f34da135a4b2c51f Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 25 May 2018 11:36:07 -0700 Subject: Auto-show onboarding flow on first page view --- .../ts/components/onboarding/portal_onboarding_flow.tsx | 17 +++++++++++++++-- .../website/ts/containers/portal_onboarding_flow.ts | 8 +++++--- packages/website/ts/index.tsx | 16 +++++++++++++++- packages/website/ts/local_storage/local_storage.ts | 14 ++++++++++++++ packages/website/ts/redux/reducer.ts | 5 ++++- 5 files changed, 53 insertions(+), 7 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index c80d1dd6e..ab9d58415 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -14,7 +14,8 @@ export interface PortalOnboardingFlowProps { providerType: ProviderType; injectedProviderName: string; blockchainIsLoaded: boolean; - onClose: () => void; + hasBeenSeen: boolean; + setIsRunning: (isRunning: boolean) => void; setOnboardingStep: (stepIndex: number) => void; } @@ -42,6 +43,12 @@ const steps: Step[] = [ ]; export class PortalOnboardingFlow extends React.Component { + public componentDidMount(): void { + this._autoStartOnboardingIfShould(); + } + public componentDidUpdate(): void { + this._autoStartOnboardingIfShould(); + } public render(): React.ReactNode { return ( ); @@ -73,4 +80,10 @@ export class PortalOnboardingFlow extends React.Component void; + setIsRunning: (isRunning: boolean) => void; setOnboardingStep: (stepIndex: number) => void; } @@ -29,13 +30,14 @@ const mapStateToProps = (state: State): ConnectedState => ({ providerType: state.providerType, injectedProviderName: state.injectedProviderName, blockchainIsLoaded: state.blockchainIsLoaded, + hasBeenSeen: state.hasPortalOnboardingBeenSeen, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ - onClose: (): void => { + setIsRunning: (isRunning: boolean): void => { dispatch({ type: ActionTypes.UpdatePortalOnboardingShowing, - data: false, + data: isRunning, }); }, setOnboardingStep: (stepIndex: number): void => { diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 4fe81a91e..5ab03c07c 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -1,4 +1,5 @@ // Polyfills +import * as _ from 'lodash'; import { MuiThemeProvider } from 'material-ui/styles'; import * as React from 'react'; import { render } from 'react-dom'; @@ -14,6 +15,7 @@ import { Landing } from 'ts/containers/landing'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; import { createLazyComponent } from 'ts/lazy_component'; +import { stateStorage } from 'ts/local_storage/state_storage'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage'; import { reducer, State } from 'ts/redux/reducer'; @@ -75,7 +77,19 @@ const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async ( analytics.init(); // tslint:disable-next-line:no-floating-promises analytics.logProviderAsync((window as any).web3); -const store: ReduxStore = createStore(reducer, devToolsEnhancer({ name: '0x Website Redux Store' })); +const store: ReduxStore = createStore( + reducer, + stateStorage.getPersistedDefaultState(), + devToolsEnhancer({ name: '0x Website Redux Store' }), +); +store.subscribe( + _.throttle(() => { + stateStorage.saveState({ + hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen, + }); + }, 1000), +); + render(
diff --git a/packages/website/ts/local_storage/local_storage.ts b/packages/website/ts/local_storage/local_storage.ts index 20a533a91..569e262fc 100644 --- a/packages/website/ts/local_storage/local_storage.ts +++ b/packages/website/ts/local_storage/local_storage.ts @@ -26,6 +26,20 @@ export const localStorage = { } window.localStorage.removeItem(key); }, + getObject(key: string): object { + const item = localStorage.getItemIfExists(key); + if (item) { + try { + return JSON.parse(item); + } catch (err) { + return undefined; + } + } + return undefined; + }, + setObject(key: string, value: object): void { + localStorage.setItem(key, JSON.stringify(value)); + }, getAllKeys(): string[] { if (!this.doesExist) { return []; diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index e61345c87..5c57792f7 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -42,6 +42,7 @@ export interface State { userEtherBalanceInWei: BigNumber; portalOnboardingStep: number; isPortalOnboardingShowing: boolean; + hasPortalOnboardingBeenSeen: boolean; // Note: cache of supplied orderJSON in fill order step. Do not use for anything else. userSuppliedOrderCache: Order; @@ -56,7 +57,7 @@ export interface State { translate: Translate; } -const INITIAL_STATE: State = { +export const INITIAL_STATE: State = { // Portal blockchainErr: BlockchainErrs.NoError, blockchainIsLoaded: false, @@ -84,6 +85,7 @@ const INITIAL_STATE: State = { userSuppliedOrderCache: undefined, portalOnboardingStep: 0, isPortalOnboardingShowing: false, + hasPortalOnboardingBeenSeen: false, // Docs docsVersion: DEFAULT_DOCS_VERSION, availableDocVersions: [DEFAULT_DOCS_VERSION], @@ -309,6 +311,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { return { ...state, isPortalOnboardingShowing, + hasPortalOnboardingBeenSeen: true, }; } -- cgit v1.2.3