Cadastrando no banco

package.json

@@ -19,12 +19,12 @@
     "@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-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
@@ -65,7 +65,8 @@
     ]
   },
   "devDependencies": {
-    "@capacitor/cli": "3.4.3"
+    "@capacitor/cli": "3.4.3",
+    "react-scripts": "5.0.1"
   },
   "description": "An Ionic project"
 }

src/config/api.config.ts

@@ -0,0 +1,18 @@
+import environment from "../environments/environment";
+
+function getBaseUrl() {
+  const { hostname } = window.location;
+  const { url } = environment;
+
+  let apiUrl = null;
+  
+  // if (hostname === '') {
+  //   apiUrl = url.prod;
+  // } else {
+    apiUrl = url.local;
+  // }
+
+  return apiUrl;
+}
+
+export default { getBaseUrl };

src/environments/environment.ts

@@ -0,0 +1,6 @@
+export default {
+    url: {
+      prod: 'https://projeto-integrado-f.herokuapp.com',
+      local: 'http://localhost:3000'
+    },
+}

src/pages/Cadastro.tsx

@@ -1,25 +1,66 @@
 import { IonIcon, IonItem, IonLabel, IonInput, IonBackButton, IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonToolbar } from '@ionic/react';
 import { arrowBack, logoFacebook, mail } from 'ionicons/icons';
-// import CustomField from '../components/CustomField';
 import { Action } from '../components/Action';
 import { useEffect, useState } from 'react';
-// import { validateForm } from '../data/utils';
-import { useParams } from 'react-router';
+import { useHistory, useParams } from 'react-router';
 import './Cadastro.css';
 import ModalExample from '../components/Email';
+import * as UsersService from '../services/users'
 
 const Cadastro: React.FC = () => {
+  const history = useHistory();
+  
   const [ errors, setErrors ] = useState(false);
-  const createAccount = () => {
 
-    // const errors = validateForm();
-    setErrors(errors);
+  const [email, setEmail] = useState({});
+  const [password, setPassword] = useState<string>('');
+  const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [firstName, setFirstName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>('');
+  const [birthDate, setBirthDate] = useState<string>('');
 
-    // if (!errors.length) {
+  const handleSubmit = async () => {
+    // setDisableSubmitButton(true)
+    // event.preventDefault();
+    // const data = new FormData(event.currentTarget);
 
-        //  Submit your form here
-    // }
-  }
+    const signUpForm = {
+      name: firstName,
+      last_name: lastName,
+      email: email,
+      password: password,
+      birth_date: birthDate
+    }
+
+    console.log(signUpForm);
+
+    await UsersService.create(signUpForm).catch(error => {
+      if (!error.response) return
+
+      if (error.response.data.message) {
+        // setAlertContent(error.response.data.message);
+      } else {
+        // setAlertContent('Houve um erro ao realizar o cadastro.');
+      }
+      
+      // setAlertSeverity('error');
+      // setAlert(true);
+      // setDisableSubmitButton(false)
+    }).then(response => {
+      if (!response) return;
+  
+      history.push(
+        {
+          pathname: '/home',
+          state: {
+            detail: 'signedUp',
+            alertSeverity: 'success',
+            alertContent: 'Usuário cadastrado com sucesso!'
+          }
+        }
+      )
+    });
+  };
 
   const { name } = useParams<{ name: string; }>();
 
@@ -49,37 +90,63 @@ const Cadastro: React.FC = () => {
             </IonItem> */}
             <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>
-                    
+                  <div id='nome-sobrenome'>
                     <IonItem>
-                      <IonLabel position='floating'>E-mail</IonLabel>
-                      <IonInput clearInput type='email'></IonInput>
+                      <IonLabel position='floating'>Nome</IonLabel>
+                      <IonInput 
+                        type='text'
+                        clearInput
+                        onIonInput={(e: any) => setFirstName(e.target.value)}
+                      >
+                      </IonInput>
                     </IonItem>
+                    <IonItem>
+                      <IonLabel position='floating'>Sobrenome</IonLabel>
+                      <IonInput 
+                        clearInput
+                        onIonInput={(e: any) => setLastName(e.target.value)}
+                      >
+                      </IonInput>
+                    </IonItem>
+                  </div>
+                  
+                  <IonItem>
+                    <IonLabel position='floating'>E-mail</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='email'
+                      onIonInput={(e: any) => setEmail(e.target.value)}
+                    >
+                    </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" onClick={ createAccount }>Cadastrar-se</IonButton>
+                  <IonItem>
+                    <IonLabel position='stacked'>Data de nascimento</IonLabel>
+                    <IonInput 
+                      type='date'
+                      onIonInput={(e: any) => setBirthDate(e.target.value)}
+                    >
+                    </IonInput>
+                  </IonItem>
+                  
+                  <IonItem>
+                    <IonLabel position='floating'>Senha</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='password'
+                      onIonInput={(e: any) => setPassword(e.target.value)}
+                    ></IonInput>
+                  </IonItem>
+                  <IonItem>
+                    <IonLabel position='floating'>Confirme a senha</IonLabel>
+                    <IonInput 
+                      clearInput 
+                      type='password'
+                      onIonInput={(e: any) => setConfirmPassword(e.target.value)}
+                    ></IonInput>
+                  </IonItem>
+                  
+                  <IonButton className="ion-margin-top" expand="block" onClick={ handleSubmit }>Cadastrar-se</IonButton>
                 </IonCol>
             </IonRow>
             <small className='ion-margin-top'>
@@ -92,4 +159,4 @@ const Cadastro: React.FC = () => {
   );
 };
 
-export default Cadastro;
+export default Cadastro;

src/services/api.ts

@@ -0,0 +1,8 @@
+import axios from 'axios';
+import apiConfig from '../config/api.config';
+
+const instance = axios.create({
+  baseURL: apiConfig.getBaseUrl(),
+});
+
+export default instance;

src/services/users.ts

@@ -0,0 +1,46 @@
+import instance from '../services/api';
+// import LocalStorage from '../LocalStorage';
+
+let token:string;
+let header:string;
+
+function updateHeader() {
+//   token = LocalStorage.getToken();
+  header = `{
+    "Accept": 'application/json',
+    "Content-Type": 'application/json',
+    "Authorization": 'Bearer ' + token
+  }`
+}
+
+export interface CadastroResponse {
+    message?: string;
+  
+    token?: {
+      token: string;
+    };
+  
+    error?: string;
+}
+
+export interface CadastroRequest {
+    name: string;
+    username: string;
+    email: string;
+    birth_date: string;
+    password: string;
+}
+
+// export async function get(cpf) {
+//   updateHeader();
+
+//   const response = await instance.get(userRoutes.get.url + `/${cpf}`, { headers: header });
+//   return response.data;
+// }
+
+export async function create(CadastroRequest: any) {
+  updateHeader();
+
+  const response = await instance.post("http://localhost:3333/users/", CadastroRequest);
+  return response.data;
+}