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

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;