src/App.tsx

   1 import { createMemo, createState } from 'solid-js';
   2 import { For } from 'solid-js/dom';
   3 import { TaxReturn, Form } from 'ustaxlib';
   4
   5 import FormView from './FormView';
   6
   7 const S = require('./App.css');
   8
   9 interface AppProps {
  10   tr: TaxReturn;
  11 }
  12
  13 export default function App(props: AppProps) {
  14   const [ state, setState ] = createState({ form: props.tr.forms[0] });
  15
  16   const changeForm = e => {
  17     setState({ form: props.tr.forms[e.target.value] });
  18   };
  19
  20   const formIndexToName = createMemo(() => props.tr.forms.map((form, i) => [i, form.name]));
  21
  22   const formSelector = (
  23     <select onchange={changeForm}>
  24       <For each={formIndexToName()}>
  25         {tuple => (<option value={tuple[0]}>{tuple[1]}</option>)}
  26       </For>
  27     </select>
  28   );
  29
  30   return (
  31     <div class={S.container}>
  32       <div class={S.header}>
  33         <h1>ustaxlib Federal {props.tr.year}</h1>
  34         {formSelector}
  35       </div>
  36
  37       <FormView tr={props.tr} form={state.form as Form<any>} />
  38     </div>
  39   );
  40 }