From 953c403f3b3dc16ea3e742bcb81ddee49fc4c239 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Wed, 26 Feb 2020 16:16:52 -0800
Subject: [PATCH] style features and options components

---
 src/PhonoChangeApplier.scss        |  4 ++-
 src/components/Epochs.js           | 31 +++++++++++++++------
 src/components/Features.js         | 44 ++++++++++++++++++++----------
 src/components/Features.scss       | 27 ++++++++++++++++++
 src/components/Options.js          | 23 ++--------------
 src/components/Options.scss        |  8 ++++++
 src/components/SoundChangeSuite.js |  4 +--
 src/reducers/reducer.results.js    |  1 +
 8 files changed, 95 insertions(+), 47 deletions(-)

diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss
index 435a091..677e259 100644
--- a/src/PhonoChangeApplier.scss
+++ b/src/PhonoChangeApplier.scss
@@ -21,7 +21,9 @@ div.App {
     grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
     
     div {
-      padding: 1em;
+      width: 100%;
+      max-height: 85vh;
+      margin: 1em;
       overflow-y: scroll;
     }
   }
diff --git a/src/components/Epochs.js b/src/components/Epochs.js
index b779d91..b711cfb 100644
--- a/src/components/Epochs.js
+++ b/src/components/Epochs.js
@@ -36,23 +36,36 @@ const Epochs = ({epochs, dispatch}) => {
       value: dispatchValue
     })
   }
+  
+  const renderAddEpochButton = index => {
+    if (index === epochs.length - 1 ) return (
+      <form onSubmit={e=>addEpoch(e)}>
+        <input type="submit" name="add-epoch" value="Add Epoch" ></input>
+      </form>
+    )
+    return <></>
+  }
 
   const renderEpochs = () => {
     if (epochs) return epochs.map((epoch, index) => (
-    <SoundChangeSuite 
-      key={`epoch-${index}`} epochIndex={index} epoch={epoch} 
-      updateEpoch={updateEpoch} removeEpoch={removeEpoch}
-      // error={errors[epoch.name]}
-    />
-  ));
+      <div 
+        className="SoundChangeSuite" 
+        data-testid={`${epoch.name}_SoundChangeSuite`}
+        key={`epoch-${index}`}
+      >
+        <SoundChangeSuite 
+          epochIndex={index} epoch={epoch} 
+          updateEpoch={updateEpoch} removeEpoch={removeEpoch}
+          // error={errors[epoch.name]}
+        />
+        {renderAddEpochButton(index)}
+      </div>
+    ));
   }
 
   return (
     <>
       { renderEpochs() }
-      <form onSubmit={e=>addEpoch(e)}>
-        <input type="submit" name="add-epoch" value="Add Epoch" ></input>
-      </form>
     </>
   );
 }
diff --git a/src/components/Features.js b/src/components/Features.js
index e136ea6..e1135b0 100644
--- a/src/components/Features.js
+++ b/src/components/Features.js
@@ -21,8 +21,22 @@ const parsePhonesFromFeatureObject = featureObject => {
       const { plus, minus } = feature[featureName];
       return (
         <li key={`feature__${featureName}`}>
-          <span className="plus-phones">{`[+ ${featureName}] = ${plus}`}</span>
-          <span className="minus-phones">{`[- ${featureName}] = ${minus}`}</span>
+          <span className="feature--names-and-phones">
+            <span className="feature--feature-name"> 
+              {`[+ ${featureName}]`}
+            </span>
+            <span className="feature--feature-phones">
+              {plus}
+            </span>
+          </span>
+          <span className="feature--names-and-phones">
+            <span className="feature--feature-name"> 
+              {`[- ${featureName}]`}
+            </span>
+            <span className="feature--feature-phones">
+              {minus}
+            </span>
+          </span>
         </li>
       )
     })
@@ -82,20 +96,22 @@ const Features = ({ phones, features, dispatch }) => {
           ></input>
 
         {/* ! Positive Phones */}
-        <label htmlFor="positive-phones">+</label>
-        <input 
-          id="positive-phones"
-          type="text" name="phonemes" 
-          value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
-        ></input>
+        <label htmlFor="positive-phones">+
+          <input 
+            id="positive-phones"
+            type="text" name="phonemes" 
+            value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
+          ></input>
+        </label>
         
         {/* ! Negative Phones */}
-        <label htmlFor="negative-phones">-</label>
-        <input 
-          id="negative-phones"
-          type="text" name="phonemes" 
-          value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
-        ></input>
+        <label htmlFor="negative-phones">-
+          <input 
+            id="negative-phones"
+            type="text" name="phonemes" 
+            value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
+          ></input>
+        </label>
 
         <input 
           type="submit" 
diff --git a/src/components/Features.scss b/src/components/Features.scss
index e69de29..beb3fcf 100644
--- a/src/components/Features.scss
+++ b/src/components/Features.scss
@@ -0,0 +1,27 @@
+div.Features {
+  max-width: 85%;
+
+  ul.Features__list li {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    span.feature--names-and-phones {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    }
+
+    span.feature-name {
+      font-weight: 600;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-flow: column;
+
+    input {
+      margin: 0.1em;
+      font-size: 1em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Options.js b/src/components/Options.js
index 2d7c059..f4ef7bc 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -6,7 +6,7 @@ const Options = ({ options, dispatch }) => {
   const [ load, setLoad ] = useState('');
 
   const handleRadioChange = e => {
-    const { name, id } = e.target.name;
+    const { name, id } = e.target;
     dispatch({
       type: 'SET_OPTIONS',
       value: {
@@ -16,18 +16,6 @@ const Options = ({ options, dispatch }) => {
     });
   }
   
-  const handleCheckChange = e => {
-    const option = e.target.name;
-    const setValue = e.target.checked ? 'true' : 'false';
-    dispatch({
-      type: 'SET_OPTIONS',
-      value: {
-        option,
-        setValue
-      }
-    });
-  }
-
   const handleFormSubmit = (e, options) => {
     e.preventDefault();
     dispatch({
@@ -48,7 +36,7 @@ const Options = ({ options, dispatch }) => {
           type="radio" name="output" id="default" 
           checked={options ? options.output === 'default' : true}
           onChange={e=>handleRadioChange(e)}
-          />
+        />
         <label htmlFor="default">Default 
           <span className="Options__output-example"> output</span>
         </label>
@@ -71,13 +59,6 @@ const Options = ({ options, dispatch }) => {
           <span className="Options__output-example"> *proto > *epoch > output</span>
         </label>
         
-        <input 
-          type="checkbox" name="save"
-          checked={options ? options.save : false}
-          onChange={e=>handleCheckChange(e)}
-        />
-        <label htmlFor="save">Store session on Run</label>
-        
         <input type="submit" value="Run Changes"></input>
       </form>
 
diff --git a/src/components/Options.scss b/src/components/Options.scss
index e69de29..3fc726f 100644
--- a/src/components/Options.scss
+++ b/src/components/Options.scss
@@ -0,0 +1,8 @@
+div.Options {
+
+  form {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js
index eb0b6e5..e2ec606 100644
--- a/src/components/SoundChangeSuite.js
+++ b/src/components/SoundChangeSuite.js
@@ -14,7 +14,7 @@ const SoundChangeSuite = props => {
   }, [epoch])
 
   return (
-    <div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
+    <>
       <h4>{epoch.name}</h4>
       <form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
         
@@ -46,7 +46,7 @@ const SoundChangeSuite = props => {
       <form onSubmit={e=>props.removeEpoch(e, epoch.name)}>
         <input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
       </form>
-    </div>
+    </>
   );
 }
 
diff --git a/src/reducers/reducer.results.js b/src/reducers/reducer.results.js
index c8d4801..0cb6676 100644
--- a/src/reducers/reducer.results.js
+++ b/src/reducers/reducer.results.js
@@ -276,6 +276,7 @@ export const run = (state: stateType, action: resultsAction): stateType => {
     }, []);
     
     const results = passResults.map(stringifyResults);
+    console.log(results)
     return {...state, results }
   } catch (err) {
     console.log(err)