Merge pull request #12 from Hzin/feature/VAN-6-van-models-table

Inclui uso da API de marcas e modelos de carros

src/constants/routes/carsRoutes.ts

@@ -1,7 +1,10 @@
 const carsRoutesDefault = '/cars';
 const carsRoutes = {
-  list: {
+  listAllBrands: {
-    url: `${carsRoutesDefault}/list`
+    url: `${carsRoutesDefault}/brands/list`
+  },
+  listCarModels: {
+    url: `${carsRoutesDefault}/models/list`
   }
 }
 

src/pages/CadastroVan.tsx

@@ -37,9 +37,14 @@ const CadastroVan: React.FC = () => {
   const [toastMessage, setToastMessage] = useState<string>("");
   const [toastColor, setToastColor] = useState<Color>("primary");
 
+  const [carBrands, setCarBrands] = useState([{
+    codigo: '',
+    nome: ''
+  }]);
+
   const [carModels, setCarModels] = useState([{
-    id_model: '',
+    codigo: '',
-    name: ''
+    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 getCarsBrands = async () => {
-      const carModelsRes = await carsService.getAllCarModels()
+      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 */}
           <IonItem>
             <IonLabel>Marca</IonLabel>
-            <IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }) }}>
+            <IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }); loadCarModels(e.detail.value) }}>
-              { carModels ? carModels.map((carModel, index) => {
+              { carBrands ? carBrands.map((carBrand, index) => {
-                return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
+                return (<IonSelectOption key={index} value={index}>{carBrand.nome}</IonSelectOption>)
               }) : <></> }
             </IonSelect>
           </IonItem>
 
-          <IonItem>
+          { inputValues.carBrand ?
-            <IonLabel position='floating'>Modelo </IonLabel>
+            <IonItem>
-            <IonInput
+              <IonLabel>Modelo</IonLabel>
-              type='text'
+              <IonSelect onIonChange={(e: any) => { setInputValues({ carModel: e.detail.value }) }}>
-              clearInput
+                { carModels ? carModels.map((carModel, index) => {
-              placeholder='Digite o Modelo do Veículo'
+                  return (<IonSelectOption key={index} value={carModel.nome}>{carModel.nome}</IonSelectOption>)
-              onIonChange={(e: any) => setInputValues({ carModel: e.target.value })}
+                }) : <></> }
-            />
+              </IonSelect>
-          </IonItem>
+            </IonItem>
+            : <></>}
 
           <IonItem>
             <IonLabel position='floating'>

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 (
+      <IonPage>
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Debug</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+  
+        <IonContent fullscreen>
+          <IonHeader collapse="condense">
+            <IonToolbar>
+              <IonTitle size="large">Debug</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+  
+          <IonGrid>
+            <IonRow>
+              <IonCol>
+                <IonItem>
+                  <IonLabel position="floating"> Input</IonLabel>
+                  <IonInput
+                    type="date"
+                    value={input}
+                    // onIonChange={(e) => { setInput(e.detail.value!) }}
+                  ></IonInput>
+                </IonItem>
+
+                <IonButton onClick={(e) => { setInput('1994-12-15'); console.log(input) }}>Enviar</IonButton>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </IonContent>
+      </IonPage>
+    );
+  };
+  
+  export default Debug;
+  

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;
 }

src/services/functions/carsService.ts

@@ -1,32 +1,29 @@
 import * as carsRoutes from "../api/cars";
 
-interface getAllCarModelsReturn {
+interface CarObject {
-  data?: {
+  codigo: string;
-    id_model: string;
+  nome: string;
-    name: string;
+}
-  }[];
+
+interface getAllCarBrandsReturn {
+  data?: CarObject[];
 
   error?: {
     errorMessage: string;
   }
 }
 
-interface getAllCarModelsRes {
+interface getAllCarBrandsRes {
   status?: string;
 
   message: string
 
-  data?: {
+  data?: CarObject[];
-    id_model: string;
-    name: string;
-  }[];
-
-  
 }
 
-const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
+const getAllCarBrands = async (): Promise<getAllCarBrandsReturn> => {
   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<getAllCarModelsReturn> => {
   } catch (err) {
     return {
       error: {
-        errorMessage: "Por favor, autentique-se.",
+        errorMessage: "Por favor, tente novamente.",
       },
     };
   }
 };
 
-export default { getAllCarModels };
+const getCarModels = async (carBrandId: string): Promise<getAllCarBrandsReturn> => {
+  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 };