preparing to change ingredient entry strategy

client/src/components/pages/AddRecipe.tsx

@@ -26,7 +26,7 @@ const AddRecipe = () => {
     // clear out selector state on page load
     useEffect(() => {
         setData(new Array<IIngredient>());
-        setSelected(new Array<OptionType>());
+        setSelected(new Array<string>());
         setOptions(new Array<OptionType>());
     }, [])
 
@@ -60,20 +60,25 @@ const AddRecipe = () => {
                     multiple
                     freeSolo
                     autoHighlight
+                    fullWidth
                     filterSelectedOptions
-                    style={{ width: '50vw' }}
                     className="ui-creatable-component" 
                     id="ingredient-autocomplete"
                     options={options.map(each => each.label)}
+                    onChange={(e) => updateSelection(e.target['innerText' as keyof EventTarget].toString())}
                     onKeyDown={(e) => {
                         if (e.code == 'Enter') {
                             const inputVal: string = e.target['value' as keyof EventTarget].toString();
+                            console.log(inputVal)
+                            if (inputVal.length) {
+                                setSelected(prev => [...prev, inputVal])
                                 const newOption = createOptionFromText(inputVal, optionCount + 1);
                                 setOptions((prev) => [...prev, newOption]);
                                 setOptionCount(prev => prev + 1);
                             }
+                        }
                     }}
-                    renderTags={(value, getTagProps) => value.map((option, idx) => <Chip variant="outlined" label={option} { ...getTagProps({ index: idx }) } onDelete={(target: string) => handleDelete(target)} />)}
+                    renderTags={(value, getTagProps) => value.map((option, idx) => <Chip variant="outlined" label={option} { ...getTagProps({ index: idx }) } onDelete={() => handleDelete(option)} />)}
                     renderInput={(params) => (
                         <TextField
                             {...params}
@@ -85,6 +90,7 @@ const AddRecipe = () => {
             )
 
             // create dropdown from new data
+            /*
             const selectorInstance = <Creatable 
                 className="ui-creatable-component" 
                 id="ingredient-selector" 
@@ -94,10 +100,12 @@ const AddRecipe = () => {
                 onChange={(selection: MultiValue<OptionType>) => onChange(selection)}
                 onCreateOption={(input: string) => onCreateOption(input, () => {})}
             /> 
+            */
+
             data.length && setSelector(autocompleteInstance);
             setTriggerChange(true);
         }
-    }, [data, options])
+    }, [data, options, selected])
 
     // once the dropdown data has populated, mount it within the full form
     useEffect(() => {
@@ -135,9 +143,15 @@ const AddRecipe = () => {
         setInput(data);
     }, [input])
 
+    const updateSelection = (target: string) => {
+        setSelected((prev) => {
+            return [...prev, target];
+        })
+    }
+
     const handleDelete = (target: string) => {
-        setOptions((prev) => {
+        setSelected((prev) => {
-            return prev.filter(option => option.label !== target);
+            return prev.filter(option => option !== target);
         })
     }
 

client/src/context/SelectorContext.tsx

@@ -4,8 +4,8 @@ import { OptionType } from "../util/types"
 interface SelectorContextProps<T> {
     data: Array<T>
     setData: Dispatch<SetStateAction<Array<T>>> | VoidFunction
-    selected: Array<OptionType>
+    selected: Array<string>
-    setSelected: Dispatch<SetStateAction<Array<OptionType>>> | VoidFunction
+    setSelected: Dispatch<SetStateAction<Array<string>>> | VoidFunction
     options: Array<OptionType>
     setOptions: Dispatch<SetStateAction<Array<OptionType>>> | VoidFunction
     selector: JSX.Element
@@ -17,7 +17,7 @@ interface SelectorContextProps<T> {
 const defaultValue: SelectorContextProps<any> = {
     data: new Array<any>(),
     setData: () => {},
-    selected: new Array<any>(),
+    selected: new Array<string>(),
     setSelected: () => {},
     options: new Array<OptionType>(),
     setOptions: () => {},

client/src/context/SelectorProvider.tsx

@@ -6,7 +6,7 @@ function SelectorProvider<T>({ children }: { children: JSX.Element | JSX.Element
     const [data, setData] = useState<Array<T>>([]);
     const [selector, setSelector] = useState<JSX.Element>(<></>)
     const [options, setOptions] = useState<Array<OptionType>>([]);
-    const [selected, setSelected] = useState<Array<OptionType>>([]);
+    const [selected, setSelected] = useState<Array<string>>([]);
 
     /**
      * Event handler for a change in selection state
@@ -20,7 +20,7 @@ function SelectorProvider<T>({ children }: { children: JSX.Element | JSX.Element
         const newOption: OptionType = { label: label, value: newID }
 
         setOptions((prev) => [...prev, newOption]);
-        setSelected((prev) => [...prev, newOption]);
+        setSelected((prev) => [...prev, newOption.label]);
         setData((prev) => [...prev, generateObject(label, newID)]);
     }