From 9e146f0825906f9b41d2d0a82c34c7fe6ba48c04 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Thu, 16 Feb 2023 17:57:40 -0600 Subject: [PATCH] fetches and displays measurement units --- .../components/derived/IngredientSelector.tsx | 99 +++++++++++++------ client/src/components/pages/AddRecipe.tsx | 39 ++++---- client/src/util/API.ts | 13 ++- server/models/dropdownValues.ts | 2 +- server/routes/dropdownValues.ts | 3 +- server/routes/index.ts | 2 + 6 files changed, 104 insertions(+), 54 deletions(-) diff --git a/client/src/components/derived/IngredientSelector.tsx b/client/src/components/derived/IngredientSelector.tsx index 6ac5434..77f3fa7 100644 --- a/client/src/components/derived/IngredientSelector.tsx +++ b/client/src/components/derived/IngredientSelector.tsx @@ -1,49 +1,86 @@ import { Autocomplete, TextField } from "@mui/material" -import { useRef, useState } from "react"; -import { IIngredient } from "../../schemas"; +import { useEffect, useRef, useState } from "react"; +import { DropdownData, IIngredient } from "../../schemas"; import { Button } from "../ui"; interface IngredientSelectorProps { position: number ingredients: IIngredient[] + units: DropdownData[] destroy: (position: number) => void } -function IngredientSelector({ position, ingredients, destroy }: IngredientSelectorProps) { +function IngredientSelector({ position, ingredients, units, destroy }: IngredientSelectorProps) { const [options, setOptions] = useState(ingredients.map(each => each.name)); + const [measurementUnits, setMeasurementUnits] = useState(units.map(each => each.name)); const [newOptions, setNewOptions] = useState(new Array()); const [selected, setSelected] = useState(new Array()); + useEffect(() => { + console.log(units); + }, []) + return ( -
-
- -
- ( - + + + + + + + + ( + + )} + onKeyDown={(e) => { + console.log(e.code); + /* if (e.code == 'Enter') { + const inputVal: string = e.target['value' as keyof EventTarget].toString(); + if (inputVal.length) { + setSelected(prev => [...prev, inputVal]) + setOptions((prev) => [...prev, inputVal]); + } + } */ + }} /> - )} - 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]) - setOptions((prev) => [...prev, inputVal]); - } - } - }} - /> - {/* @ts-ignore */} - -
+ + + + ( + + )} + onKeyDown={(e) => { + if (e.code == 'Enter') { + const inputVal: string = e.target['value' as keyof EventTarget].toString(); + if (inputVal.length) { + setSelected(prev => [...prev, inputVal]) + setOptions((prev) => [...prev, inputVal]); + } + } + }} + /> + + + + + + ) } diff --git a/client/src/components/pages/AddRecipe.tsx b/client/src/components/pages/AddRecipe.tsx index aa08f4a..40af9a5 100644 --- a/client/src/components/pages/AddRecipe.tsx +++ b/client/src/components/pages/AddRecipe.tsx @@ -1,7 +1,7 @@ import { useAuthContext } from "../../context/AuthContext"; import { useCallback, useEffect, useState } from "react"; import { Button, Card, Divider, Page, Panel } from "../ui" -import { IIngredient, IRecipe } from "../../schemas"; +import { DropdownData, IIngredient, IRecipe } from "../../schemas"; import API from "../../util/API"; import { useSelectorContext } from "../../context/SelectorContext"; import IngredientSelector from "../derived/IngredientSelector"; @@ -9,35 +9,38 @@ import { v4 } from "uuid"; const AddRecipe = () => { const { user, token } = useAuthContext(); - const { data, setData, options, setOptions } = useSelectorContext(); + const { data, setData } = useSelectorContext(); + + const [input, setInput] = useState({ name: '', preptime: '', description: '', authoruserid: '' }) + const [measurements, setMeasurements] = useState([]); const [ingredientFields, setIngredientFields] = useState>([]); - const [triggerChange, setTriggerChange] = useState(false); const [optionCount, setOptionCount] = useState(0); const [toast, setToast] = useState(<>) - const [input, setInput] = useState({ name: '', preptime: '', description: '', authoruserid: '' }) // store all ingredients on page mount useEffect(() => { token && (async() => { const ingredients = new API.Ingredient(token); + const _measurements = new API.Measurements(token); const result = await ingredients.getAll(); + const measurementList = await _measurements.getAll(); if (result) { setData((prev) => [...prev, ...result]); - - // once async data is received, derive its new states - setOptions(result.map((each: IIngredient) => { - return { label: each.name, value: each.id } - })); + } - setIngredientFields([]); + if (measurementList) { + setMeasurements((prev) => [...prev, ...measurementList]); } })(); }, [token]) useEffect(() => { - if (data.length) setTriggerChange(true); - }, [data, options]) + if (data.length && measurements.length) { + setIngredientFields([]); + } + + }, [data, measurements]) // once user information is available, store it in recipe data useEffect(() => { @@ -50,10 +53,6 @@ const AddRecipe = () => { }) }, [user]) - useEffect(() => { - return; - }, [ingredientFields]) - // submit handler const handleCreate = async () => { if (!token) return; @@ -95,7 +94,7 @@ const AddRecipe = () => { }, [ingredientFields]); function handleNewOption() { - setIngredientFields((prev) => [...prev, ]) + setIngredientFields((prev) => [...prev, ]) setOptionCount(prev => prev + 1); } @@ -107,17 +106,17 @@ const AddRecipe = () => {
- + setInput({ ...input, name: e.target.value })} />
- + setInput({ ...input, preptime: e.target.value })} />
- +
{ data && ( diff --git a/client/src/util/API.ts b/client/src/util/API.ts index 54f6a85..cfae924 100644 --- a/client/src/util/API.ts +++ b/client/src/util/API.ts @@ -1,5 +1,5 @@ import { AxiosError, AxiosHeaders, AxiosRequestHeaders, AxiosResponse } from "axios"; -import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList } from "../schemas"; +import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList, DropdownData } from "../schemas"; import { default as _instance } from "./axiosInstance"; module API { @@ -223,6 +223,17 @@ module API { super(Settings.getAPISTRING() + "/app/grocery-list", token) } } + + export class Measurements extends RestController { + constructor(token: string) { + super(Settings.getAPISTRING() + "/app/dropdown", token); + } + + override async getAll() { + const response = await this.instance.get(this.endpoint + "?datatype=measurement", this.headers); + return Promise.resolve(response.data); + } + } } export default API \ No newline at end of file diff --git a/server/models/dropdownValues.ts b/server/models/dropdownValues.ts index 589fb53..cc4e38b 100644 --- a/server/models/dropdownValues.ts +++ b/server/models/dropdownValues.ts @@ -3,7 +3,7 @@ import pool from "../db"; export default class Dropdown { async getMeasurements() { try { - const statement = `SELECT * FROM recipin.dropdownVals WHERE datatype = MEASUREMENTS`; + const statement = `SELECT * FROM recipin.dropdownVals WHERE datatype = 'MEASUREMENTS'`; const result = await pool.query(statement); if (result.rows.length) return result.rows; return null; diff --git a/server/routes/dropdownValues.ts b/server/routes/dropdownValues.ts index ce66879..d090d46 100644 --- a/server/routes/dropdownValues.ts +++ b/server/routes/dropdownValues.ts @@ -5,7 +5,7 @@ import { DropdownDataType } from '../schemas'; const router = Router(); const DDInstance = new DropdownCtl(); -export const dropdownValue = (app: Express) => { +export const dropdownValueRouter = (app: Express) => { app.use('/app/dropdown', router); router.get('/', async (req, res, next) => { @@ -24,4 +24,5 @@ export const dropdownValue = (app: Express) => { } }) + return router; } \ No newline at end of file diff --git a/server/routes/index.ts b/server/routes/index.ts index 04f5161..bf1a015 100644 --- a/server/routes/index.ts +++ b/server/routes/index.ts @@ -11,6 +11,7 @@ import { subscriptionRoute } from "./subscription"; import { friendRouter } from "./friend"; import { cuisineRouter } from "./cuisine"; import { courseRouter } from "./course"; +import { dropdownValueRouter } from "./dropdownValues"; dotenv.config(); @@ -47,6 +48,7 @@ export const routes = async (app: Express) => { subscriptionRoute(app); groceryListRoute(app); courseRouter(app); + dropdownValueRouter(app); // deprecate? cuisineRouter(app);