From 6d02069ae7ea7d3067006d6c9db154628f5038de Mon Sep 17 00:00:00 2001 From: Byancaam Date: Sat, 16 Apr 2022 20:03:41 -0300 Subject: [PATCH 01/19] Estrutura inicial para cadastro das vans --- mock/db.json | 12 ++++ package.json | 1 + src/App.tsx | 2 + src/models/van.model.ts | 7 ++ src/pages/Vans.css | 0 src/pages/Vans.tsx | 155 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 177 insertions(+) create mode 100644 mock/db.json create mode 100644 src/models/van.model.ts create mode 100644 src/pages/Vans.css create mode 100644 src/pages/Vans.tsx diff --git a/mock/db.json b/mock/db.json new file mode 100644 index 0000000..0838572 --- /dev/null +++ b/mock/db.json @@ -0,0 +1,12 @@ +{ + "cadastro-van":[ + { + "id": 1, + "placa": "DBE2356", + "marca": "Fiat", + "modelo": "Ducatto", + "numPassageiros": 14, + "alugado" : false + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index ad7c9c5..b9cf076 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ }, "scripts": { "start": "react-scripts start", + "start:mock": "json-server --port 8080 --watch ./mock/db.json", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'", "eject": "react-scripts eject" diff --git a/src/App.tsx b/src/App.tsx index 5b3a726..ce21495 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import Cadastro from './pages/Cadastro'; +import Vans from './pages/Vans'; import MainPages from './pages/MainPages'; /* Core CSS required for Ionic components to work properly */ @@ -36,6 +37,7 @@ const App: React.FC = () => ( + diff --git a/src/models/van.model.ts b/src/models/van.model.ts new file mode 100644 index 0000000..38ca95c --- /dev/null +++ b/src/models/van.model.ts @@ -0,0 +1,7 @@ +export type Van = { + id: number; + placa: string; + modelo: string; + numPassageiros: number; + alugado: boolean +} \ No newline at end of file diff --git a/src/pages/Vans.css b/src/pages/Vans.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Vans.tsx b/src/pages/Vans.tsx new file mode 100644 index 0000000..844e39c --- /dev/null +++ b/src/pages/Vans.tsx @@ -0,0 +1,155 @@ +import { + IonIcon, + IonItem, + IonLabel, + IonInput, + IonBackButton, + IonButton, + IonButtons, + IonCardTitle, + IonCol, + IonContent, + IonGrid, + IonHeader, + IonPage, + IonRow, + IonToolbar, + IonTitle, + IonList, + IonRadioGroup, + IonListHeader, + IonRadio +} from "@ionic/react"; +import { arrowBack } from "ionicons/icons"; +import React, { useState } from "react"; +//import { Van } from "../models/van.model"; +import "./Vans.css"; + +const Vans: React.FC = () => { + // const van: Van; + + const [placa, setPlaca] = useState(""); + const [marca, setMarca] = useState(""); + const [modelo, setModelo] = useState(""); + const [numPassageiros, setNumPassageiros] = useState(""); + const [tipoSelecionado, setTipoSelecionado] = useState("Não"); + + const placaChangeHandle = (event: any) => { + setPlaca(event.target.value); + }; + + const marcaChangeHandle = (event: any) => { + setMarca(event.target.value); + }; + + const modeloChangeHandle = (event: any) => { + setModelo(event.target.value); + }; + + const numPassageirosChangeHandle = (event: any) => { + setNumPassageiros(event.target.value); + }; + + const tipoSelecionadoChangeHandle = (event: any) => { + setTipoSelecionado(event.target.value); + }; + + return ( + + + + + + + Return + + + + + + +
+ Cadastro da Veículo + + + Placa * + setPlaca(e.detail.value!)} + > + + + + Marca * + + + + + Modelo * + + + + + + Digite o número total de passageiros * + + + + + + + + Veículo Alugado ? + + + + Sim + + + + + Não + + + + + + + Salvar + +
+ + + ); +}; + +export default Vans; From 87bbb968c248b4658587a12aee175b30a2aab0f7 Mon Sep 17 00:00:00 2001 From: Byancaam Date: Sun, 17 Apr 2022 22:53:11 -0300 Subject: [PATCH 02/19] Ajustes na estrutura do projeto | Tela do cadastro de vans com validacao --- mock/db.json | 4 +- package-lock.json | 56 ++++++++ package.json | 3 + src/App.tsx | 2 +- src/models/van.model.ts | 11 +- src/pages/{Vans.css => CadastroVan.css} | 0 src/pages/CadastroVan.tsx | 178 ++++++++++++++++++++++++ src/pages/Vans.tsx | 155 --------------------- src/services/api-client.service.ts | 18 +++ 9 files changed, 264 insertions(+), 163 deletions(-) rename src/pages/{Vans.css => CadastroVan.css} (100%) create mode 100644 src/pages/CadastroVan.tsx delete mode 100644 src/pages/Vans.tsx create mode 100644 src/services/api-client.service.ts diff --git a/mock/db.json b/mock/db.json index 0838572..6b1251a 100644 --- a/mock/db.json +++ b/mock/db.json @@ -1,12 +1,12 @@ { - "cadastro-van":[ + "cadastro-van": [ { "id": 1, "placa": "DBE2356", "marca": "Fiat", "modelo": "Ducatto", "numPassageiros": 14, - "alugado" : false + "alugado": false } ] } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 650964e..657578e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@capacitor/haptics": "1.1.4", "@capacitor/keyboard": "1.2.2", "@capacitor/status-bar": "1.0.8", + "@hookform/error-message": "^2.0.0", "@ionic/react": "^6.0.0", "@ionic/react-router": "^6.0.0", "@testing-library/jest-dom": "^5.11.9", @@ -24,9 +25,11 @@ "@types/react-dom": "^16.9.10", "@types/react-router": "^5.1.11", "@types/react-router-dom": "^5.1.7", + "axios": "^0.26.1", "ionicons": "^5.4.0", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-hook-form": "^7.30.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.0", @@ -2239,6 +2242,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@hookform/error-message": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.0.tgz", + "integrity": "sha512-Y90nHzjgL2MP7GFy75kscdvxrCTjtyxGmOLLxX14nd08OXRIh9lMH/y9Kpdo0p1IPowJBiZMHyueg7p+yrqynQ==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0", + "react-hook-form": "^7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -4549,6 +4562,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", + "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -12339,6 +12360,21 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-hook-form": { + "version": "7.30.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", + "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -16917,6 +16953,12 @@ } } }, + "@hookform/error-message": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.0.tgz", + "integrity": "sha512-Y90nHzjgL2MP7GFy75kscdvxrCTjtyxGmOLLxX14nd08OXRIh9lMH/y9Kpdo0p1IPowJBiZMHyueg7p+yrqynQ==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", @@ -18653,6 +18695,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, + "axios": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", + "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "requires": { + "follow-redirects": "^1.14.8" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -24237,6 +24287,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-hook-form": { + "version": "7.30.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", + "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index b9cf076..d789785 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@capacitor/haptics": "1.1.4", "@capacitor/keyboard": "1.2.2", "@capacitor/status-bar": "1.0.8", + "@hookform/error-message": "^2.0.0", "@ionic/react": "^6.0.0", "@ionic/react-router": "^6.0.0", "@testing-library/jest-dom": "^5.11.9", @@ -19,9 +20,11 @@ "@types/react-dom": "^16.9.10", "@types/react-router": "^5.1.11", "@types/react-router-dom": "^5.1.7", + "axios": "^0.26.1", "ionicons": "^5.4.0", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-hook-form": "^7.30.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.0", diff --git a/src/App.tsx b/src/App.tsx index ce21495..7716476 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import Cadastro from './pages/Cadastro'; -import Vans from './pages/Vans'; +import Vans from './pages/CadastroVan'; import MainPages from './pages/MainPages'; /* Core CSS required for Ionic components to work properly */ diff --git a/src/models/van.model.ts b/src/models/van.model.ts index 38ca95c..ae90e2b 100644 --- a/src/models/van.model.ts +++ b/src/models/van.model.ts @@ -1,7 +1,8 @@ export type Van = { id: number; - placa: string; - modelo: string; - numPassageiros: number; - alugado: boolean -} \ No newline at end of file + carPlate: string; + carBrand: string; + carModel: string; + maxPassengers: number; + isRent: string; +}; diff --git a/src/pages/Vans.css b/src/pages/CadastroVan.css similarity index 100% rename from src/pages/Vans.css rename to src/pages/CadastroVan.css diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx new file mode 100644 index 0000000..8d83e81 --- /dev/null +++ b/src/pages/CadastroVan.tsx @@ -0,0 +1,178 @@ +import { + IonIcon, + IonItem, + IonLabel, + IonInput, + IonBackButton, + IonButton, + IonButtons, + IonCardTitle, + IonCol, + IonContent, + IonGrid, + IonHeader, + IonPage, + IonRow, + IonToolbar, + IonTitle, + IonText, + IonList, + IonRadioGroup, + IonListHeader, + IonRadio +} from "@ionic/react"; + +import React, { useEffect } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { ErrorMessage } from "@hookform/error-message"; + +import { ApiClient } from "../services/api-client.service"; +import { arrowBack } from "ionicons/icons"; +import "./CadastroVan.css"; + +const CadastroVan: React.FC = () => { + const { + handleSubmit, + control, + setValue, + register, + getValues, + formState: { errors } + } = useForm({ + defaultValues: { + carPlate: "", + carBrand: "", + carModel: "", + maxPassengers: "", + isRent: "NO" + } + }); + + useEffect(() => { + + },[]); + + const onSubmit = async (van: any) => { + await ApiClient.doPost("/cadastro-van", van); + }; + + return ( + + + + VanMos App v1.0 + + + Return + + + + + + +
+ Cadastro do Veículo + + + Placa * + + + } + /> + + + Marca * + + + } + /> + + + Modelo * + + + } + /> + + + + Número Máximo de Passageiros * + + + + } + /> + + + +
+ Veículo alugado? +
+
+ setValue("isRent", e.detail.value)} + > + + Sim + + + + + Não + + + +
+ + + {errors.isRent && ( + This field is required + )} + + {getValues("isRent") === "YES" &&
Teste Novos Campos
} + +
+ + Salvar + +
+ +
+ + ); +}; + +export default CadastroVan; diff --git a/src/pages/Vans.tsx b/src/pages/Vans.tsx deleted file mode 100644 index 844e39c..0000000 --- a/src/pages/Vans.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { - IonIcon, - IonItem, - IonLabel, - IonInput, - IonBackButton, - IonButton, - IonButtons, - IonCardTitle, - IonCol, - IonContent, - IonGrid, - IonHeader, - IonPage, - IonRow, - IonToolbar, - IonTitle, - IonList, - IonRadioGroup, - IonListHeader, - IonRadio -} from "@ionic/react"; -import { arrowBack } from "ionicons/icons"; -import React, { useState } from "react"; -//import { Van } from "../models/van.model"; -import "./Vans.css"; - -const Vans: React.FC = () => { - // const van: Van; - - const [placa, setPlaca] = useState(""); - const [marca, setMarca] = useState(""); - const [modelo, setModelo] = useState(""); - const [numPassageiros, setNumPassageiros] = useState(""); - const [tipoSelecionado, setTipoSelecionado] = useState("Não"); - - const placaChangeHandle = (event: any) => { - setPlaca(event.target.value); - }; - - const marcaChangeHandle = (event: any) => { - setMarca(event.target.value); - }; - - const modeloChangeHandle = (event: any) => { - setModelo(event.target.value); - }; - - const numPassageirosChangeHandle = (event: any) => { - setNumPassageiros(event.target.value); - }; - - const tipoSelecionadoChangeHandle = (event: any) => { - setTipoSelecionado(event.target.value); - }; - - return ( - - - - - - - Return - - - - - - -
- Cadastro da Veículo - - - Placa * - setPlaca(e.detail.value!)} - > - - - - Marca * - - - - - Modelo * - - - - - - Digite o número total de passageiros * - - - - - - - - Veículo Alugado ? - - - - Sim - - - - - Não - - - - - - - Salvar - -
- - - ); -}; - -export default Vans; diff --git a/src/services/api-client.service.ts b/src/services/api-client.service.ts new file mode 100644 index 0000000..970a8f3 --- /dev/null +++ b/src/services/api-client.service.ts @@ -0,0 +1,18 @@ +import axios from "axios"; + +export class ApiClient{ + private static api = axios.create({ + baseURL: "http://localhost:8080" + }); + + public static async doPost (url: string, body: any): Promise { + return await this.api + .post(url, body) + .then(res => { + console.log(res.data); + }) + .catch(error => { + console.log(error); + }); + }; +} \ No newline at end of file From 6518fd52a38c27cf3cf4d8bd1ca6e49c1a3bac86 Mon Sep 17 00:00:00 2001 From: Byancaam Date: Sun, 1 May 2022 21:39:07 -0300 Subject: [PATCH 03/19] adicionando a validacao dos campos --- src/pages/CadastroVan.tsx | 299 +++++++++++++++++++++++++++++--------- 1 file changed, 234 insertions(+), 65 deletions(-) diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index 8d83e81..4fec045 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -1,5 +1,5 @@ import { - IonIcon, + IonToast, IonItem, IonLabel, IonInput, @@ -7,53 +7,157 @@ import { IonButton, IonButtons, IonCardTitle, - IonCol, IonContent, - IonGrid, IonHeader, IonPage, - IonRow, IonToolbar, IonTitle, IonText, - IonList, IonRadioGroup, - IonListHeader, IonRadio } from "@ionic/react"; -import React, { useEffect } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { ErrorMessage } from "@hookform/error-message"; +import React, { useState } from "react"; import { ApiClient } from "../services/api-client.service"; import { arrowBack } from "ionicons/icons"; import "./CadastroVan.css"; + const CadastroVan: React.FC = () => { - const { - handleSubmit, - control, - setValue, - register, - getValues, - formState: { errors } - } = useForm({ - defaultValues: { - carPlate: "", - carBrand: "", - carModel: "", - maxPassengers: "", - isRent: "NO" + + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(""); + + const [carPlate, setCarPlate] = useState(""); + const [carBrand, setCarBrand] = useState(""); + const [carModel, setCarModel] = useState(""); + const [maxPassengers, setMaxPassengers] = useState(1); + const [isRent, setIsRent] = useState(false); + const [carRentalName, setCarRentalName] = useState(""); + const [postalCode, setPostalCode] = useState(""); + const [street, setStreet] = useState(""); + const [number, setNumber] = useState(""); + const [complement, setComplement] = useState(""); + const [city, setCity] = useState(""); + const [state, setState] = useState(""); + + const vanForm = { + carPlate, + carBrand, + carModel, + maxPassengers, + isRent, + carRentalName, + carRentalAddress: { + postalCode, + street, + number, + complement, + city, + state } - }); + }; - useEffect(() => { + const clearRentalData = () => { + setCarRentalName(""); + setPostalCode(""); + setStreet(""); + setNumber(""); + setComplement(""); + setCity(""); + setState(""); + }; - },[]); + const validateForm = (): boolean => { + if ( + !vanForm.carPlate || + vanForm.carPlate.length !== 7 || + !vanForm.carPlate.match(/([A-z0-9]){7}/g) + ) { + setToastMessage("Placa do veículo inválida!"); + setShowToast(true); + return false; + } - const onSubmit = async (van: any) => { - await ApiClient.doPost("/cadastro-van", van); + if (!vanForm.carBrand) { + setToastMessage("Marca do veículo é obrigatório"); + setShowToast(true); + return false; + } + + if (!vanForm.carModel) { + setToastMessage("Modelo do veículo é obrigatório"); + setShowToast(true); + return false; + } + + if (!vanForm.maxPassengers || !parseInt(`${vanForm.maxPassengers}`)) { + setToastMessage("Número de passageiros inválido"); + setShowToast(true); + return false; + } + + if (vanForm.isRent) { + return validateRentalForm(); + } else { + clearRentalData(); + } + + return true; + }; + + const validateRentalForm = (): boolean => { + if (!vanForm.carRentalName) { + setToastMessage("Nome do Locador é obrigatório"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.postalCode || + vanForm.carRentalAddress.postalCode.length !== 8 || + !vanForm.carRentalAddress.postalCode.match(/([0-9]){8}/g) + ) { + setToastMessage("Cep inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.number || + !parseInt(`${vanForm.carRentalAddress.number}`) + ) { + setToastMessage("Número inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.city || + !vanForm.carRentalAddress.city.match(/([A-zà-úÀ-Ú])/g) + ) { + setToastMessage("Cidade inválido"); + setShowToast(true); + return false; + } + + if ( + !vanForm.carRentalAddress.state || + !vanForm.carRentalAddress.state.match(/([A-zà-úÀ-Ú])/g) + ) { + setToastMessage("Estado inválido"); + setShowToast(true); + return false; + } + + return true; + }; + + const handleSubmit = async () => { + if (validateForm()) { + await ApiClient.doPost("/cadastro-van", vanForm); + } }; return ( @@ -70,68 +174,50 @@ const CadastroVan: React.FC = () => { -
+ Cadastro do Veículo Placa * setCarPlate(e.target.value)} /> - } - /> Marca * setCarBrand(e.target.value)} /> - } - /> Modelo * setCarModel(e.target.value)} /> - } - /> Número Máximo de Passageiros * setMaxPassengers(e.target.value)} /> - } - /> @@ -141,35 +227,118 @@ const CadastroVan: React.FC = () => {
setValue("isRent", e.detail.value)} + onIonChange={(e: any) => setIsRent(e.target.value)} > Sim - + Não - +
- {errors.isRent && ( - This field is required + + {isRent && ( +
+ + Nome do Locador * + setCarRentalName(e.target.value)} + /> + + +
+ Endereço do Locador +
+ + CEP* + setPostalCode(e.target.value)} + /> + + + Logradouro* + setStreet(e.target.value)} + /> + + + + Número* + setNumber(e.target.value)} + /> + + + + Complemento* + setComplement(e.target.value)} + /> + + + + Cidade* + setCity(e.target.value)} + /> + + + + Estado* + setState(e.target.value)} + /> + + +
)} - {getValues("isRent") === "YES" &&
Teste Novos Campos
} -
- + Salvar
+ setShowToast(false)} + message={toastMessage} + duration={2500} + />
); From 5133d28fd764e0d56e9ac95bb79d0c8710187cc9 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 12:50:07 -0500 Subject: [PATCH 04/19] Completando interface da tela de perfil --- src/pages/Perfil.css | 11 ++++++-- src/pages/Perfil.tsx | 64 +++++++++++++++++++++++--------------------- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/pages/Perfil.css b/src/pages/Perfil.css index f1080b7..1efc84d 100644 --- a/src/pages/Perfil.css +++ b/src/pages/Perfil.css @@ -1,7 +1,14 @@ #avatar { border-radius: 50%; - width: 64px; - height: 64px; + width: 100px; + height: 100px; + display: block; + margin-left: auto; + margin-right: auto; +} + +#profile-status { + text-align: center; } IonIcon { diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 484f67e..64d64ec 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -5,8 +5,6 @@ import { IonCardTitle, IonChip, IonContent, - IonFab, - IonFabButton, IonHeader, IonIcon, IonItem, @@ -20,8 +18,7 @@ import { } from "@ionic/react"; import { useHistory } from "react-router-dom"; import React, { useState, useEffect, useReducer } from "react"; -import { IonRow, IonCol } from "@ionic/react"; -import { createOutline } from "ionicons/icons"; +import { cardOutline, carOutline, createOutline, exitOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons"; import './Perfil.css' import LocalStorage from "../LocalStorage"; @@ -125,17 +122,19 @@ const Perfil: React.FC = () => { - - - - avatar - - - - + {/* avatar */} + avatar {inputValues.name} {inputValues.lastname} + +
+ Status: + + {/* TODO, deve vir do backend */} + Passageiro + +
@@ -148,38 +147,41 @@ const Perfil: React.FC = () => { - + {/* - Status do perfil - - Passageiro - + - + */} - Dashboard - - - Confirmar perfil + Configurações + {/* history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> */} + + + Editar perfil - + + + Completar perfil + + + Cadastrar Van - + + Pagamentos - + + Avaliações + + + Sair da conta + - - history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> - - - - Date: Sat, 28 May 2022 12:56:09 -0500 Subject: [PATCH 05/19] Incluindo URL para cadastro de vans --- src/pages/Perfil.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 64d64ec..1f2f756 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -143,7 +143,7 @@ const Perfil: React.FC = () => { Biografia - {inputValues.bio ? inputValues.bio : 'Sem biografia.'} + {inputValues.bio ? inputValues.bio : 'Sem biografia.' } @@ -155,8 +155,7 @@ const Perfil: React.FC = () => { Configurações - {/* history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> */} - + history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> Editar perfil @@ -164,7 +163,7 @@ const Perfil: React.FC = () => { Completar perfil - + history.push({ pathname: '/cadastro-van'})}> Cadastrar Van From 40696db5b5488b4f0527b1478eb640c4f1a9f26b Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 13:35:35 -0500 Subject: [PATCH 06/19] =?UTF-8?q?Refatorando=20vari=C3=A1veis=20da=20p?= =?UTF-8?q?=C3=A1gina=20CadastroVan?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CadastroVan.tsx | 114 ++++++++++++++++++++------------------ 1 file changed, 60 insertions(+), 54 deletions(-) diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index 4fec045..7c4bcc6 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -11,62 +11,71 @@ import { IonHeader, IonPage, IonToolbar, - IonTitle, IonText, IonRadioGroup, IonRadio } from "@ionic/react"; -import React, { useState } from "react"; +import React, { useReducer, useState } from "react"; import { ApiClient } from "../services/api-client.service"; -import { arrowBack } from "ionicons/icons"; + import "./CadastroVan.css"; - const CadastroVan: React.FC = () => { - const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); - const [carPlate, setCarPlate] = useState(""); - const [carBrand, setCarBrand] = useState(""); - const [carModel, setCarModel] = useState(""); - const [maxPassengers, setMaxPassengers] = useState(1); - const [isRent, setIsRent] = useState(false); - const [carRentalName, setCarRentalName] = useState(""); - const [postalCode, setPostalCode] = useState(""); - const [street, setStreet] = useState(""); - const [number, setNumber] = useState(""); - const [complement, setComplement] = useState(""); - const [city, setCity] = useState(""); - const [state, setState] = useState(""); + const [inputValues, setInputValues] = useReducer( + (state: any, newState: any) => ({ ...state, ...newState }), + { + carPlate: '', + carBrand: '', + carModel: '', + maxPassengers: 1, + isRent: false, + carRentalName: '', + postalCode: '', + street: '', + number: '', + complement: '', + city: '', + state: '', + } + ); const vanForm = { - carPlate, - carBrand, - carModel, - maxPassengers, - isRent, - carRentalName, + carPlate: inputValues.carPlate, + carBrand: inputValues.carBrand, + carModel: inputValues.carModel, + maxPassengers: inputValues.maxPassengers, + isRent: inputValues.isRent, + carRentalName: inputValues.carRentalName, carRentalAddress: { - postalCode, - street, - number, - complement, - city, - state + postalCode: inputValues.postalCode, + street: inputValues.street, + number: inputValues.number, + complement: inputValues.complement, + city: inputValues.city, + state: inputValues.state, } }; const clearRentalData = () => { - setCarRentalName(""); - setPostalCode(""); - setStreet(""); - setNumber(""); - setComplement(""); - setCity(""); - setState(""); + setInputValues({ + carPlate: '', + carBrand: '', + carModel: '', + maxPassengers: 1, + isRent: false, + carRentalName: '', + postalCode: '', + street: '', + number: '', + complement: '', + city: '', + state: '', + }) }; const validateForm = (): boolean => { @@ -163,12 +172,9 @@ const CadastroVan: React.FC = () => { return ( - - VanMos App v1.0 + - - Return - + @@ -183,7 +189,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite a Placa do Veículo' - onIonInput={(e: any) => setCarPlate(e.target.value)} + onIonInput={(e: any) => setInputValues({ carPlate: e.target.value })} /> @@ -193,7 +199,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite a Marca do Veículo' - onIonInput={(e: any) => setCarBrand(e.target.value)} + onIonInput={(e: any) => setInputValues({ carBrand: e.target.value })} /> @@ -203,7 +209,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o Modelo do Veículo' - onIonInput={(e: any) => setCarModel(e.target.value)} + onIonInput={(e: any) => setInputValues({ carModel: e.target.value })} /> @@ -215,7 +221,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o número máximo de passageiros' - onIonInput={(e: any) => setMaxPassengers(e.target.value)} + onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })} /> @@ -227,7 +233,7 @@ const CadastroVan: React.FC = () => {
setIsRent(e.target.value)} + onIonChange={(e: any) => setInputValues({ isRent: e.target.value })} > Sim @@ -243,7 +249,7 @@ const CadastroVan: React.FC = () => { - {isRent && ( + {inputValues.isRent && (
Nome do Locador * @@ -251,7 +257,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o nome do locador do veículo' - onIonInput={(e: any) => setCarRentalName(e.target.value)} + onIonInput={(e: any) => setInputValues({ carRentalName: e.target.value })} /> @@ -266,7 +272,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o endereço completo do locador do veículo' - onIonInput={(e: any) => setPostalCode(e.target.value)} + onIonInput={(e: any) => setInputValues({ postalCode: e.target.value })} /> @@ -275,7 +281,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o nome da rua' - onIonInput={(e: any) => setStreet(e.target.value)} + onIonInput={(e: any) => setInputValues({ street: e.target.value })} /> @@ -285,7 +291,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o número' - onIonInput={(e: any) => setNumber(e.target.value)} + onIonInput={(e: any) => setInputValues({ number: e.target.value })} /> @@ -295,7 +301,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o endereço completo' - onIonInput={(e: any) => setComplement(e.target.value)} + onIonInput={(e: any) => setInputValues({ complement: e.target.value })} /> @@ -305,7 +311,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite a cidade' - onIonInput={(e: any) => setCity(e.target.value)} + onIonInput={(e: any) => setInputValues({ city: e.target.value })} /> @@ -315,7 +321,7 @@ const CadastroVan: React.FC = () => { type='text' clearInput placeholder='Digite o estado' - onIonInput={(e: any) => setState(e.target.value)} + onIonInput={(e: any) => setInputValues({ state: e.target.value })} /> From 8d4d0406dcd14accb17ec28b3010993ab58673f9 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 13:35:56 -0500 Subject: [PATCH 07/19] Atualizando perfil --- src/pages/Perfil.tsx | 2 +- src/pages/PerfilEditar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 1f2f756..3655c6b 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -113,7 +113,7 @@ const Perfil: React.FC = () => { - + Seu perfil diff --git a/src/pages/PerfilEditar.tsx b/src/pages/PerfilEditar.tsx index c2cefaa..7287b0f 100644 --- a/src/pages/PerfilEditar.tsx +++ b/src/pages/PerfilEditar.tsx @@ -111,7 +111,7 @@ const PerfilEditar: React.FC = () => { - + Editar perfil From 0907e80ffaea7d85dbd2055da5f035f7e41b3d04 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 13:43:33 -0500 Subject: [PATCH 08/19] Adicionando biblioteca yup --- package-lock.json | 109 +++++++++++++++++++++++++++++++--------------- package.json | 3 +- 2 files changed, 77 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 10c66fd..d2e89da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,8 @@ "workbox-range-requests": "^5.1.4", "workbox-routing": "^5.1.4", "workbox-strategies": "^5.1.4", - "workbox-streams": "^5.1.4" + "workbox-streams": "^5.1.4", + "yup": "^0.32.11" }, "devDependencies": { "@capacitor/cli": "3.4.3", @@ -3834,8 +3835,7 @@ "node_modules/@types/lodash": { "version": "4.14.182", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", - "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==", - "dev": true + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" }, "node_modules/@types/lodash.isequal": { "version": "4.5.6", @@ -10676,6 +10676,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11084,6 +11089,11 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=", "dev": true }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", @@ -13075,6 +13085,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13336,21 +13351,6 @@ "react": "^16.8.0 || ^17 || ^18" } }, - "node_modules/react-hook-form": { - "version": "7.30.0", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", - "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==", - "engines": { - "node": ">=12.22.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-hook-form" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15141,6 +15141,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + }, "node_modules/tough-cookie": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", @@ -16686,6 +16691,23 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } } }, "dependencies": { @@ -19427,8 +19449,7 @@ "@types/lodash": { "version": "4.14.182", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", - "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==", - "dev": true + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" }, "@types/lodash.isequal": { "version": "4.5.6", @@ -20234,14 +20255,6 @@ "follow-redirects": "^1.14.8" } }, - "axios": { - "version": "0.26.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", - "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", - "requires": { - "follow-redirects": "^1.14.8" - } - }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -24620,6 +24633,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -24938,6 +24956,11 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=", "dev": true }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", @@ -26293,6 +26316,11 @@ } } }, + "property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26485,12 +26513,6 @@ "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==", "requires": {} }, - "react-hook-form": { - "version": "7.30.0", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz", - "integrity": "sha512-DzjiM6o2vtDGNMB9I4yCqW8J21P314SboNG1O0obROkbg7KVS0I7bMtwSdKyapnCPjHgnxc3L7E5PEdISeEUcQ==", - "requires": {} - }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27863,6 +27885,11 @@ "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", "dev": true }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=" + }, "tough-cookie": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz", @@ -29122,6 +29149,20 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + } } } } diff --git a/package.json b/package.json index 7fbbf73..e51de74 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "workbox-range-requests": "^5.1.4", "workbox-routing": "^5.1.4", "workbox-strategies": "^5.1.4", - "workbox-streams": "^5.1.4" + "workbox-streams": "^5.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", From 34c08df0160d468d147764ccadc12ce1ed4e44c3 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 14:57:05 -0500 Subject: [PATCH 09/19] =?UTF-8?q?Mais=20atualiza=C3=A7=C3=B5es=20em=20Cada?= =?UTF-8?q?stroVan?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CadastroVan.tsx | 202 ++++++++++++++++++-------------------- 1 file changed, 93 insertions(+), 109 deletions(-) diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index 7c4bcc6..c6dd9f4 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -6,18 +6,22 @@ import { IonBackButton, IonButton, IonButtons, - IonCardTitle, IonContent, IonHeader, IonPage, IonToolbar, IonText, - IonRadioGroup, - IonRadio + IonTitle, + IonList, + IonCheckbox, + IonItemDivider, + IonListHeader, } from "@ionic/react"; import React, { useReducer, useState } from "react"; +import * as yup from 'yup'; + import { ApiClient } from "../services/api-client.service"; import "./CadastroVan.css"; @@ -44,12 +48,36 @@ const CadastroVan: React.FC = () => { } ); + // TODO, yup + let schema = yup.object().shape({ + carPlate: yup.string().required(), + carBrand: yup.string().required(), + carModel: yup.string().required(), + maxPassengers: yup.number().integer().min(1).max(100).required(), + isRented: yup.boolean().required(), + carRentalName: yup.string(), // .required(), + postalCode: yup.string(), // .required(), + street: yup.string(), // .required(), + number: yup.number().integer(), // .required(), + complement: yup.string(), // .required(), + city: yup.string(), // .required(), + state: yup.string(), // .required(), + + // name: yup.string().required(), + // age: yup.number().required().positive().integer(), + // email: yup.string().email(), + // website: yup.string().url(), + // createdOn: yup.date().default(function () { + // return new Date(); + // }), + }); + const vanForm = { carPlate: inputValues.carPlate, carBrand: inputValues.carBrand, carModel: inputValues.carModel, maxPassengers: inputValues.maxPassengers, - isRent: inputValues.isRent, + isRented: inputValues.isRented, carRentalName: inputValues.carRentalName, carRentalAddress: { postalCode: inputValues.postalCode, @@ -107,7 +135,7 @@ const CadastroVan: React.FC = () => { return false; } - if (vanForm.isRent) { + if (vanForm.isRented) { return validateRentalForm(); } else { clearRentalData(); @@ -173,18 +201,20 @@ const CadastroVan: React.FC = () => { + Cadastro de veículo - -
- Cadastro do Veículo - + + + + Informações do veículo + - Placa * + Placa { - Marca * + Marca { - Modelo * + Modelo { - Número Máximo de Passageiros * + Número Máximo de Passageiros { onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })} /> + + + + + Informações do locador + - -
- Veículo alugado? -
-
- setInputValues({ isRent: e.target.value })} - > - - Sim - - - - - Não - - - -
- + O veículo é alugado? + setInputValues({ isRented: e.detail.checked })} /> - {inputValues.isRent && ( + {inputValues.isRented && (
- - Nome do Locador * - setInputValues({ carRentalName: e.target.value })} - /> - - -
- Endereço do Locador -
- - CEP* - setInputValues({ postalCode: e.target.value })} - /> - - - Logradouro* - setInputValues({ street: e.target.value })} - /> - + + + setInputValues({ carRentalName: e.target.value })} + /> - - Número* - setInputValues({ number: e.target.value })} - /> - - - - Complemento* - setInputValues({ complement: e.target.value })} - /> - - - - Cidade* - setInputValues({ city: e.target.value })} - /> - - - - Estado* - setInputValues({ state: e.target.value })} - /> - - + setInputValues({ postalCode: e.target.value })} + /> + setInputValues({ number: e.target.value })} + /> + setInputValues({ complement: e.target.value })} + /> + setInputValues({ city: e.target.value })} + /> + setInputValues({ state: e.target.value })} + /> +
)} @@ -337,7 +320,8 @@ const CadastroVan: React.FC = () => { Salvar
- + + Date: Sat, 28 May 2022 16:26:45 -0500 Subject: [PATCH 10/19] Incluindo lista de marcas de carro do backend --- package-lock.json | 117 +++++++++++++++----------- package.json | 1 + src/constants/routes/carsRoutes.ts | 8 ++ src/pages/CadastroVan.tsx | 47 ++++++++++- src/services/api/cars.ts | 25 ++++++ src/services/functions/carsService.ts | 51 +++++++++++ 6 files changed, 197 insertions(+), 52 deletions(-) create mode 100644 src/constants/routes/carsRoutes.ts create mode 100644 src/services/api/cars.ts create mode 100644 src/services/functions/carsService.ts diff --git a/package-lock.json b/package-lock.json index d2e89da..de4adac 100644 --- a/package-lock.json +++ b/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", - "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", diff --git a/package.json b/package.json index e51de74..58690e5 100644 --- a/package.json +++ b/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", diff --git a/src/constants/routes/carsRoutes.ts b/src/constants/routes/carsRoutes.ts new file mode 100644 index 0000000..9c6f85d --- /dev/null +++ b/src/constants/routes/carsRoutes.ts @@ -0,0 +1,8 @@ +const carsRoutesDefault = '/cars'; +const carsRoutes = { + list: { + url: `${carsRoutesDefault}/list` + } +} + +export default carsRoutes; \ No newline at end of file diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index c6dd9f4..7862f9d 100644 --- a/src/pages/CadastroVan.tsx +++ b/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(false); const [toastMessage, setToastMessage] = useState(""); + 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 ( @@ -223,7 +253,7 @@ const CadastroVan: React.FC = () => { /> - + {/* Marca { placeholder='Digite a Marca do Veículo' onIonInput={(e: any) => setInputValues({ carBrand: e.target.value })} /> + */} + + + Marca + + { carModels ? carModels.map((carModel, index) => { + return ({carModel.name}) + }) : <> } + diff --git a/src/services/api/cars.ts b/src/services/api/cars.ts new file mode 100644 index 0000000..b81cc93 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/services/functions/carsService.ts b/src/services/functions/carsService.ts new file mode 100644 index 0000000..e46855e --- /dev/null +++ b/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 => { + 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 }; From c9f86fd337616969753870882a08606ff7c8a885 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 16:34:53 -0500 Subject: [PATCH 11/19] =?UTF-8?q?Incluindo=20fun=C3=A7=C3=A3o=20para=20o?= =?UTF-8?q?=20bot=C3=A3o=20de=20logout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Perfil.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 3655c6b..44f7a66 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -50,6 +50,11 @@ const Perfil: React.FC = () => { setShowToast(true); } + const logoff = () => { + LocalStorage.clearToken() + history.push('/login') + } + useEffect(() => { const loadUserData = async () => { let userId = '' @@ -159,7 +164,7 @@ const Perfil: React.FC = () => { Editar perfil - + Completar perfil @@ -167,15 +172,15 @@ const Perfil: React.FC = () => { Cadastrar Van - + Pagamentos - + Avaliações - + Sair da conta From 4edea7330a4c69adbb2c1adb6b1ba8dd3d8e5631 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 16:49:47 -0500 Subject: [PATCH 12/19] Tabbar some agora com logout --- src/App.tsx | 19 +------------------ src/pages/Perfil.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bae94ce..2053a62 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -40,8 +40,6 @@ import { search, home, person } from 'ionicons/icons'; import { useState, useContext, useEffect } from 'react'; import React from 'react'; -import sessionsService from './services/functions/sessionsService' - setupIonicReact(); const routes = ( @@ -67,27 +65,12 @@ const user: IUserManager = { export const UserContext = React.createContext(user); const IonicApp: React.FC = () => { + const [isLoggedIn, setIsLoggedIn] = useState(false); const user = useContext(UserContext); user.setIsLoggedIn = setIsLoggedIn; - useEffect(() => { - const verifyAuthenticatedUser = async () => { - const refreshSessionRes = await sessionsService.refreshSession() - - if (refreshSessionRes.error) { - return - } - - if (refreshSessionRes.userId) { - setIsLoggedIn(true) - } - } - - verifyAuthenticatedUser() - }) - return( diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 44f7a66..fa137b9 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -17,7 +17,7 @@ import { IonToolbar, } from "@ionic/react"; import { useHistory } from "react-router-dom"; -import React, { useState, useEffect, useReducer } from "react"; +import React, { useState, useEffect, useReducer, useContext } from "react"; import { cardOutline, carOutline, createOutline, exitOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons"; import './Perfil.css' @@ -25,8 +25,11 @@ import LocalStorage from "../LocalStorage"; import sessionsService from '../services/functions/sessionsService' import usersService from '../services/functions/usersService' +import { UserContext } from "../App"; const Perfil: React.FC = () => { + const user = useContext(UserContext); + const [showToast, setShowToast] = useState(false); const [messageToast, setMessageToast] = useState(''); @@ -52,6 +55,7 @@ const Perfil: React.FC = () => { const logoff = () => { LocalStorage.clearToken() + user.setIsLoggedIn(false); history.push('/login') } @@ -108,7 +112,6 @@ const Perfil: React.FC = () => { return () => { isMounted = false }; }, []); - // }, [history]); return ( From 99d52ad29e9452fc363b3f2aaed48479962ef84b Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 16:53:55 -0500 Subject: [PATCH 13/19] =?UTF-8?q?Renomeando=20p=C3=A1ginas=20de=20login?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 8 ++++---- src/pages/{Perfil.tsx => SeuPerfil.tsx} | 0 src/pages/{PerfilEditar.tsx => SeuPerfilEditar.tsx} | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename src/pages/{Perfil.tsx => SeuPerfil.tsx} (100%) rename src/pages/{PerfilEditar.tsx => SeuPerfilEditar.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index 2053a62..58bebcb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,8 +34,8 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; -import Perfil from './pages/Perfil'; -import PerfilEditar from './pages/PerfilEditar'; +import SeuPerfil from './pages/SeuPerfil'; +import SeuPerfilEditar from './pages/SeuPerfilEditar'; import { search, home, person } from 'ionicons/icons'; import { useState, useContext, useEffect } from 'react'; import React from 'react'; @@ -46,8 +46,8 @@ const routes = ( <> - - + + diff --git a/src/pages/Perfil.tsx b/src/pages/SeuPerfil.tsx similarity index 100% rename from src/pages/Perfil.tsx rename to src/pages/SeuPerfil.tsx diff --git a/src/pages/PerfilEditar.tsx b/src/pages/SeuPerfilEditar.tsx similarity index 100% rename from src/pages/PerfilEditar.tsx rename to src/pages/SeuPerfilEditar.tsx From e9cc78d2d36aa85689381db5d6ddae3f4bfc45a6 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 16:54:59 -0500 Subject: [PATCH 14/19] =?UTF-8?q?Revert=20"Renomeando=20p=C3=A1ginas=20de?= =?UTF-8?q?=20login"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 99d52ad29e9452fc363b3f2aaed48479962ef84b. --- src/App.tsx | 8 ++++---- src/pages/{SeuPerfil.tsx => Perfil.tsx} | 0 src/pages/{SeuPerfilEditar.tsx => PerfilEditar.tsx} | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename src/pages/{SeuPerfil.tsx => Perfil.tsx} (100%) rename src/pages/{SeuPerfilEditar.tsx => PerfilEditar.tsx} (100%) diff --git a/src/App.tsx b/src/App.tsx index 58bebcb..2053a62 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,8 +34,8 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; -import SeuPerfil from './pages/SeuPerfil'; -import SeuPerfilEditar from './pages/SeuPerfilEditar'; +import Perfil from './pages/Perfil'; +import PerfilEditar from './pages/PerfilEditar'; import { search, home, person } from 'ionicons/icons'; import { useState, useContext, useEffect } from 'react'; import React from 'react'; @@ -46,8 +46,8 @@ const routes = ( <> - - + + diff --git a/src/pages/SeuPerfil.tsx b/src/pages/Perfil.tsx similarity index 100% rename from src/pages/SeuPerfil.tsx rename to src/pages/Perfil.tsx diff --git a/src/pages/SeuPerfilEditar.tsx b/src/pages/PerfilEditar.tsx similarity index 100% rename from src/pages/SeuPerfilEditar.tsx rename to src/pages/PerfilEditar.tsx From 4c6aacfd124565533801bd64fcd939982bb43a04 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 17:19:26 -0500 Subject: [PATCH 15/19] =?UTF-8?q?Altera=C3=A7=C3=B5es=20para=20p=C3=A1gina?= =?UTF-8?q?=20din=C3=A2mica=20se=20=C3=A9=20p=C3=A1gina=20do=20pr=C3=B3pri?= =?UTF-8?q?o=20usu=C3=A1rio=20ou=20de=20outro=20usu=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 7 ++-- src/pages/Home.tsx | 52 +++-------------------------- src/pages/Perfil.tsx | 78 +++++++++++++++++++++++++------------------- 3 files changed, 55 insertions(+), 82 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2053a62..083c43a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,8 +12,9 @@ import { import { IonReactRouter } from '@ionic/react-router'; // importação das páginas -import Login from './pages/Login'; import Cadastro from './pages/Cadastro/Cadastro'; +import Login from './pages/Login'; +import Home from './pages/Home'; import CadastroVan from './pages/CadastroVan'; /* Core CSS required for Ionic components to work properly */ @@ -46,11 +47,13 @@ const routes = ( <> + + - + ) diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2169533..2028df5 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,56 +1,14 @@ import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react'; +import { useHistory } from 'react-router'; import { Action } from '../components/Action'; const Home: React.FC = () => { + const history = useHistory() + return ( - - - - - Como você deseja se cadastrar? - - - - -
- - Nome - - - - Sobrenome - - -
- - - E-mail - - - - - Data de nascimento - - - - - Senha - - - - Confirme a senha - - - - Cadastrar-se - - - - Ao se cadastrar, você aceita nossos Termos e Condições e nossa Política de Privacidade. - - - + + { history.push({ pathname: '/perfil/1' }); }}>Ir para o perfil de outra pessoa ); diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index fa137b9..8e86944 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -27,9 +27,19 @@ import sessionsService from '../services/functions/sessionsService' import usersService from '../services/functions/usersService' import { UserContext } from "../App"; -const Perfil: React.FC = () => { +interface ScanNewProps { + match: { + params: { + id: string; + } + } +} + +const Perfil: React.FC = (props) => { const user = useContext(UserContext); + const [isVisitor, setIsVisitor] = useState(true) + const [showToast, setShowToast] = useState(false); const [messageToast, setMessageToast] = useState(''); @@ -96,6 +106,10 @@ const Perfil: React.FC = () => { 'birth_date': userData.birth_date, 'bio': userData.bio }); + + if (!props.match.params.id) { + setIsVisitor(false) + } } } } @@ -155,39 +169,37 @@ const Perfil: React.FC = () => { - {/* - - - - */} + {/* // TODO, card de informações de contato */} - - Configurações - history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> - - Editar perfil - - - - Completar perfil - - history.push({ pathname: '/cadastro-van'})}> - - Cadastrar Van - - - - Pagamentos - - - - Avaliações - - - - Sair da conta - - + { !isVisitor ? + + Configurações + history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> + + Editar perfil + + + + Completar perfil + + history.push({ pathname: '/cadastro-van'})}> + + Cadastrar Van + + + + Pagamentos + + + + Avaliações + + + + Sair da conta + + : <> + } Date: Sat, 28 May 2022 17:37:55 -0500 Subject: [PATCH 16/19] =?UTF-8?q?Tela=20de=20perfil=20exibe=20outro=20usu?= =?UTF-8?q?=C3=A1rio=20corretamente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/Home.tsx | 2 +- src/pages/Perfil.tsx | 34 ++++++++++++++++++++++------------ 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 083c43a..6ef9e27 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -50,7 +50,7 @@ const routes = ( - + diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2028df5..1134d4d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -8,7 +8,7 @@ const Home: React.FC = () => { return ( - { history.push({ pathname: '/perfil/1' }); }}>Ir para o perfil de outra pessoa + { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa ); diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 8e86944..73b6ada 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -66,31 +66,41 @@ const Perfil: React.FC = (props) => { const logoff = () => { LocalStorage.clearToken() user.setIsLoggedIn(false); - history.push('/login') + history.push({ pathname: '/login' }); } useEffect(() => { const loadUserData = async () => { let userId = '' - + // verify if user is authenticated - const refreshSessionRes = await sessionsService.refreshSession() + if (props.match.params.id) { + userId = props.match.params.id + } else { + const refreshSessionRes = await sessionsService.refreshSession() - if (refreshSessionRes.error) { - redirectUserToLogin() - return - } - - if (refreshSessionRes.userId) { - userId = refreshSessionRes.userId + if (refreshSessionRes.error) { + redirectUserToLogin() + return + } + + if (refreshSessionRes.userId) { + userId = refreshSessionRes.userId + } } // get user info by ID const getByIdRes = await usersService.getById(userId) if (getByIdRes.error) { - setMessageToast(getByIdRes.error.errorMessage) - setShowToast(true) + if (isVisitor && props.match.params.id) { + setMessageToast('Usuário não existe!') + setShowToast(true) + history.push({ pathname: '/home' }) + } else { + setMessageToast(getByIdRes.error.errorMessage) + setShowToast(true) + } return } From 6fc81027b5c403d5d3276c01a821660e5468f675 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 18:18:32 -0500 Subject: [PATCH 17/19] =?UTF-8?q?P=C3=A1gina=20est=C3=A1tica=20de=20Comple?= =?UTF-8?q?tar=20Perfil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 32 ++++---- src/pages/Perfil.tsx | 2 +- src/pages/PerfilCompletar.tsx | 149 ++++++++++++++++++++++++++++++++++ src/pages/PerfilEditar.tsx | 6 -- 4 files changed, 167 insertions(+), 22 deletions(-) create mode 100644 src/pages/PerfilCompletar.tsx diff --git a/src/App.tsx b/src/App.tsx index 6ef9e27..cf440ae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,9 @@ import { IonReactRouter } from '@ionic/react-router'; import Cadastro from './pages/Cadastro/Cadastro'; import Login from './pages/Login'; import Home from './pages/Home'; +import Perfil from './pages/Perfil'; +import PerfilEditar from './pages/PerfilEditar'; +import PerfilCompletar from './pages/PerfilCompletar'; import CadastroVan from './pages/CadastroVan'; /* Core CSS required for Ionic components to work properly */ @@ -35,27 +38,26 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; -import Perfil from './pages/Perfil'; -import PerfilEditar from './pages/PerfilEditar'; import { search, home, person } from 'ionicons/icons'; -import { useState, useContext, useEffect } from 'react'; +import { useState, useContext } from 'react'; import React from 'react'; setupIonicReact(); const routes = ( - <> - - - - - - - - - - - ) +<> + + + + + + + + + + + +) interface IUserManager { setIsLoggedIn: Function; diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 73b6ada..a881373 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -188,7 +188,7 @@ const Perfil: React.FC = (props) => { Editar perfil - + history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}> Completar perfil diff --git a/src/pages/PerfilCompletar.tsx b/src/pages/PerfilCompletar.tsx new file mode 100644 index 0000000..bb06f01 --- /dev/null +++ b/src/pages/PerfilCompletar.tsx @@ -0,0 +1,149 @@ +import { +IonBackButton, +IonButton, +IonButtons, +IonCard, +IonCardContent, +IonContent, +IonHeader, +IonIcon, +IonItem, +IonLabel, +IonPage, +IonTitle, +IonToolbar +} from "@ionic/react"; +import React, { useEffect, useReducer, useState } from "react"; + +import './Perfil.css' +import { useHistory, useLocation } from "react-router"; +import { bookOutline, callOutline, documentTextOutline, homeOutline, logoWhatsapp } from "ionicons/icons"; + +import isEqual from 'lodash.isequal'; + +import * as usersRoutes from '../services/api/users'; + +import './Cadastro/Cadastro.css' + +interface userData { + name: string; + lastname: string; + email: string; + birth_date: string; + bio: string; +} + +interface LocationState { + userData: userData +} + +const items = [ + // TODO, CPF e CNH + { + icon: documentTextOutline, + label: 'Documentos', + description: 'Cadastre seus documentos para que seu perfil possa ser verificado.' + }, + // TODO, telefone e WhatsApp + { + icon: callOutline, + label: 'Informações de contato', + description: 'Cadastre seu número de telefone celular que para possam contatar você.' + }, + { + icon: homeOutline, + label: 'Endereço de residência', + description: 'Diga-nos seu endereço para que possa começar a solicitar vagas.' + }, + { + icon: bookOutline, + label: 'Instituição de ensino', + description: 'Diga-nos sua IES para que possa começar a solicitar vagas.' + }, +] + +const PerfilCompletar: React.FC = () => { + const history = useHistory(); + const location = useLocation(); + + const [showToast, setShowToast] = useState(false); + const [messageToast, setMessageToast] = useState(''); + + const [userData, setUserData] = useState({ + name: '', + lastname: '', + email: '', + birth_date: '', + bio: '', + }); + + const [inputValues, setInputValues] = useReducer( + (state: any, newState: any) => ({ ...state, ...newState }), + { + name: '', + lastname: '', + email: '', + birth_date: '', + bio: '', + } + ); + + useEffect(() => { + let userData = location.state.userData + + setUserData(location.state.userData) + setInputValues({ + 'name': userData.name, + 'lastname': userData.lastname, + 'email': userData.email, + 'birth_date': userData.birth_date, + 'bio': userData.bio + }); + }, [userData]); + + const handleUpdateUserData = () => { + usersRoutes.update(inputValues).then(response => { + if (response.status === 'error') { + setMessageToast(response.message); + setShowToast(true); + + return + } + + console.log(response) + }).catch((err) => { + setMessageToast(err); + setShowToast(true); + }) + } + + return ( + + + + Completar perfil + + + + + + + + { items.map((item, index) => { + return ( + + + + {item.label} + + + {item.description} + + ) + })} + + + ); +}; + +export default PerfilCompletar; diff --git a/src/pages/PerfilEditar.tsx b/src/pages/PerfilEditar.tsx index 7287b0f..e7c8d1f 100644 --- a/src/pages/PerfilEditar.tsx +++ b/src/pages/PerfilEditar.tsx @@ -112,12 +112,6 @@ const PerfilEditar: React.FC = () => { - - - Editar perfil - - - From ed3f999a24e8f6654f156388c676d04cb3f24024 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 18:20:29 -0500 Subject: [PATCH 18/19] Corrigindo nome Completar Perfil para Completar Cadastro --- src/App.tsx | 4 ++-- src/pages/{PerfilCompletar.tsx => CadastroCompletar.tsx} | 6 +++--- src/pages/Perfil.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/pages/{PerfilCompletar.tsx => CadastroCompletar.tsx} (96%) diff --git a/src/App.tsx b/src/App.tsx index cf440ae..daa740e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,7 @@ import Login from './pages/Login'; import Home from './pages/Home'; import Perfil from './pages/Perfil'; import PerfilEditar from './pages/PerfilEditar'; -import PerfilCompletar from './pages/PerfilCompletar'; +import CadastroCompletar from './pages/CadastroCompletar'; import CadastroVan from './pages/CadastroVan'; /* Core CSS required for Ionic components to work properly */ @@ -51,7 +51,7 @@ const routes = ( - + diff --git a/src/pages/PerfilCompletar.tsx b/src/pages/CadastroCompletar.tsx similarity index 96% rename from src/pages/PerfilCompletar.tsx rename to src/pages/CadastroCompletar.tsx index bb06f01..f1b6654 100644 --- a/src/pages/PerfilCompletar.tsx +++ b/src/pages/CadastroCompletar.tsx @@ -62,7 +62,7 @@ const items = [ }, ] -const PerfilCompletar: React.FC = () => { +const CadastroCompletar: React.FC = () => { const history = useHistory(); const location = useLocation(); @@ -121,7 +121,7 @@ const PerfilCompletar: React.FC = () => { - Completar perfil + Completar cadastro @@ -146,4 +146,4 @@ const PerfilCompletar: React.FC = () => { ); }; -export default PerfilCompletar; +export default CadastroCompletar; diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index a881373..331fab3 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -190,7 +190,7 @@ const Perfil: React.FC = (props) => { history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}> - Completar perfil + Completar cadastro history.push({ pathname: '/cadastro-van'})}> From 106b0a49ccd6f4ad2c1dc6a5af3d53a628fdc023 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Sat, 28 May 2022 18:22:22 -0500 Subject: [PATCH 19/19] . --- src/pages/Perfil.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 331fab3..f01d39e 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -161,7 +161,6 @@ const Perfil: React.FC = (props) => {
- Status: {/* TODO, deve vir do backend */} Passageiro