From 655ddb7d2510464047f58a24fd01092a877b2648 Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Tue, 10 Mar 2020 22:09:03 -0400
Subject: [PATCH] Split TaxReturnView out of App.

---
 src/App.css           | 17 -----------------
 src/App.tsx           | 37 +++++--------------------------------
 src/TaxReturnView.css | 16 ++++++++++++++++
 src/TaxReturnView.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 62 insertions(+), 49 deletions(-)
 create mode 100644 src/TaxReturnView.css
 create mode 100644 src/TaxReturnView.tsx

diff --git a/src/App.css b/src/App.css
index 4c12361..c42f6cd 100644
--- 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 3aab165..21aceaf 100644
--- 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
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
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>
+  );
+}
+
-- 
2.22.5