Incluindo lista de marcas de carro do backend

package-lock.json

@@ -14,6 +14,7 @@
         "@capacitor/keyboard": "1.2.2",
         "@capacitor/status-bar": "1.0.8",
         "@hookform/error-message": "^2.0.0",
+        "@ionic-selectable/core": "^5.0.0-alpha.13",
         "@ionic/react": "^6.0.0",
         "@ionic/react-router": "^6.0.0",
         "@testing-library/jest-dom": "^5.11.9",
@@ -2404,6 +2405,14 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@ionic-selectable/core": {
+      "version": "5.0.0-alpha.13",
+      "resolved": "https://registry.npmjs.org/@ionic-selectable/core/-/core-5.0.0-alpha.13.tgz",
+      "integrity": "sha512-AdwGuPSD3Qy6uyo0jJp05JZMQr5KS1r/ojDEsyvBNjl1agxWJn7cQC0nagF29CPzaCQjwUh8qYa+FKsyCll2jA==",
+      "peerDependencies": {
+        "@ionic/core": "5.x"
+      }
+    },
     "node_modules/@ionic/cli-framework-output": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.3.tgz",
@@ -2419,35 +2428,16 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.0.13",
+      "version": "5.9.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
-      "integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
+      "integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
+      "peer": true,
       "dependencies": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "^2.4.0",
-        "ionicons": "^6.0.0",
+        "ionicons": "^5.5.3",
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/@ionic/core/node_modules/ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
-      "dependencies": {
-        "@stencil/core": "~2.12.0"
-      }
-    },
-    "node_modules/@ionic/core/node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-      "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
-      }
-    },
     "node_modules/@ionic/react": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.0.13.tgz",
@@ -2477,6 +2467,28 @@
         "react-router-dom": "^5.0.1"
       }
     },
+    "node_modules/@ionic/react/node_modules/@ionic/core": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
+      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "dependencies": {
+        "@stencil/core": "^2.14.2",
+        "ionicons": "^6.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@ionic/react/node_modules/@ionic/core/node_modules/@stencil/core": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
+      "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@ionic/react/node_modules/@stencil/core": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
@@ -3172,6 +3184,7 @@
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.14.2.tgz",
       "integrity": "sha512-NMC5Xi8sPFJxaO4rz6CbMHuD6PteE/RJWtjrbkusmpjKRtMXkfZJPIgOrleZ4xO+vXcNyL535Ru7vUADqEsTiQ==",
+      "peer": true,
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -18353,6 +18366,12 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@ionic-selectable/core": {
+      "version": "5.0.0-alpha.13",
+      "resolved": "https://registry.npmjs.org/@ionic-selectable/core/-/core-5.0.0-alpha.13.tgz",
+      "integrity": "sha512-AdwGuPSD3Qy6uyo0jJp05JZMQr5KS1r/ojDEsyvBNjl1agxWJn7cQC0nagF29CPzaCQjwUh8qYa+FKsyCll2jA==",
+      "requires": {}
+    },
     "@ionic/cli-framework-output": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@ionic/cli-framework-output/-/cli-framework-output-2.2.3.tgz",
@@ -18365,30 +18384,14 @@
       }
     },
     "@ionic/core": {
-      "version": "6.0.13",
+      "version": "5.9.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
-      "integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
+      "integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
+      "peer": true,
       "requires": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "^2.4.0",
-        "ionicons": "^6.0.0",
+        "ionicons": "^5.5.3",
         "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "ionicons": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-          "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
-          "requires": {
-            "@stencil/core": "~2.12.0"
-          },
-          "dependencies": {
-            "@stencil/core": {
-              "version": "2.12.1",
-              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-              "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A=="
-            }
-          }
-        }
       }
     },
     "@ionic/react": {
@@ -18401,6 +18404,23 @@
         "tslib": "*"
       },
       "dependencies": {
+        "@ionic/core": {
+          "version": "6.1.7",
+          "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
+          "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+          "requires": {
+            "@stencil/core": "^2.14.2",
+            "ionicons": "^6.0.0",
+            "tslib": "^2.1.0"
+          },
+          "dependencies": {
+            "@stencil/core": {
+              "version": "2.15.2",
+              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
+              "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg=="
+            }
+          }
+        },
         "@stencil/core": {
           "version": "2.12.1",
           "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
@@ -18934,7 +18954,8 @@
     "@stencil/core": {
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.14.2.tgz",
-      "integrity": "sha512-NMC5Xi8sPFJxaO4rz6CbMHuD6PteE/RJWtjrbkusmpjKRtMXkfZJPIgOrleZ4xO+vXcNyL535Ru7vUADqEsTiQ=="
+      "integrity": "sha512-NMC5Xi8sPFJxaO4rz6CbMHuD6PteE/RJWtjrbkusmpjKRtMXkfZJPIgOrleZ4xO+vXcNyL535Ru7vUADqEsTiQ==",
+      "peer": true
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",

package.json

@@ -9,6 +9,7 @@
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
     "@hookform/error-message": "^2.0.0",
+    "@ionic-selectable/core": "^5.0.0-alpha.13",
     "@ionic/react": "^6.0.0",
     "@ionic/react-router": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.9",

src/constants/routes/carsRoutes.ts

@@ -0,0 +1,8 @@
+const carsRoutesDefault = '/cars';
+const carsRoutes = {
+  list: {
+    url: `${carsRoutesDefault}/list`
+  }
+}
+
+export default carsRoutes;

src/pages/CadastroVan.tsx

@@ -10,26 +10,33 @@ import {
   IonHeader,
   IonPage,
   IonToolbar,
-  IonText,
   IonTitle,
   IonList,
   IonCheckbox,
-  IonItemDivider,
   IonListHeader,
+  IonSelect,
+  IonSelectOption,
 } from "@ionic/react";
 
-import React, { useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 
 import * as yup from 'yup';
 
 import { ApiClient } from "../services/api-client.service";
 
+import carsService from '../services/functions/carsService'
+
 import "./CadastroVan.css";
 
 const CadastroVan: React.FC = () => {
   const [showToast, setShowToast] = useState<boolean>(false);
   const [toastMessage, setToastMessage] = useState<string>("");
 
+  const [carModels, setCarModels] = useState([{
+    id_model: '',
+    name: ''
+  }]);
+
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
@@ -197,6 +204,29 @@ const CadastroVan: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    let isMounted = true
+
+    const getCarsModels = async () => {
+      const carModelsRes = await carsService.getAllCarModels()
+  
+      if (carModelsRes.error) {
+        console.log('Houve um erro')
+        return
+      }
+  
+      if (carModelsRes.data) {
+        if (isMounted) {
+          setCarModels(carModelsRes.data)
+        }
+      }
+    }
+
+    getCarsModels()
+
+    return () => { isMounted = false }
+  }, [])
+
   return (
     <IonPage>
       <IonHeader>
@@ -223,7 +253,7 @@ const CadastroVan: React.FC = () => {
             />
           </IonItem>
 
-          <IonItem>
+          {/* <IonItem>
             <IonLabel position='floating'>Marca </IonLabel>
             <IonInput
               type='text'
@@ -231,6 +261,15 @@ const CadastroVan: React.FC = () => {
               placeholder='Digite a Marca do Veículo'
               onIonInput={(e: any) => setInputValues({ carBrand: e.target.value })}
             />
+          </IonItem> */}
+
+          <IonItem>
+            <IonLabel>Marca</IonLabel>
+            <IonSelect value={inputValues.marca}>
+              { carModels ? carModels.map((carModel, index) => {
+                return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
+              }) : <></> }
+            </IonSelect>
           </IonItem>
 
           <IonItem>

src/services/api/cars.ts

@@ -0,0 +1,25 @@
+import instance from './api';
+
+import carsRoutes from '../../constants/routes/carsRoutes';
+import { AxiosRequestHeaders } from 'axios';
+import LocalStorage from '../../LocalStorage';
+
+let token: string;
+let header: AxiosRequestHeaders;
+
+function updateHeader() {
+  token = LocalStorage.getToken();
+
+  header = {
+    "Accept": 'application/json',
+    "Content-Type": 'application/json',
+    "Authorization": 'Bearer ' + token
+  }
+}
+export async function list() {
+  updateHeader();
+
+  const response = await instance.get(carsRoutes.list.url, { headers: header });
+
+  return response.data;
+}

src/services/functions/carsService.ts

@@ -0,0 +1,51 @@
+import * as carsRoutes from "../api/cars";
+
+interface getAllCarModelsReturn {
+  data?: {
+    id_model: string;
+    name: string;
+  }[];
+
+  error?: {
+    errorMessage: string;
+  }
+}
+
+interface getAllCarModelsRes {
+  status?: string;
+
+  message: string
+
+  data?: {
+    id_model: string;
+    name: string;
+  }[];
+
+  
+}
+
+const getAllCarModels = async (): Promise<getAllCarModelsReturn> => {
+  try {
+    let res: getAllCarModelsRes = await carsRoutes.list();
+
+    if (res.status === "error") {
+      return {
+        error: {
+          errorMessage: res.message,
+        },
+      };
+    }
+
+    return {
+      data: res.data,
+    };
+  } catch (err) {
+    return {
+      error: {
+        errorMessage: "Por favor, autentique-se.",
+      },
+    };
+  }
+};
+
+export default { getAllCarModels };