Store the current form in the location hash.

This lets you reload the page and stay on the same form.

diff --git a/src/App.tsx b/src/App.tsx
index 027aa18ae1e813b3a366eb043ee05dd25a09748c..1cf5ceaa816270ab6e4cfdf77bd426215d7e40f2 100644 (file)
--- 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 ece241cfee03ae1b57c00d273fbb374368f2b3ba..43c261e23b98062b1c9926b8e0f62c48898fb161 100644 (file)
--- 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 f6c91f9f4b9473c4c2653a21216d37d21c126a78..89b537ee4ed9fcff201a532ff0312f69cbf4fb20 100644 (file)
--- 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>
   );
 }