connect options form with options hook

src/PhonoChangeApplier.js

@@ -12,13 +12,14 @@ const PhonoChangeApplier = () => {
       { phoneme: [ 'feature' ] } 
   );
   const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[- feature]/_#']}]);
+  const [ options, setOptions ] = useState({output: 'default', save: false})
 
   return (
     <div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
       <Epochs epochs={epochs} setEpochs={setEpochs}/>
-      <Options />
+      <Options options={options} setOptions={setOptions}/>
     </div>
   );
 }

src/components/Options.js

@@ -2,37 +2,54 @@ import React from 'react';
 import './Options.scss';
 
 const Options = props => {
+  const handleRadioChange = e => {
+    props.setOptions({...props.options, [e.target.name]: e.target.id})
+  }
+
+  const handleCheckChange = e => {
+    props.setOptions({...props.options, [e.target.name]: e.target.checked})
+  }
+
   return (
     <div className="Options" data-testid="Options">
       <h3>Modeling Options</h3>
-      <form onSubmit={()=>{}}>
+      <form onSubmit={()=>{}} data-testid="Options-form">
         
         {/* <h5>Output</h5> */}
 
         <input 
-          type="radio" name="output" id="output-default" defaultChecked
-        />
-        <label htmlFor="output-default">Default 
+          type="radio" name="output" id="default" 
+          checked={props.options ? props.options.output === 'default' : true}
+          onChange={e=>handleRadioChange(e)}
+          />
+        <label htmlFor="default">Default 
           <span className="Options__output-example"> output</span>
         </label>
         
         <input 
-          type="radio" name="output" id="output-proto" 
-        />
-        <label htmlFor="output-proto">Proto 
+          type="radio" name="output" id="proto" 
+          checked={props.options ? props.options.output === 'proto' : false}
+          onChange={e=>handleRadioChange(e)}
+          />
+        <label htmlFor="proto">Proto 
           <span className="Options__output-example"> output [proto]</span>
         </label>
         
         <input 
-          type="radio" name="output" id="output-diachronic" 
-        /><label htmlFor="output-diachronic">Diachronic 
-            <span className="Options__output-example"> *proto > *epoch > output</span>
-          </label>
+          type="radio" name="output" id="diachronic" 
+          checked={props.options ? props.options.output === 'diachronic' : false}
+          onChange={e=>handleRadioChange(e)}
+        />
+        <label htmlFor="diachronic">Diachronic 
+          <span className="Options__output-example"> *proto > *epoch > output</span>
+        </label>
         
         <input 
-          type="checkbox" name="save" 
+          type="checkbox" name="save"
+          checked={props.options ? props.options.save : false}
+          onChange={e=>handleCheckChange(e)}
         />
-          <label htmlFor="save">Store session on Run</label>
+        <label htmlFor="save">Store session on Run</label>
         
         <input type="submit"></input>
       </form>

src/components/Options.test.js

@@ -19,4 +19,9 @@ describe('Options', () => {
     expect(getByTestId('Options')).toHaveTextContent('Modeling Options');
   });
 
+  it('renders form options from props', () => {
+    let options = {output: 'proto', save: true}
+    const { getByTestId } = render(<Options options={options} />)
+    expect(getByTestId('Options-form')).toHaveFormValues(options);
+  })
 });