Merge pull request #5 from CloudAlb/feature/login

Feature/login

mock/db.json

@@ -0,0 +1,12 @@
+{
+  "cadastro-van": [
+    {
+      "id": 1,
+      "placa": "DBE2356",
+      "marca": "Fiat",
+      "modelo": "Ducatto",
+      "numPassageiros": 14,
+      "alugado": false
+    }
+  ]
+}

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",
+      "version": "5.9.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
-      "integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
+      "integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
+      "peer": true,
       "dependencies": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "^2.4.0",
-        "ionicons": "^6.0.0",
+        "ionicons": "^5.5.3",
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/@ionic/core/node_modules/ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
-      "dependencies": {
-        "@stencil/core": "~2.12.0"
-      }
-    },
-    "node_modules/@ionic/core/node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-      "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
-      }
-    },
     "node_modules/@ionic/react": {
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.0.13.tgz",
@@ -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==",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
-      "dev": true
     },
     "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",
+      "version": "5.9.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.9.4.tgz",
-      "integrity": "sha512-FY3+q3cIcyadQ6CWi/l/B57DlUO+MHOFCNl/4RjxCBqdwpgx1N4H2lLYGUk/V6j6AVjFNxef63hHr8z7xfTqVg==",
+      "integrity": "sha512-Ngz9yVT6fIiGdSxxBer8uJxP4w6PasvohYpLxhtMgYiWnyIu0vZra2ui3HrYukCzUo5/SbNPiUr1l7cj1E+7qw==",
+      "peer": true,
       "requires": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "^2.4.0",
-        "ionicons": "^6.0.0",
+        "ionicons": "^5.5.3",
         "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "ionicons": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-          "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
-          "requires": {
-            "@stencil/core": "~2.12.0"
-          },
-          "dependencies": {
-            "@stencil/core": {
-              "version": "2.12.1",
-              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-              "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A=="
-            }
-          }
-        }
       }
     },
     "@ionic/react": {
@@ -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==",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
-      "dev": true
     },
     "@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"
+      }
     }
   }
 }

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"

src/App.tsx

@@ -10,10 +10,15 @@ import {
   setupIonicReact
 } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Cadastro from './pages/Cadastro/Cadastro';
 
 // importação das páginas
+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 CadastroCompletar from './pages/CadastroCompletar';
+import CadastroVan from './pages/CadastroVan';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -33,26 +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';
 
-import sessionsService from './services/functions/sessionsService'
-
 setupIonicReact();
 
 const routes = (
-  <>
+<>
-    <Route exact path="/cadastro" component={Cadastro}></Route>
+  <Route exact path="/cadastro" component={Cadastro}></Route>
-    <Route exact path="/login" component={Login}></Route>
+  <Route exact path="/login" component={Login}></Route>
-    <Route exact path="/perfil" component={Perfil}></Route>
+  <Route exact path="/home" component={Home}></Route>
-    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+  <Route exact path="/perfil" component={Perfil}></Route>
-    <Route exact path="/">
+  <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
-      <Redirect to="/cadastro" />
+  <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
-    </Route>
+  <Route exact path="/usuario/:id" component={Perfil}></Route>
-  </>)
+  <Route exact path="/cadastro-van" component={CadastroVan}></Route>
+  <Route exact path="/">
+    <Redirect to="/login" />
+  </Route>
+</>)
 
 interface IUserManager {
   setIsLoggedIn: Function;
@@ -65,27 +70,12 @@ const user: IUserManager = {
 export const UserContext = React.createContext<IUserManager>(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(
   <IonApp>
     <IonReactRouter>

src/constants/routes/carsRoutes.ts

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

src/models/van.model.ts

@@ -0,0 +1,8 @@
+export type Van = {
+  id: number;
+  carPlate: string;
+  carBrand: string;
+  carModel: string;
+  maxPassengers: number;
+  isRent: string;
+};

src/pages/CadastroCompletar.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 CadastroCompletar: React.FC = () => {
+  const history = useHistory();
+  const location = useLocation<LocationState>();
+
+  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 (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Completar cadastro</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/perfil" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        { items.map((item, index) => {
+          return (
+            <IonCard button key={index}>
+              <IonItem>
+                <IonIcon icon={item.icon} slot="start" />
+                <IonLabel>{item.label}</IonLabel>
+              </IonItem>
+
+              <IonCardContent>{item.description}</IonCardContent>
+            </IonCard>
+          )
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CadastroCompletar;

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<boolean>(false);
+  const [toastMessage, setToastMessage] = useState<string>("");
+
+  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 (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Cadastro de veículo</IonTitle>
+          <IonButtons slot='start'>
+            <IonBackButton defaultHref='/perfil' />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <IonList lines="full" class="ion-no-margin">
+          <IonListHeader lines="full">
+            <IonLabel>Informações do veículo</IonLabel>
+          </IonListHeader>
+          <IonItem>
+            <IonLabel position='floating'>Placa </IonLabel>
+            <IonInput
+              type='text'
+              clearInput
+              placeholder='Digite a Placa do Veículo'
+              onIonInput={(e: any) => setInputValues({ carPlate: e.target.value })}
+            />
+          </IonItem>
+
+          {/* <IonItem>
+            <IonLabel position='floating'>Marca </IonLabel>
+            <IonInput
+              type='text'
+              clearInput
+              placeholder='Digite a Marca do Veículo'
+              onIonInput={(e: any) => setInputValues({ carBrand: e.target.value })}
+            />
+          </IonItem> */}
+
+          <IonItem>
+            <IonLabel>Marca</IonLabel>
+            <IonSelect value={inputValues.marca}>
+              { carModels ? carModels.map((carModel, index) => {
+                return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
+              }) : <></> }
+            </IonSelect>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position='floating'>Modelo </IonLabel>
+            <IonInput
+              type='text'
+              clearInput
+              placeholder='Digite o Modelo do Veículo'
+              onIonInput={(e: any) => setInputValues({ carModel: e.target.value })}
+            />
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position='floating'>
+              Número Máximo de Passageiros 
+            </IonLabel>
+            <IonInput
+              type='text'
+              clearInput
+              placeholder='Digite o número máximo de passageiros'
+              onIonInput={(e: any) => setInputValues({ maxPassengers: e.target.value })}
+            />
+          </IonItem>
+        </IonList>
+
+        <IonList lines="full" class="ion-no-margin">
+          <IonListHeader lines="full">
+            <IonLabel>Informações do locador</IonLabel>
+          </IonListHeader>
+
+          <IonItem>
+            <IonLabel>O veículo é alugado?</IonLabel>
+            <IonCheckbox checked={inputValues.isRented} onIonChange={e => setInputValues({ isRented: e.detail.checked })} />
+          </IonItem>
+
+          {inputValues.isRented && (
+            <div>
+            <IonItem>
+              <IonLabel position="stacked" />
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Nome completo do Locador'
+                onIonInput={(e: any) => setInputValues({ carRentalName: e.target.value })}
+              />
+
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Endereço do locador'
+                onIonInput={(e: any) => setInputValues({ postalCode: e.target.value })}
+              />
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Número'
+                onIonInput={(e: any) => setInputValues({ number: e.target.value })}
+              />
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Complemento'
+                onIonInput={(e: any) => setInputValues({ complement: e.target.value })}
+              />
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Cidade'
+                onIonInput={(e: any) => setInputValues({ city: e.target.value })}
+              />
+              <IonInput
+                type='text'
+                clearInput
+                placeholder='Estado'
+                onIonInput={(e: any) => setInputValues({ state: e.target.value })}
+              />
+            </IonItem>
+            </div>
+          )}
+
+          <div>
+            <IonButton
+              className='ion-margin-top'
+              expand='block'
+              onClick={handleSubmit}
+            >
+              Salvar
+            </IonButton>
+          </div>
+        </IonList>
+
+        <IonToast
+          color='danger'
+          isOpen={showToast}
+          onDidDismiss={() => setShowToast(false)}
+          message={toastMessage}
+          duration={2500}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CadastroVan;

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 (
     <IonPage>
-        <IonContent fullscreen>
+        <IonContent>
-            <IonGrid className="ion-padding">
+            <IonButton onClick={() => { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa</IonButton>
-                <IonRow>
-                    <IonCol size="12">
-                        <IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
-                    </IonCol>
-                </IonRow>
-                <IonRow>
-                    <IonCol size="12">
-                        <div id='nome-sobrenome'>
-                        <IonItem>
-                            <IonLabel position='floating'>Nome</IonLabel>
-                            <IonInput clearInput></IonInput>
-                        </IonItem>
-                        <IonItem>
-                            <IonLabel position='floating'>Sobrenome</IonLabel>
-                            <IonInput clearInput></IonInput>
-                        </IonItem>
-                        </div>
-                        
-                        <IonItem>
-                        <IonLabel position='floating'>E-mail</IonLabel>
-                        <IonInput clearInput type='email'></IonInput>
-                        </IonItem>
-
-                        <IonItem>
-                        <IonLabel position='stacked'>Data de nascimento</IonLabel>
-                        <IonInput type='date'></IonInput>
-                        </IonItem>
-                        
-                        <IonItem>
-                        <IonLabel position='floating'>Senha</IonLabel>
-                        <IonInput clearInput type='password'></IonInput>
-                        </IonItem>
-                        <IonItem>
-                        <IonLabel position='floating'>Confirme a senha</IonLabel>
-                        <IonInput clearInput type='password'></IonInput>
-                        </IonItem>
-                        
-                        <IonButton className="ion-margin-top" expand="block">Cadastrar-se</IonButton>
-                    </IonCol>
-                </IonRow>
-                <small className='ion-margin-top'>
-                Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
-                </small>
-                <Action message="Já tem conta?" text="Login" link="/login" />
-            </IonGrid>
         </IonContent>
     </IonPage>
   );

src/pages/Perfil.css

@@ -1,7 +1,14 @@
 #avatar {
     border-radius: 50%;
-    width: 64px;
+    width: 100px;
-    height: 64px;
+    height: 100px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#profile-status {
+    text-align: center;
 }
 
 IonIcon {

src/pages/Perfil.tsx

@@ -5,8 +5,6 @@ import {
   IonCardTitle,
   IonChip,
   IonContent,
-  IonFab,
-  IonFabButton,
   IonHeader,
   IonIcon,
   IonItem,
@@ -19,17 +17,29 @@ 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 { IonRow, IonCol } from "@ionic/react";
+import { cardOutline, carOutline, createOutline, exitOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
-import { createOutline } from "ionicons/icons";
 
 import './Perfil.css'
 import LocalStorage from "../LocalStorage";
 
 import sessionsService from '../services/functions/sessionsService'
 import usersService from '../services/functions/usersService'
+import { UserContext } from "../App";
+
+interface ScanNewProps {
+  match:  {
+    params: {
+      id: string;
+    }
+  }
+}
+
+const Perfil: React.FC<ScanNewProps> = (props) => {
+  const user = useContext(UserContext);
+
+  const [isVisitor, setIsVisitor] = useState(true)
 
-const Perfil: React.FC = () => {
   const [showToast, setShowToast] = useState(false);
   const [messageToast, setMessageToast] = useState('');
 
@@ -53,28 +63,44 @@ const Perfil: React.FC = () => {
     setShowToast(true);
   }
 
+  const logoff = () => {
+    LocalStorage.clearToken()
+    user.setIsLoggedIn(false);
+    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) {
+        if (refreshSessionRes.error) {
-        redirectUserToLogin()
+          redirectUserToLogin()
-        return
+          return
-      }
+        }
-  
+    
-      if (refreshSessionRes.userId) {
+        if (refreshSessionRes.userId) {
-        userId = refreshSessionRes.userId
+          userId = refreshSessionRes.userId
+        }
       }
       
       // get user info by ID
       const getByIdRes = await usersService.getById(userId)
   
       if (getByIdRes.error) {
-        setMessageToast(getByIdRes.error.errorMessage)
+        if (isVisitor && props.match.params.id) {
-        setShowToast(true)
+          setMessageToast('Usuário não existe!')
+          setShowToast(true)
+          history.push({ pathname: '/home' })
+        } else {
+          setMessageToast(getByIdRes.error.errorMessage)
+          setShowToast(true)
+        }
   
         return
       }
@@ -90,6 +116,10 @@ const Perfil: React.FC = () => {
             'birth_date': userData.birth_date,
             'bio': userData.bio
           });
+
+          if (!props.match.params.id) {
+            setIsVisitor(false)
+          }
         }
       }
     }
@@ -106,7 +136,6 @@ const Perfil: React.FC = () => {
 
     return () => { isMounted = false };
   }, []);
-  // }, [history]);
 
   return (
     <IonPage>
@@ -116,7 +145,7 @@ const Perfil: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen>
+      <IonContent>
         <IonHeader collapse="condense">
           <IonToolbar>
             <IonTitle size="large">Seu perfil</IonTitle>
@@ -125,17 +154,18 @@ const Perfil: React.FC = () => {
         
         <IonCard>
           <IonCardContent>
-            <IonRow>
+              {/* <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/> */}
-              <IonCol></IonCol>
+              <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/>
-              <IonCol>
-                <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
-              </IonCol>
-              <IonCol></IonCol>
-            </IonRow>
-
             <IonCardHeader>
               <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
             </IonCardHeader>
+
+            <div id='profile-status'>
+              <IonChip>
+                {/* TODO, deve vir do backend */}
+                <IonLabel color="primary">Passageiro</IonLabel>
+              </IonChip>
+            </div>
           </IonCardContent>
         </IonCard>
 
@@ -144,41 +174,41 @@ const Perfil: React.FC = () => {
             <IonCardTitle>Biografia</IonCardTitle>
           </IonCardHeader>
           <IonCardContent>
-          {inputValues.bio ? inputValues.bio : 'Sem biografia.'}
+          {inputValues.bio ? inputValues.bio : 'Sem biografia.' }
           </IonCardContent>
         </IonCard>
 
-        <IonCard>
+        {/* // TODO, card de informações de contato */}
-          <IonCardContent>
-            <IonLabel>Status do perfil</IonLabel>
-            <IonChip>
-              <IonLabel color="primary">Passageiro</IonLabel>
-            </IonChip>
-          </IonCardContent>
-        </IonCard>
 
-        <IonList>
+        { !isVisitor ?
-        <IonListHeader>Dashboard</IonListHeader>
+          <IonList>
-          <IonItem>
+            <IonListHeader>Configurações</IonListHeader>
-            <IonIcon></IonIcon>
+              <IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
-            <IonLabel>Confirmar perfil</IonLabel>
+                <IonIcon icon={createOutline} slot="start" />
-          </IonItem>
+                <IonLabel>Editar perfil</IonLabel>
-          <IonItem>
+              </IonItem>
-            <IonLabel>Cadastrar Van</IonLabel>
+              <IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
-          </IonItem>
+                <IonIcon icon={shieldCheckmarkOutline} slot="start" />
-          <IonItem>
+                <IonLabel>Completar cadastro</IonLabel>
-            <IonLabel>Pagamentos</IonLabel>
+              </IonItem>
-          </IonItem>
+              <IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}>
-          <IonItem>
+                <IonIcon icon={carOutline} slot="start" />
-            <IonLabel>Avaliações</IonLabel>
+                <IonLabel>Cadastrar Van</IonLabel>
-          </IonItem>
+              </IonItem>
-        </IonList>
+              <IonItem>
-
+                <IonIcon icon={cardOutline} slot="start" />
-        <IonFab vertical="bottom" horizontal="end" slot="fixed">
+                <IonLabel>Pagamentos</IonLabel>
-          <IonFabButton onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
+              </IonItem>
-            <IonIcon icon={createOutline} />
+              <IonItem>
-          </IonFabButton>
+                <IonIcon icon={starOutline} slot="start" />
-        </IonFab>
+                <IonLabel>Avaliações</IonLabel>
+              </IonItem>
+              <IonItem button onClick={logoff}>
+                <IonIcon icon={exitOutline} slot="start" />
+                <IonLabel>Sair da conta</IonLabel>
+              </IonItem>
+          </IonList> : <></>
+        }
 
         <IonToast
           color='danger'      

src/pages/PerfilEditar.tsx

@@ -111,13 +111,7 @@ const PerfilEditar: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen>
+      <IonContent>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Editar perfil</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        
         <IonGrid>
           <IonRow>
             <IonCol size="12">

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<any> {
+    return await this.api
+      .post(url, body)
+      .then(res => {
+        console.log(res.data);
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  };
+}

src/services/api/cars.ts

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

src/services/functions/carsService.ts

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