Página estática de Completar Perfil

src/App.tsx

@@ -15,6 +15,9 @@ import { IonReactRouter } from '@ionic/react-router';
 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 PerfilCompletar from './pages/PerfilCompletar';
 import CadastroVan from './pages/CadastroVan';
 
 /* Core CSS required for Ionic components to work properly */
@@ -35,27 +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';
 
 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="/home" component={Home}></Route>
+  <Route exact path="/home" component={Home}></Route>
-    <Route exact path="/perfil" component={Perfil}></Route>
+  <Route exact path="/perfil" component={Perfil}></Route>
-    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+  <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
-    <Route exact path="/usuario/:id" component={Perfil}></Route>
+  <Route exact path="/perfil/completar" component={PerfilCompletar}></Route>
-    <Route exact path="/cadastro-van" component={CadastroVan}></Route>
+  <Route exact path="/usuario/:id" component={Perfil}></Route>
-    <Route exact path="/">
+  <Route exact path="/cadastro-van" component={CadastroVan}></Route>
-      <Redirect to="/login" />
+  <Route exact path="/">
-    </Route>
+    <Redirect to="/login" />
-  </>)
+  </Route>
+</>)
 
 interface IUserManager {
   setIsLoggedIn: Function;

src/pages/Perfil.tsx

@@ -188,7 +188,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
                 <IonIcon icon={createOutline} slot="start" />
                 <IonLabel>Editar perfil</IonLabel>
               </IonItem>
-              <IonItem>
+              <IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
                 <IonIcon icon={shieldCheckmarkOutline} slot="start" />
                 <IonLabel>Completar perfil</IonLabel>
               </IonItem>

src/pages/PerfilCompletar.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 PerfilCompletar: 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 perfil</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 PerfilCompletar;

src/pages/PerfilEditar.tsx

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