cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Incluindo lista de marcas de carro do backend

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-05-28 16:26:45 -05:00
parent 34c08df016
commit efba742455
6 changed files with 197 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
"integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
"version": "5.9.4",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
"integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
"peer": true,
"dependencies": {
"@stencil/core": "^2.14.2",
"ionicons": "^6.0.0",
"@stencil/core": "^2.4.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",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
"integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
"version": "5.9.4",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
"integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
"peer": true,
"requires": {
"@stencil/core": "^2.14.2",
"ionicons": "^6.0.0",
"@stencil/core": "^2.4.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",

1
package.json
View File

@@ -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",

8
src/constants/routes/carsRoutes.ts Normal file
View File

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

47
src/pages/CadastroVan.tsx
View File

@@ -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>

25
src/services/api/cars.ts Normal file
View File

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

51
src/services/functions/carsService.ts Normal file
View File

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