diff --git a/src/constants/routes/carsRoutes.ts b/src/constants/routes/carsRoutes.ts index 9c6f85d..989ba6c 100644 --- a/src/constants/routes/carsRoutes.ts +++ b/src/constants/routes/carsRoutes.ts @@ -1,7 +1,10 @@ const carsRoutesDefault = '/cars'; const carsRoutes = { - list: { - url: `${carsRoutesDefault}/list` + listAllBrands: { + url: `${carsRoutesDefault}/brands/list` + }, + listCarModels: { + url: `${carsRoutesDefault}/models/list` } } diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index a3669da..68c07f3 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -37,9 +37,14 @@ const CadastroVan: React.FC = () => { const [toastMessage, setToastMessage] = useState(""); const [toastColor, setToastColor] = useState("primary"); + const [carBrands, setCarBrands] = useState([{ + codigo: '', + nome: '' + }]); + const [carModels, setCarModels] = useState([{ - id_model: '', - name: '' + codigo: '', + nome: '' }]); const [inputValues, setInputValues] = useReducer( @@ -155,6 +160,21 @@ const CadastroVan: React.FC = () => { return true; }; + const loadCarModels = async (carBrandId: string) => { + const carModelsRes = await carsService.getCarModels(carBrandId) + + if (carModelsRes.error) { + setToastColor("danger") + setToastMessage(carModelsRes.error.errorMessage); + setInputValues({ carBrand: '' }) + return + } + + if (carModelsRes.data) { + setCarModels(carModelsRes.data) + } + } + const handleSubmit = async () => { if (!validateForm()) { return @@ -196,24 +216,24 @@ const CadastroVan: React.FC = () => { useEffect(() => { let isMounted = true - const getCarsModels = async () => { - const carModelsRes = await carsService.getAllCarModels() + const getCarsBrands = async () => { + const carBrandsRes = await carsService.getAllCarBrands() - if (carModelsRes.error) { + if (carBrandsRes.error) { setToastColor("danger") - setToastMessage(carModelsRes.error.errorMessage); + setToastMessage(carBrandsRes.error.errorMessage); setShowToast(true); return } - if (carModelsRes.data) { + if (carBrandsRes.data) { if (isMounted) { - setCarModels(carModelsRes.data) + setCarBrands(carBrandsRes.data) } } } - getCarsModels() + getCarsBrands() return () => { isMounted = false } }, []) @@ -248,22 +268,23 @@ const CadastroVan: React.FC = () => { {/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */} Marca - { setInputValues({ carBrand: e.detail.value }) }}> - { carModels ? carModels.map((carModel, index) => { - return ({carModel.name}) + { setInputValues({ carBrand: e.detail.value }); loadCarModels(e.detail.value) }}> + { carBrands ? carBrands.map((carBrand, index) => { + return ({carBrand.nome}) }) : <> } - - Modelo - setInputValues({ carModel: e.target.value })} - /> - + { inputValues.carBrand ? + + Modelo + { setInputValues({ carModel: e.detail.value }) }}> + { carModels ? carModels.map((carModel, index) => { + return ({carModel.nome}) + }) : <> } + + + : <>} diff --git a/src/pages/Debug.tsx b/src/pages/Debug.tsx new file mode 100644 index 0000000..41ae278 --- /dev/null +++ b/src/pages/Debug.tsx @@ -0,0 +1,60 @@ +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar + } from "@ionic/react"; + import React, { useContext, useState } from "react"; + import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react"; + import { useHistory } from "react-router-dom"; + import { + IonItem, + IonLabel, + IonInput, + IonButton, + } from "@ionic/react"; + + import { UserContext } from "../App"; + + const Debug: React.FC = () => { + const [input, setInput] = useState(''); + + return ( + + + + Debug + + + + + + + Debug + + + + + + + + Input + { setInput(e.detail.value!) }} + > + + + { setInput('1994-12-15'); console.log(input) }}>Enviar + + + + + + ); + }; + + export default Debug; + \ No newline at end of file diff --git a/src/services/api/cars.ts b/src/services/api/cars.ts index b81cc93..05d0051 100644 --- a/src/services/api/cars.ts +++ b/src/services/api/cars.ts @@ -16,10 +16,19 @@ function updateHeader() { "Authorization": 'Bearer ' + token } } -export async function list() { + +export async function listAllBrands() { updateHeader(); - const response = await instance.get(carsRoutes.list.url, { headers: header }); + const response = await instance.get(carsRoutes.listAllBrands.url, { headers: header }); + + return response.data; +} + +export async function listCarModels(carBrandId: string) { + updateHeader(); + + const response = await instance.get(carsRoutes.listCarModels.url + `/${carBrandId}`, { headers: header }); return response.data; } \ No newline at end of file diff --git a/src/services/functions/carsService.ts b/src/services/functions/carsService.ts index e46855e..fb1aee4 100644 --- a/src/services/functions/carsService.ts +++ b/src/services/functions/carsService.ts @@ -1,32 +1,29 @@ import * as carsRoutes from "../api/cars"; -interface getAllCarModelsReturn { - data?: { - id_model: string; - name: string; - }[]; +interface CarObject { + codigo: string; + nome: string; +} + +interface getAllCarBrandsReturn { + data?: CarObject[]; error?: { errorMessage: string; } } -interface getAllCarModelsRes { +interface getAllCarBrandsRes { status?: string; message: string - data?: { - id_model: string; - name: string; - }[]; - - + data?: CarObject[]; } -const getAllCarModels = async (): Promise => { +const getAllCarBrands = async (): Promise => { try { - let res: getAllCarModelsRes = await carsRoutes.list(); + let res: getAllCarBrandsRes = await carsRoutes.listAllBrands(); if (res.status === "error") { return { @@ -42,10 +39,34 @@ const getAllCarModels = async (): Promise => { } catch (err) { return { error: { - errorMessage: "Por favor, autentique-se.", + errorMessage: "Por favor, tente novamente.", }, }; } }; -export default { getAllCarModels }; +const getCarModels = async (carBrandId: string): Promise => { + try { + let res: getAllCarBrandsRes = await carsRoutes.listCarModels(carBrandId); + + if (res.status === "error") { + return { + error: { + errorMessage: res.message, + }, + }; + } + + return { + data: res.data, + }; + } catch (err) { + return { + error: { + errorMessage: "Por favor, tente novamente.", + }, + }; + } +}; + +export default { getAllCarBrands, getCarModels };