diff --git a/mock/db.json b/mock/db.json new file mode 100644 index 0000000..6b1251a --- /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-lock.json b/package-lock.json index 7300e4a..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", @@ -46,7 +47,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", @@ -2403,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", @@ -2418,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", @@ -2476,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", @@ -3171,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" }, @@ -3834,8 +3848,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 +10689,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 +11102,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 +13098,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", @@ -15126,6 +15154,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", @@ -16671,6 +16704,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": { @@ -18316,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", @@ -18328,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": { @@ -18364,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", @@ -18897,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", @@ -19412,8 +19470,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", @@ -24597,6 +24654,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", @@ -24915,6 +24977,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", @@ -26270,6 +26337,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", @@ -27834,6 +27906,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", @@ -29093,6 +29170,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 39f79ee..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", @@ -41,10 +42,12 @@ "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", + "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 d2d3f4d..bae94ce 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,10 +10,11 @@ import { setupIonicReact } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; -import Cadastro from './pages/Cadastro/Cadastro'; // importação das páginas import Login from './pages/Login'; +import Cadastro from './pages/Cadastro/Cadastro'; +import CadastroVan from './pages/CadastroVan'; /* Core CSS required for Ionic components to work properly */ import '@ionic/react/css/core.css'; @@ -49,6 +50,7 @@ const routes = ( + 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/models/van.model.ts b/src/models/van.model.ts new file mode 100644 index 0000000..ae90e2b --- /dev/null +++ b/src/models/van.model.ts @@ -0,0 +1,8 @@ +export type Van = { + id: number; + carPlate: string; + carBrand: string; + carModel: string; + maxPassengers: number; + isRent: string; +}; diff --git a/src/pages/CadastroVan.css b/src/pages/CadastroVan.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx new file mode 100644 index 0000000..7862f9d --- /dev/null +++ b/src/pages/CadastroVan.tsx @@ -0,0 +1,376 @@ +import { + IonToast, + IonItem, + IonLabel, + IonInput, + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonPage, + IonToolbar, + IonTitle, + IonList, + IonCheckbox, + IonListHeader, + IonSelect, + IonSelectOption, +} from "@ionic/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 }), + { + carPlate: '', + carBrand: '', + carModel: '', + maxPassengers: 1, + isRent: false, + carRentalName: '', + postalCode: '', + street: '', + number: '', + complement: '', + city: '', + state: '', + } + ); + + // 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, + isRented: inputValues.isRented, + carRentalName: inputValues.carRentalName, + carRentalAddress: { + postalCode: inputValues.postalCode, + street: inputValues.street, + number: inputValues.number, + complement: inputValues.complement, + city: inputValues.city, + state: inputValues.state, + } + }; + + const clearRentalData = () => { + setInputValues({ + carPlate: '', + carBrand: '', + carModel: '', + maxPassengers: 1, + isRent: false, + carRentalName: '', + postalCode: '', + street: '', + number: '', + complement: '', + city: '', + state: '', + }) + }; + + 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; + } + + 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.isRented) { + 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); + } + }; + + 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 ( + + + + Cadastro de veículo + + + + + + + + + + Informações do veículo + + + Placa + setInputValues({ carPlate: e.target.value })} + /> + + + {/* + Marca + setInputValues({ carBrand: e.target.value })} + /> + */} + + + Marca + + { carModels ? carModels.map((carModel, index) => { + return ({carModel.name}) + }) : <> } + + + + + Modelo + setInputValues({ carModel: e.target.value })} + /> + + + + + Número Máximo de Passageiros + + setInputValues({ maxPassengers: e.target.value })} + /> + + + + + + Informações do locador + + + + O veículo é alugado? + setInputValues({ isRented: e.detail.checked })} /> + + + {inputValues.isRented && ( +
+ + + setInputValues({ carRentalName: 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 })} + /> + +
+ )} + +
+ + Salvar + +
+ + + setShowToast(false)} + message={toastMessage} + duration={2500} + /> + + + ); +}; + +export default CadastroVan; diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index 64d64ec..3655c6b 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -113,7 +113,7 @@ const Perfil: React.FC = () => { - + Seu perfil @@ -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 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 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 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 };