course dropdown

client/src/components/pages/AddRecipe.tsx

@@ -8,26 +8,32 @@ import Protect from "../../util/Protect";
 import API from "../../util/API";
 import { v4 } from "uuid";
 import RichText from "../ui/RichText";
-import { TextareaAutosize, TextField } from "@mui/material";
-// import "/src/sass/pages/AddRecipe.scss";
+import { Autocomplete, TextField } from "@mui/material";
 
 const AddRecipe = () => {
     const { user, token } = useAuthContext();
     const { data, setData } = useSelectorContext();
 
+    // received recipe data
     const [input, setInput] = useState<IRecipe>({ name: '', preptime: '', description: '', authoruserid: '' })
+
+    // UI state handling
     const [measurements, setMeasurements] = useState<DropdownData[]>([]);
     const [ingredientFields, setIngredientFields] = useState<Array<JSX.Element>>([]);
+    const [courseData, setCourseData] = useState<DropdownData[]>([]);
     const [optionCount, setOptionCount] = useState(0);
+
+    // status reporting
     const [toast, setToast] = useState(<></>)
 
     // store all ingredients on page mount
     useEffect(() => {
         token && (async() => {
             const ingredients = new API.Ingredient(token);
-            const _measurements = new API.Measurements(token);
+            const _dropdowns = new API.Dropdowns(token);
             const result = await ingredients.getAll();
-            const measurementList = await _measurements.getAll();
+            const measurementList = await _dropdowns.getAllMeasurements();
+            const courseList = await _dropdowns.getAllCourses();
 
             if (result) {
                 setData((prev) => [...prev, ...result]);
@@ -36,6 +42,10 @@ const AddRecipe = () => {
             if (measurementList) {
                 setMeasurements((prev) => [...prev, ...measurementList]);
             }
+
+            if (courseList) {
+                setCourseData((prev) => [...prev, ...courseList]);
+            }
         })();
     }, [token])
 
@@ -102,8 +112,8 @@ const AddRecipe = () => {
     }
 
     useEffect(() => {
-        console.log(input);
-    }, [input])
+        console.log(courseData);
+    }, [courseData])
     
     return (
         <Protect redirect="/add-recipe">
@@ -123,7 +133,15 @@ const AddRecipe = () => {
 
                 <div className="form-row">
                     <label>Course:</label>
-                    <input placeholder="Replace me with dropdown!" />
+                    { courseData.length && 
+                        <Autocomplete
+                            autoHighlight
+                            options={courseData}
+                            renderInput={(params) => (
+                                <TextField {...params} variant="outlined" label="Course" />
+                            )}
+                            getOptionLabel={(option) => option.name}
+                    />}
                 </div>
                 
                 { data && (

client/src/sass/components/Form.scss

@@ -28,6 +28,10 @@
             width: 85%;
         }
 
+        .MuiAutocomplete-root {
+            width: 100%;
+        }
+
         #ingredients-label, #description-label {
             align-self: flex-start;
             padding-top: 1rem;

client/src/util/API.ts

@@ -229,15 +229,20 @@ module API {
         }
     }
 
-    export class Measurements extends RestController<DropdownData> {
+    export class Dropdowns extends RestController<DropdownData> {
         constructor(token: string) {
             super(Settings.getAPISTRING() + "/app/dropdown", token);
         }
 
-        override async getAll() {
+        async getAllMeasurements() {
             const response = await this.instance.get(this.endpoint + "?datatype=measurement", this.headers);
             return Promise.resolve(response.data);
         }
+
+        async getAllCourses() {
+            const response = await this.instance.get(this.endpoint + "?datatype=course", this.headers);
+            return Promise.resolve(response.data);
+        }
     }
 }