Ajustes na estrutura do projeto | Tela do cadastro de vans com validacao

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

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

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 */

src/models/van.model.ts

@@ -1,7 +1,8 @@
 export type Van = {
   id: number;
-  placa: string;
+  carPlate: string;
-  modelo: string;
+  carBrand: string;
-  numPassageiros: number;
+  carModel: string;
-  alugado: boolean
+  maxPassengers: number;
-}
+  isRent: string;
+};

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 (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar color='primary'>
+          <IonTitle>VanMos App v1.0</IonTitle>
+          <IonButtons slot='start'>
+            <IonBackButton icon={arrowBack} defaultHref='cadastro-van'>
+              Return
+            </IonBackButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className='ion-padding'>
+        <form onSubmit={handleSubmit(onSubmit)} className='ion-padding'>
+          <IonCardTitle>Cadastro do Veículo</IonCardTitle>
+
+          <IonItem>
+            <IonLabel position='floating'>Placa *</IonLabel>
+            <IonInput
+              {...register("carPlate", { required: "Placa é obrigatório" })}
+              type='text'
+              placeholder='Digite a Placa do Veículo'
+            />
+          </IonItem>
+          <ErrorMessage
+            errors={errors}
+            name='carPlate'
+            as={<div style={{ color: "red" }} />}
+          />
+
+          <IonItem>
+            <IonLabel position='floating'>Marca *</IonLabel>
+            <IonInput
+              {...register("carBrand", { required: "Marca é obrigatório" })}
+              type='text'
+              placeholder='Digite a Marca do Veículo'
+            />
+          </IonItem>
+          <ErrorMessage
+            errors={errors}
+            name='carBrand'
+            as={<div style={{ color: "red" }} />}
+          />
+
+          <IonItem>
+            <IonLabel position='floating'>Modelo *</IonLabel>
+            <IonInput
+              {...register("carModel", { required: "Modelo é obrigatório" })}
+              type='text'
+              placeholder='Digite o Modelo do Veículo'
+            />
+          </IonItem>
+          <ErrorMessage
+            errors={errors}
+            name='carModel'
+            as={<div style={{ color: "red" }} />}
+          />
+
+          <IonItem>
+            <IonLabel position='floating'>
+              Número Máximo de Passageiros *
+            </IonLabel>
+            <IonInput
+              {...register("maxPassengers", {
+                required: "Número máximo de passageiros é obrigatório"
+              })}
+              type='text'
+              placeholder='Digite o número máximo de passageiros'
+            />
+          </IonItem>
+          <ErrorMessage
+            errors={errors}
+            name='maxPassengers'
+            as={<div style={{ color: "red" }} />}
+          />
+
+          <IonItem>
+            <IonText>
+              <div style={{ padding: 8, paddingLeft: 0, fontWeight: "bold" }}>
+                Veículo alugado?
+              </div>
+              <div>
+                <IonRadioGroup
+                  style={{ display: "flex", width: "100%" }}
+                  {...register("isRent", { required: true })}
+                  defaultValue={getValues("isRent")}
+                  onIonChange={e => setValue("isRent", e.detail.value)}
+                >
+                  <IonItem lines='none' style={{ flexGrow: 2 }}>
+                    <IonLabel position='fixed'>Sim</IonLabel>
+                    <IonRadio value='YES' />
+                  </IonItem>
+
+                  <IonItem style={{ flexGrow: 2 }} lines='none'>
+                    <IonLabel position='fixed'>Não</IonLabel>
+                    <IonRadio value='NO' />
+                  </IonItem>
+                </IonRadioGroup>
+              </div>
+            </IonText>
+          </IonItem>
+          {errors.isRent && (
+            <span className='error-msg'>This field is required</span>
+          )}
+
+          {getValues("isRent") === "YES" && <div>Teste Novos Campos</div>}
+
+          <div>
+            <IonButton className='ion-margin-top' type='submit' expand='block'>
+              Salvar
+            </IonButton>
+          </div>
+        </form>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CadastroVan;

src/pages/Vans.tsx

@@ -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<string>("");
-  const [marca, setMarca] = useState<string>("");
-  const [modelo, setModelo] = useState<string>("");
-  const [numPassageiros, setNumPassageiros] = useState("");
-  const [tipoSelecionado, setTipoSelecionado] = useState<string>("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 (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle></IonTitle>
-          <IonButtons slot='start'>
-            <IonBackButton
-              text={""}
-              icon={arrowBack}
-              defaultHref='cadastro-van'
-            >
-              Return
-            </IonBackButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
-
-      <IonContent className='ion-padding'>
-        <form className='ion-padding'>
-          <IonCardTitle>Cadastro da Veículo</IonCardTitle>
-
-          <IonItem>
-            <IonLabel position='floating'>Placa *</IonLabel>
-            <IonInput
-              type='text'
-              required
-              value={placa}
-              placeholder='Digite a placa do Veículo'
-              onIonChange={placaChangeHandle}
-              //onIonChange={e => setPlaca(e.detail.value!)}
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position='floating'>Marca *</IonLabel>
-            <IonInput
-              type='text'
-              required
-              value={marca}
-              placeholder='Digite a Marca do Veículo'
-              onIonChange={marcaChangeHandle}
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position='floating'>Modelo *</IonLabel>
-            <IonInput
-              type='text'
-              required
-              value={modelo}
-              placeholder='Digite o Modelo do Veículo'
-              onIonChange={modeloChangeHandle}
-            ></IonInput>
-          </IonItem>
-
-          <IonItem>
-            <IonLabel position='floating'>
-              Digite o número total de passageiros *
-            </IonLabel>
-            <IonInput
-              type='number'
-              required
-              value={numPassageiros}
-              placeholder='Digite o número total de passageiros'
-              onIonChange={numPassageirosChangeHandle}
-            ></IonInput>
-          </IonItem>
-
-          <IonList>
-            <IonRadioGroup
-              value={tipoSelecionado}
-              onIonChange={tipoSelecionadoChangeHandle}
-            >
-              <IonListHeader>
-                <IonLabel>Veículo Alugado ?</IonLabel>
-              </IonListHeader>
-
-              <IonItem>
-                <IonLabel>Sim</IonLabel>
-                <IonRadio slot='start' value='Sim'></IonRadio>
-              </IonItem>
-
-              <IonItem>
-                <IonLabel>Não</IonLabel>
-                <IonRadio slot='start' value='Não'></IonRadio>
-              </IonItem>
-            </IonRadioGroup>
-          </IonList>
-
-          <IonButton className='ion-margin-top' type='submit' expand='block'>
-            Salvar
-          </IonButton>
-        </form>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Vans;

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);
+      });
+  };
+}