Split TaxReturnView out of App.

diff --git a/src/App.css b/src/App.css
index 4c1236176b17aafd96d3b3590c2cffd851e324d3..c42f6cd15125efa6847c92891da26ae9ddfdb065 100644 (file)
--- a/src/App.css
+++ b/src/App.css
@@ -6,20 +6,3 @@ body {
   width: 750px;
   margin: 0 auto;
 }
-
-.header {
-  display: flex;
-  align-items: center;
-}
-
-.header h1 {
-  flex: 2;
-  font-size: 24pt;
-  margin: 10px 0;
-  color: #555;
-}
-
-.header select {
-  font-size: 14pt;
-  height: 24pt;
-}

diff --git a/src/App.tsx b/src/App.tsx
index 3aab1650ebc4d457e60b7794d725c214ed0205bb..21aceafa4db9d0df5d6057c459e3f8100c4c4cdb 100644 (file)
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,40 +1,13 @@
-import { createMemo, createState } from 'solid-js';
-import { For } from 'solid-js/dom';
-import { TaxReturn, Form } from 'ustaxlib/core';
+import { TaxReturn } from 'ustaxlib/core';
 
-import FormView from './FormView';
+import TaxReturnView from './TaxReturnView';
 
 const S = require('./App.css');
 
-interface AppProps {
+interface Props {
   tr: TaxReturn;
 }
 
-export default function App(props: AppProps) {
-  const [ state, setState ] = createState({ form: props.tr.forms[0] });
-
-  const changeForm = e => {
-    setState({ form: props.tr.forms[e.target.value] });
-  };
-
-  const formIndexToName = createMemo(() => props.tr.forms.map((form, i) => [i, form.name]));
-
-  const formSelector = (
-    <select onchange={changeForm}>
-      <For each={formIndexToName()}>
-        {tuple => (<option value={tuple[0]}>{tuple[1]}</option>)}
-      </For>
-    </select>
-  );
-
-  return (
-    <div class={S.container}>
-      <div class={S.header}>
-        <h1>ustaxlib Federal {props.tr.year}</h1>
-        {formSelector}
-      </div>
-
-      <FormView tr={props.tr} form={state.form as Form<any>} />
-    </div>
-  );
+export default function App(props: Props) {
+  return (<div class={S.container}><TaxReturnView {...props} /></div>);
 }

diff --git a/src/TaxReturnView.css b/src/TaxReturnView.css
new file mode 100644 (file)
index 0000000..638ca04
--- /dev/null
+++ b/src/TaxReturnView.css
@@ -0,0 +1,16 @@
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.header h1 {
+  flex: 2;
+  font-size: 24pt;
+  margin: 10px 0;
+  color: #555;
+}
+
+.header select {
+  font-size: 14pt;
+  height: 24pt;
+}

diff --git a/src/TaxReturnView.tsx b/src/TaxReturnView.tsx
new file mode 100644 (file)
index 0000000..13f3eb6
--- /dev/null
+++ b/src/TaxReturnView.tsx
@@ -0,0 +1,41 @@
+import { createMemo, createState } from 'solid-js';
+import { For } from 'solid-js/dom';
+import { Form, TaxReturn } from 'ustaxlib/core';
+
+import FormView from './FormView';
+
+const S = require('./TaxReturnView.css');
+
+interface Props {
+  tr: TaxReturn;
+}
+
+export default function TaxReturnView(props: Props) {
+  const [ state, setState ] = createState({ form: props.tr.forms[0] });
+
+  const changeForm = e => {
+    setState({ form: props.tr.forms[e.target.value] });
+  };
+
+  const formIndexToName = createMemo(() => props.tr.forms.map((form, i) => [i, form.name]));
+
+  const formSelector = (
+    <select onchange={changeForm}>
+      <For each={formIndexToName()}>
+        {tuple => (<option value={tuple[0]}>{tuple[1]}</option>)}
+      </For>
+    </select>
+  );
+
+  return (
+    <div>
+      <div class={S.header}>
+        <h1>ustaxlib Federal {props.tr.year}</h1>
+        {formSelector}
+      </div>
+
+      <FormView tr={props.tr} form={state.form as Form<any>} />
+    </div>
+  );
+}
+