pwa history localStorage upgrade

src/ts/app/PokemonApp.tsx

@@ -62,7 +62,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
             dispatch(ActionsPokemonExplorer.setActiveLeague(activeLeague));
         }
 
-        if (typeof cookies === 'undefined' || !cookies.get('welcomed')) {
+        if (pokemonId === null || pokemonForm === null || typeof cookies === 'undefined' || !cookies.get('welcomed')) {
             if (typeof cookies !== 'undefined') {
                 cookies.set('welcomed', 1);
             }
@@ -176,6 +176,14 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
 
     private readonly handleCloseWelcomeDialog = () => {
         this.props.dispatch(ActionsPokemonApp.setWelcomeShown(false));
+
+        const matchParams = this.props.match.params;
+        const activePokemonId = convertIdParamToPokemonId(matchParams.id);
+        const activePokemonForm = convertFormParamToPokemonForm(matchParams.form);
+        if (activePokemonId === null || activePokemonForm === null) {
+            // this.handleActivatePokemon(1, 0); // set active pokemon to bulbasaur
+            this.props.history.replace('/explorer/1/0');
+        }
     }
 
     private readonly handleInterruption = (isInterruption : boolean, navigation : Navigation) => {

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -157,11 +157,11 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
                                 </Media>
                             }
                         </div>
-                        { isOverlayShown &&
-                            <div className={ overLayCss } onClick={ this.handleOverlayClick } />
-                        }
                     </React.Fragment>
                 }
+                { isOverlayShown &&
+                    <div className={ overLayCss } onClick={ this.handleOverlayClick } />
+                }
             </div>
         );
     }

src/ts/app/index.tsx

@@ -39,6 +39,16 @@ const store = Redux.createStore(
 
 const historyRouter = new HistoryRouter(store.dispatch);
 
+const redirectToLastPokemon = () => {
+    const lastPokemon = historyRouter.getLastPokemon();
+
+    if (lastPokemon !== null) {
+        return <Redirect to={ `/explorer/${ lastPokemon.pokemonId }/${ lastPokemon.pokemonForm }` } />;
+    } else {
+        return <ConnectedPokemonApp />;
+    }
+};
+
 ReactDOM.render(
     <CookiesProvider>
         <Provider store={ store }>
@@ -48,7 +58,11 @@ ReactDOM.render(
                         <ConnectedPokemonApp />
                     </Route>
 
-                    <Redirect from="/" to="/explorer/1/0" />
+                    <Route path="/">
+                        { redirectToLastPokemon() }
+                    </Route>
+
+                    <Redirect to="/explorer/1/0" />
                 </Switch>
             </Router>
         </Provider>

src/ts/app/models/HistoryRouter.ts

@@ -32,10 +32,17 @@ export class HistoryRouter {
             PokemonExplorer: pathToRegexp(HistoryRouter.routePaths.PokemonExplorer),
         };
         this.browserHistory = createBrowserHistory();
+
+        const currentExplorerResult = this.pathRegexps.PokemonExplorer.exec(location.pathname);
+        if (currentExplorerResult !== null) {
+            this.storeNavigation(currentExplorerResult);
+        }
+
         this.unregisterCallback = this.browserHistory.listen((location, action) => {
-            if (action === 'POP') {
+            const explorerResult = this.pathRegexps.PokemonExplorer.exec(location.pathname);
-                const explorerResult = this.pathRegexps.PokemonExplorer.exec(location.pathname);
+            if (explorerResult !== null) {
-                if (explorerResult !== null) {
+                this.storeNavigation(explorerResult);
+                if (action === 'POP' || action === 'REPLACE') {
                     this.routePokemonApp(explorerResult);
                 }
             }
@@ -54,9 +61,57 @@ export class HistoryRouter {
         return HistoryRouter.routePaths[key];
     }
 
-    private async routePokemonApp(routeResult : Array<string>) {
+    public getLastPokemon() {
+        const pokemonId = window.localStorage.getItem('pokemonId');
+        const pokemonForm = window.localStorage.getItem('pokemonForm');
+
+        if (pokemonId !== null && pokemonForm !== null) {
+            return {
+                pokemonId,
+                pokemonForm
+            };
+        }
+
+        return null;
+    }
+
+    private parseExploreResult(routeResult : Array<string>) {
         const pokemonId = convertIdParamToPokemonId(routeResult[1]);
         const pokemonForm = convertFormParamToPokemonForm(routeResult[2]);
+        const activeLeague = convertLeagueParamToLeague(routeResult[3]);
+
+        return {
+            pokemonId,
+            pokemonForm,
+            activeLeague
+        };
+    }
+
+    private storeNavigation(routeResult : Array<string>) {
+        const {
+            pokemonId,
+            pokemonForm,
+            activeLeague
+        } = this.parseExploreResult(routeResult);
+
+        if (pokemonId !== null) {
+            window.localStorage.setItem('pokemonId', pokemonId.toString());
+        }
+        if (pokemonForm !== null) {
+            window.localStorage.setItem('pokemonForm', pokemonForm.toString());
+        }
+        if (activeLeague !== null) {
+            window.localStorage.setItem('activeLeague', activeLeague.toString());
+        }
+    }
+
+    private async routePokemonApp(routeResult : Array<string>) {
+        const {
+            pokemonId,
+            pokemonForm,
+            activeLeague
+        } = this.parseExploreResult(routeResult);
+
         if (pokemonId !== null && pokemonForm !== null) {
             this.dispatch(ActionsPokemonExplorer.setIsLoading(true));
             try {
@@ -71,7 +126,6 @@ export class HistoryRouter {
         }
 
         // TODO: this doesn't do anything, league isn't even in the route
-        const activeLeague = convertLeagueParamToLeague(routeResult[3]);
         if (activeLeague !== null) {
             this.dispatch(ActionsPokemonExplorer.setActiveLeague(activeLeague));
         }