add feature remove button, style buttons

src/PhonoChangeApplier.scss

@@ -24,7 +24,7 @@ div.App {
     display: grid;
     width: 100%;
     place-items: center center;
-    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
     grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
     
     div {
@@ -34,4 +34,22 @@ div.App {
       overflow-y: scroll;
     }
   }
+
+  button.form, input[type="submit"].form, input[type="button"].form {
+    height: 2em;
+    border-radius: 0.25em;
+    border-color: transparent;
+    margin: 0.2em auto;
+    width: 10em;
+  }
+
+  button.form--add, input[type="submit"].form--add, input[type="button"].form--add{
+    background-color: greenyellow;
+    color: black;
+  }
+  
+  button.form--remove, input[type="submit"].form--remove, input[type="button"].form--remove {
+    background-color: red;
+    color: white;
+  }
 }

src/components/Epochs.js

@@ -41,7 +41,7 @@ const Epochs = ({epochs, errors, dispatch}) => {
   const renderAddEpochButton = index => {
     if (index === epochs.length - 1 ) return (
       <form onSubmit={e=>addEpoch(e)}>
-        <input type="submit" name="add-epoch" value="Add Epoch" ></input>
+        <input className="form form--add" type="submit" name="add-epoch" value="Add Epoch" ></input>
       </form>
     )
     return <></>

src/components/Features.js

@@ -4,6 +4,28 @@ import './Features.scss';
 
 import type { featureAction } from '../reducers/reducer.features';
 
+
+const Features = ({ phones, features, dispatch }) => {
+  const [feature, setFeature] = useState('aspirated')
+  const [ newPositivePhones, setNewPositivePhones ] = useState('tʰ / pʰ / kʰ');
+  const [ newNegativePhones, setNewNegativePhones ] = useState('t / p / k');
+  
+  const newFeaturesSubmit = e => {
+    e.preventDefault();
+    setFeature('');
+    setNewPositivePhones('');
+    setNewNegativePhones('');
+  }
+  
+  const handleDeleteClick = (e, feature) => {
+    e.preventDefault();
+    const deleteFeatureAction = {
+      type: "DELETE_FEATURE",
+      value: feature
+    }
+    return dispatch(deleteFeatureAction);
+  }
+  
   const parsePhonesFromFeatureObject = featureObject => {
     const getProperty = property => object => object[property]
     
@@ -17,7 +39,7 @@ const parsePhonesFromFeatureObject = featureObject => {
   
     const getFeatureMapJSX = (featureMap) => {
       return featureMap.map((feature, index) => {
-      const featureName = Object.keys(feature);
+        const [featureName] = Object.keys(feature);
         const { plus, minus } = feature[featureName];
         return (
           <li key={`feature__${featureName}`}>
@@ -37,6 +59,7 @@ const parsePhonesFromFeatureObject = featureObject => {
                 {minus}
               </span>
             </span>
+            <button className="delete-feature" onClick={e => handleDeleteClick(e, featureName)}>X</button>
           </li>
         )
       })
@@ -68,18 +91,6 @@ const buildAddFeatureAction = ([newPositivePhones, newNegativePhones, feature]):
     }
   )
 
-const Features = ({ phones, features, dispatch }) => {
-  const [feature, setFeature] = useState('aspirated')
-  const [ newPositivePhones, setNewPositivePhones ] = useState('tʰ / pʰ / kʰ');
-  const [ newNegativePhones, setNewNegativePhones ] = useState('t / p / k');
-  
-  const newFeaturesSubmit = e => {
-    e.preventDefault();
-    setFeature('');
-    setNewPositivePhones('');
-    setNewNegativePhones('');
-  }
-
   return (
     <div className="Features" data-testid="Features">
       
@@ -114,6 +125,7 @@ const Features = ({ phones, features, dispatch }) => {
         </label>
 
         <input 
+          className="form form--add"
           type="submit" 
           onClick={e => handleClickDispatch(e)(dispatch)(buildAddFeatureAction)([newPositivePhones, newNegativePhones, feature])} 
           value="Add feature"

src/components/Features.scss

@@ -1,18 +1,24 @@
 div.Features {
 
-  ul.Features__list li {
+  ul.Features__list {
+    width: 100%;
+    
+    li {
       display: grid;
-    grid-template-columns: 1fr 1fr;
+      grid-template-columns: 10fr 10fr 1fr;
+      margin: 0.5em 0;
+      place-items: center center;
       
       span.feature--names-and-phones {
         display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
       }
       
       span.feature-name {
         font-weight: 600;
       }
     }
+  }
 
   form {
     display: flex;
@@ -23,4 +29,12 @@ div.Features {
       font-size: 1em;
     }
   }
+
+  button.delete-feature {
+    background-color: red;
+    border-color: transparent;
+    border-radius: 0.5em;
+    color: white;
+    max-height: 1.5em;
+  }
 }

src/components/Options.js

@@ -65,8 +65,8 @@ const Options = ({ options, dispatch }) => {
           <span className="Options__output-example"> *proto > *epoch > output</span>
         </label> */}
         
-        <input type="submit" value="Run Changes"></input>
+        <input className="form form--add" type="submit" value="Run Changes"></input>
-        <input type="button" value="Clear Output" onClick={e=>handleOutputClearSubmit(e)}/>
+        <input className="form form--remove" type="button" value="Clear Output" onClick={e=>handleOutputClearSubmit(e)}/>
       </form>
 
 

src/components/SoundChangeSuite.js

@@ -103,7 +103,7 @@ const SoundChangeSuite = props => {
         ></textarea>
       </form>
       <form onSubmit={e=>removeEpoch(e, epoch.name)}>
-        <input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
+        <input className="form form--remove" type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
       </form>
     </>
   );

src/reducers/reducer.features.js

@@ -78,3 +78,11 @@ export const addFeature = (state: stateType, action: featureAction): stateType =
   let newFeature = {[action.value.feature]: {positive: positivePhones, negative: negativePhones}};
   return {...state, features:{...state.features, ...newFeature}, phones: newPhoneObject}
 }
+
+export const deleteFeature = (state, action) => {
+  console.log('deleting')
+  const deletedFeature = action.value;
+  delete state.features[deletedFeature];
+  console.log(state)
+  return {...state}
+}

src/reducers/reducer.js

@@ -3,7 +3,7 @@ import { addLexeme, setLexicon } from './reducer.lexicon';
 import type { lexiconAction } from './reducer.lexicon';
 import { addEpoch, setEpoch, removeEpoch } from './reducer.epochs';
 import type { epochAction } from './reducer.epochs';
-import { addFeature } from './reducer.features';
+import { addFeature, deleteFeature } from './reducer.features';
 import type { featureAction } from './reducer.features';
 import type { optionsAction } from './reducer.options';
 import { setOptions } from './reducer.options';
@@ -56,6 +56,8 @@ export const stateReducer = (state: stateType, action: actionType): stateType =>
 
     case 'ADD_FEATURE': return addFeature(state, action);
 
+    case 'DELETE_FEATURE': return deleteFeature(state, action);
+
     case 'SET_OPTIONS': return setOptions(state, action);
 
     case 'CLEAR': return clearOutput(state, action);