Implement Select logic

recipes/src/components/Ingredient/Form/index.tsx

@@ -14,22 +14,56 @@ type IngredientFormProps = {
   addSubrecipe: () => void,
   updateSubrecipeName: (subrecipe: number, newValue: string) => void,
   removeSubrecipe: (index: number) => void,
+  updateIngredientUnit: (key: Array<string|number>, newValue: string) => void,
 };
 
-class IngredientForm extends React.Component<IngredientFormProps, { activeGroup: number }>{
+type SelectOption = {
+  label: string,
+  value: string,
+}
+
+type IngredientFormState = {
+  activeGroup: number,
+  unitOptions: SelectOption[],
+  normalizeUnits: any,
+}
+
+class IngredientForm extends React.Component<IngredientFormProps, IngredientFormState>{
 
   constructor(props: IngredientFormProps) {
     super(props);
     this.state = {
+      unitOptions: [
+        { label: 'gr', value: 'gr'},
+        { label: 'cup', value: 'cup'},
+        { label: 'tbsp', value: 'tbsp'},
+        { label: 'tsp', value: 'tsp'},
+        { label: 'stick', value: 'stick'},
+        { label: 'ml', value: 'ml'},
+        { label: 'oz', value: 'oz'},
+        { label: 'lb', value: 'lb'},
+      ],
       activeGroup: 0,
+      normalizeUnits: {
+        tablespoon: 'tbsp',
+        teaspoon: 'tsp',
+        pound: 'lb',
+        ounce: 'oz'
+      }
     };
+
   }
 
   handleActiveIndexUpdate = (activeGroup: number) => this.setState({ activeGroup })
+  
+  normalizeUnits = (unit: string): string => this.state.normalizeUnits[unit] || unit;
+  
+  onChangeUnit = (key: Array<string|number>) =>
+    (selection: SelectOption) => this.props.updateIngredientUnit(key, selection.value);
 
   render() {
-    const {updateField, components, addSubrecipe, updateSubrecipeName, removeSubrecipe} = this.props;
-    const {activeGroup} = this.state;
+    const {updateField, components, addSubrecipe, updateSubrecipeName, removeSubrecipe } = this.props;
+    const { activeGroup, unitOptions, normalizeUnits } = this.state;
     const tabs = components.map(group => group.name);
     return (
       <div className='cbk-ingredient-form'>
@@ -67,17 +101,14 @@ class IngredientForm extends React.Component<IngredientFormProps, { activeGroup:
                   />
                   <Select
                     label=''
-                    options={[
-                      {label: 'grams', value: 'gr'},
-                      {label: 'cups', value: 'cup'},
-                      {label: 'mililiters', value: 'ml'},
-                    ]}
-                    onChange={(x) => {console.log('selected', x)}}
+                    value={this.normalizeUnits(ingredient.unit)}
+                    options={unitOptions}
+                    onChange={this.onChangeUnit(['ingredients', activeGroup, 'ingredients', index, 'unit'])}
                   />
                   <Input
                     label=''
                     value={''}
-                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, '_original'])}
+                    onChange={updateField(['ingredients', activeGroup, 'ingredients', index, 'notes'])}
                   />
                   <Input
                     label=''

recipes/src/components/Select/index.tsx

@@ -13,21 +13,14 @@ type CBKSelectProps = {
     disabled?: boolean,
   }[],
   disabled?: boolean,
-  onChange?: (x: any) => void
+  onChange: (x: any) => void
 }
 class CBKSelect extends React.Component<CBKSelectProps> {
   state = {
     value: this.props.value || ''
   }
 
-  onChange = (index:number) => {
-    this.setState({
-      value: this.props.options[index].value
-    })
-    if (this.props.onChange) {
-      this.props.onChange(this.props.options[index]);
-    }
-  }
+  onChange = (index:number) => this.props.onChange(this.props.options[index])
 
   render() {
     return (
@@ -36,7 +29,7 @@ class CBKSelect extends React.Component<CBKSelectProps> {
         enhanced
         disabled={this.props.disabled}
         label={this.props.label}
-        value={this.state.value}
+        value={this.props.value}
         onEnhancedChange={this.onChange}
         options={this.props.options}
       >

recipes/src/containers/Recipes/Create.tsx

@@ -341,6 +341,13 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
     } as Pick<CreateRecipeState, keyof CreateRecipeState>)
   }
 
+  updateIngredientUnit = (key: Array<string | number | symbol>, newValue: string) => {
+    console.log('change', key, newValue)
+    this.setState({
+      form: assocPath(key, newValue, this.state.form)
+    })
+  }
+
   addIngredient = (subrecipe: number, last: number) => {
     return () => {
       const { ingredients } = this.state.form;
@@ -544,6 +551,7 @@ class CreateRecipe extends React.Component<CreateRecipeProps, CreateRecipeState>
                 addSubrecipe={this.addSubrecipe}
                 updateSubrecipeName={this.updateSubrecipeName}
                 removeSubrecipe={this.removeSubrecipe}
+                updateIngredientUnit={this.updateIngredientUnit}
               />
               {/* {
                 form.ingredients.map((group, i) => (