From 6091dea33600a4f7eaca2b687b1e0b8eac30fe1c Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Sun, 19 Jul 2020 22:56:23 -0400
Subject: [PATCH] Store the current form in the location hash.

This lets you reload the page and stay on the same form.
---
 src/App.tsx           |  2 ++
 src/TaxReturnView.tsx | 22 ++++++++++++++++++++--
 src/main.tsx          | 19 +++++++++++++------
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 027aa18..1cf5cea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,8 @@ const S = require('./App.css');
 
 interface Props {
   tr: TaxReturn;
+  showForm?: string
+  onFormChange?: (formName: string) => void;
 }
 
 export default function App(props: Props) {
diff --git a/src/TaxReturnView.tsx b/src/TaxReturnView.tsx
index ece241c..43c261e 100644
--- a/src/TaxReturnView.tsx
+++ b/src/TaxReturnView.tsx
@@ -3,7 +3,7 @@
 // version 3.0. The full text of the license can be found in LICENSE.txt.
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { createMemo, createState } from 'solid-js';
+import { createEffect, createMemo, createState } from 'solid-js';
 import { For } from 'solid-js/dom';
 import { Form, Person, TaxReturn } from 'ustaxlib/core';
 
@@ -13,6 +13,12 @@ const S = require('./TaxReturnView.css');
 
 interface Props {
   tr: TaxReturn;
+  showForm?: string;
+  onFormChange?: (formName: string) => void;
+}
+
+function hashifyFormName(name: string): string {
+  return '#' + name.replace(/[^\w]+/g, '_');
 }
 
 export default function TaxReturnView(props: Props) {
@@ -20,6 +26,8 @@ export default function TaxReturnView(props: Props) {
 
   const changeForm = e => {
     setState({ form: props.tr.forms[e.target.value] });
+    if (props.onFormChange)
+      props.onFormChange(hashifyFormName(e.target.selectedOptions[0].textContent));
   };
 
   const formIndexToName = createMemo(() => {
@@ -42,10 +50,20 @@ export default function TaxReturnView(props: Props) {
     return forms;
   });
 
+  createEffect(() => {
+    if (props.showForm) {
+      for (let f of formIndexToName()) {
+        if (hashifyFormName(f[1] as string) === props.showForm) {
+          setState({ form: props.tr.forms[f[0]] });
+        }
+      }
+    }
+  });
+
   const formSelector = (
     <select onchange={changeForm}>
       <For each={formIndexToName()}>
-        {tuple => (<option value={tuple[0]}>{tuple[1]}</option>)}
+        {tuple => (<option value={tuple[0]} selected={state.form === props.tr.forms[tuple[0]]}>{tuple[1]}</option>)}
       </For>
     </select>
   );
diff --git a/src/main.tsx b/src/main.tsx
index f6c91f9..89b537e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@
 // version 3.0. The full text of the license can be found in LICENSE.txt.
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { createSignal } from 'solid-js';
+import { createSignal, createState } from 'solid-js';
 import { Show, render } from 'solid-js/dom';
 import { TaxReturn } from 'ustaxlib/core';
 
@@ -12,14 +12,21 @@ import App from './App';
 declare const TAX_RETURN_PATH: string;
 
 function TaxViewerLoader() {
-  const [ state, setState ] = createSignal(undefined as TaxReturn);
+  const [ state, setState ] = createState({
+    // TODO - consider using dynamic import()
+    taxReturn: require(TAX_RETURN_PATH).default,
+    showForm: window.location.hash
+  });
 
-  // TODO - consider using dynamic import()
-  setState(require(TAX_RETURN_PATH).default);
+  const onFormChange = (formName: string) => {
+    window.location.hash = formName;
+  };
+
+  window.onhashchange = () => setState({ showForm: window.location.hash });
 
   return (
-    <Show when={state() !== undefined} fallback={<h1>Loading...</h1>}>
-      <App tr={state()} />
+    <Show when={state.taxReturn !== undefined} fallback={<h1>Loading...</h1>}>
+      <App tr={state.taxReturn} showForm={state.showForm} onFormChange={onFormChange} />
     </Show>
   );
 }
-- 
2.22.5