Merge pull request #3 from CloudAlb/feature/perfil

Feature/perfil

src/App.tsx

@@ -1,12 +1,16 @@
 import { Redirect, Route } from 'react-router-dom';
 import {
   IonApp,
+  IonIcon,
+  IonLabel,
   IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
   setupIonicReact
 } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import Cadastro from './pages/Cadastro/Cadastro';
-import MainPages from './pages/MainPages';
 
 // importação das páginas
 import Login from './pages/Login';
@@ -31,26 +35,78 @@ import '@ionic/react/css/display.css';
 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 React from 'react';
 
 setupIonicReact();
 
-const App: React.FC = () => (
+const routes = (
+  <>
+    <Route exact path="/cadastro" component={Cadastro}></Route>
+    <Route exact path="/login" component={Login}></Route>
+    <Route exact path="/perfil" component={Perfil}></Route>
+    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+    <Route exact path="/">
+      <Redirect to="/cadastro" />
+    </Route>
+  </>)
+
+interface IUserManager {
+  setIsLoggedIn: Function;
+}
+
+const user: IUserManager = {
+  setIsLoggedIn: () => {}
+};
+
+export const UserContext = React.createContext<IUserManager>(user);
+
+const IonicApp: React.FC = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const user = useContext(UserContext);
+
+  user.setIsLoggedIn = setIsLoggedIn;
+
+  useEffect(() => {
+    // TODO, verifica se usuário está logado
+    // fazer com serviço externo (evita duplicações)
+  })
+
+  return(
   <IonApp>
     <IonReactRouter>
+        {isLoggedIn ? (
+          <IonTabs>
+            <IonRouterOutlet>{routes}</IonRouterOutlet>
             
-        <IonRouterOutlet>
+            <IonTabBar slot="bottom">
-          <Route exact path="/mainpages" component={MainPages}></Route>
+              <IonTabButton tab="buscar" href="/buscar">
-          <Route exact path="/cadastro" component={Cadastro}></Route>
+                <IonIcon icon={search} />
-          <Route exact path="/login" component={Login}></Route>
+                <IonLabel>Buscar</IonLabel>
-          <Route exact path="/perfil" component={Perfil}></Route>
+              </IonTabButton>
-          <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+              <IonTabButton tab="home" href="/home">
-          <Route exact path="/">
+                <IonIcon icon={home} />
-            <Redirect to="/cadastro" />
+                <IonLabel>Home</IonLabel>
-          </Route>
+              </IonTabButton>
-        </IonRouterOutlet>
+              <IonTabButton tab="perfil" href="/perfil">
-        
+                <IonIcon icon={person} />
-    </IonReactRouter>
+                <IonLabel>Perfil</IonLabel>
+              </IonTabButton>
+            </IonTabBar>
+          </IonTabs>
+        ) : (<IonRouterOutlet>{routes}</IonRouterOutlet>)}
+      </IonReactRouter>
   </IonApp>
-);
+  )
+}
+
+const App: React.FC = () => {
+  return (
+    <UserContext.Provider value={user}>
+      <IonicApp />
+    </UserContext.Provider>
+  );
+};
 
 export default App;

src/constants/routes/usersRoutes.ts

@@ -1,7 +1,7 @@
 const usersRoutesDefault = '/users';
 const usersRoutes = {
   create: {
-    url: `${usersRoutesDefault}/create`
+    url: `${usersRoutesDefault}`
   },
   get: {
     url: `${usersRoutesDefault}`

src/pages/Cadastro/Cadastro.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import './Cadastro.css';
 import ModalExample from '../../components/Email';
-import * as UsersService from '../../services/users'
+import * as UsersService from '../../services/api/users'
 
 const Cadastro: React.FC = () => {
   const history = useHistory();
@@ -70,7 +70,8 @@ const Cadastro: React.FC = () => {
     if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
       if(password === confirmPassword){
         const signUpForm = {
-          name: firstName +' '+ lastName,
+          name: firstName,
+          lastname: lastName,
           email: email,
           birth_date: birthDate,
           password: password
@@ -113,7 +114,7 @@ const Cadastro: React.FC = () => {
 			<IonHeader>
 				<IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton text={''} icon={arrowBack} defaultHref='mainpages' />
+            <IonBackButton text={''} icon={arrowBack} defaultHref='login' />
           </IonButtons>
 				</IonToolbar>
 			</IonHeader>

src/pages/Login.tsx

@@ -5,7 +5,7 @@ import {
   IonTitle,
   IonToolbar
 } from "@ionic/react";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { IonGrid, IonRow, IonCol, IonToast } from "@ionic/react";
 import { useHistory } from "react-router-dom";
 import {
@@ -15,9 +15,10 @@ import {
   IonButton,
 } from "@ionic/react";
 
-import * as sessionRoutes from '../services/session';
+import * as sessionRoutes from '../services/api/session';
 import LocalStorage from '../LocalStorage';
 import { Action } from "../components/Action";
+import { UserContext } from "../App";
 
 const Page: React.FC = () => {
   const [showToast, setShowToast] = useState(false);
@@ -27,6 +28,8 @@ const Page: React.FC = () => {
   const [email, setEmail] = useState<string>("matheusalb3213@gmail.com");
   const [password, setPassword] = useState<string>("12345678");
 
+  const user = useContext(UserContext);
+
   function validateEmail(email: string) {
     const re =
       // eslint-disable-next-line no-control-regex
@@ -84,6 +87,8 @@ const Page: React.FC = () => {
 
       LocalStorage.setToken(token);
 
+      user.setIsLoggedIn(true);
+
       history.push({ pathname: '/home' });
     }).catch(error => {
       // if (!error.response) return

src/pages/Perfil.css

@@ -1,3 +1,9 @@
 #avatar {
     border-radius: 50%;
+    width: 64px;
+    height: 64px;
+}
+
+IonIcon {
+    color: blue;
 }

src/pages/Perfil.tsx

@@ -3,11 +3,17 @@ import {
   IonCardContent,
   IonCardHeader,
   IonCardTitle,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
+  IonGrid,
   IonHeader,
   IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
   IonPage,
   IonTitle,
   IonToast,
@@ -18,11 +24,12 @@ import React, { useState, useEffect, useReducer } from "react";
 import { IonRow, IonCol } from "@ionic/react";
 import { createOutline } from "ionicons/icons";
 
-import * as sessionRoutes from '../services/session';
+import * as sessionRoutes from '../services/api/session';
-import * as usersRoutes from '../services/users';
+import * as usersRoutes from '../services/api/users';
 
 import './Perfil.css'
 import LocalStorage from "../LocalStorage";
+import { refreshSession } from "../services/refreshSession";
 
 const Perfil: React.FC = () => {
   const [showToast, setShowToast] = useState(false);
@@ -32,8 +39,10 @@ const Perfil: React.FC = () => {
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
       name: '',
+      lastname: '',
+      email: '',
+      birth_date: '',
       bio: '',
-      email: ''
     }
   );
 
@@ -50,18 +59,13 @@ const Perfil: React.FC = () => {
     const loadUserData = async () => {
       let userId = ''
 
-      await sessionRoutes.refresh().then(response => {
+      // verify if user is authenticated
-        if (response.status === 'error') {
+      const refreshedSession = await refreshSession()
-          setMessageToast(response.message);
-          setShowToast(true);
 
-          return
+      if (refreshedSession.error) {
-        }
-  
-        userId = response.userId
-      }).catch(() => {
         redirectUserToLogin()
-      })
+        return
+      }
   
       await usersRoutes.getById(userId).then(response => {
         if (response.status === 'error') {
@@ -73,7 +77,13 @@ const Perfil: React.FC = () => {
   
         const userData = response.data
   
-        setInputValues({'name': userData.name, 'bio': userData.bio, 'email': userData.email});
+        setInputValues({
+          'name': userData.name,
+          'lastname': userData.lastname,
+          'email': userData.email,
+          'birth_date': userData.birth_date,
+          'bio': userData.bio
+        });
       }).catch(() => {
         redirectUserToLogin()
       })
@@ -115,7 +125,7 @@ const Perfil: React.FC = () => {
             </IonRow>
 
             <IonCardHeader>
-              <IonCardTitle class="ion-text-center">{inputValues.name}</IonCardTitle>
+              <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
             </IonCardHeader>
           </IonCardContent>
         </IonCard>
@@ -129,6 +139,32 @@ const Perfil: React.FC = () => {
           </IonCardContent>
         </IonCard>
 
+        <IonCard>
+          <IonCardContent>
+            <IonLabel>Status do perfil</IonLabel>
+            <IonChip>
+              <IonLabel color="primary">Passageiro</IonLabel>
+            </IonChip>
+          </IonCardContent>
+        </IonCard>
+
+        <IonList>
+        <IonListHeader>Dashboard</IonListHeader>
+          <IonItem>
+            <IonIcon></IonIcon>
+            <IonLabel>Confirmar perfil</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cadastrar Van</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Pagamentos</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Avaliações</IonLabel>
+          </IonItem>
+        </IonList>
+
         <IonFab vertical="bottom" horizontal="end" slot="fixed">
           <IonFabButton onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
             <IonIcon icon={createOutline} />

src/pages/PerfilEditar.tsx

@@ -25,12 +25,16 @@ import { saveOutline } from "ionicons/icons";
 
 import isEqual from 'lodash.isequal';
 
-import * as usersRoutes from '../services/users';
+import * as usersRoutes from '../services/api/users';
+
+import './Cadastro/Cadastro.css'
 
 interface userData {
   name: string;
-  bio: string;
+  lastname: string;
   email: string;
+  birth_date: string;
+  bio: string;
 }
 
 interface LocationState {
@@ -46,22 +50,34 @@ const PerfilEditar: React.FC = () => {
 
   const [userData, setUserData] = useState({
     name: '',
+    lastname: '',
+    email: '',
+    birth_date: '',
     bio: '',
-    email: ''
   });
 
   const [inputValues, setInputValues] = useReducer(
     (state: any, newState: any) => ({ ...state, ...newState }),
     {
       name: '',
+      lastname: '',
+      email: '',
+      birth_date: '',
       bio: '',
-      email: ''
     }
   );
 
   useEffect(() => {
+    let userData = location.state.userData
+
     setUserData(location.state.userData)
-    setInputValues({'name': userData.name, 'email': userData.email, 'bio': userData.bio});
+    setInputValues({
+      'name': userData.name,
+      'lastname': userData.lastname,
+      'email': userData.email,
+      'birth_date': userData.birth_date,
+      'bio': userData.bio
+    });
   }, [userData]);
 
   const handleUpdateUserData = () => {
@@ -90,7 +106,7 @@ const PerfilEditar: React.FC = () => {
         <IonToolbar>
           <IonTitle>Editar perfil</IonTitle>
           <IonButtons slot="start">
-            <IonBackButton defaultHref="perfil" />
+            <IonBackButton defaultHref="/perfil" />
           </IonButtons>
         </IonToolbar>
       </IonHeader>
@@ -104,15 +120,27 @@ const PerfilEditar: React.FC = () => {
         
         <IonGrid>
           <IonRow>
-            <IonCol>
+            <IonCol size="12">
-              <IonItem>
+              <div id='nome-sobrenome'>
-                <IonLabel position="stacked"> Nome completo</IonLabel>
+                <IonItem>
-                <IonInput
+                  <IonLabel position="stacked"> Nome</IonLabel>
-                  type="text"
+                  <IonInput
-                  value={inputValues.name}
+                    type="text"
-                  onIonChange={(e) => setInputValues({'name': e.detail.value!})}
+                    value={inputValues.name}
-                ></IonInput>
+                    onIonChange={(e) => setInputValues({'name': e.detail.value!})}
-              </IonItem>
+                  ></IonInput>
+                </IonItem>
+
+                <IonItem>
+                  <IonLabel position="stacked"> Sobrenome</IonLabel>
+                  <IonInput
+                    type="text"
+                    value={inputValues.lastname}
+                    onIonChange={(e) => setInputValues({'lastname': e.detail.value!})}
+                  ></IonInput>
+                </IonItem>
+              </div>
+
               <IonItem>
                 <IonLabel position="stacked"> Email</IonLabel>
                 <IonInput
@@ -121,6 +149,17 @@ const PerfilEditar: React.FC = () => {
                   onIonChange={(e) => setInputValues({'email': e.detail.value!})}
                 ></IonInput>
               </IonItem>
+
+              <IonItem>
+                <IonLabel position='stacked'>Data de nascimento</IonLabel>
+                <IonInput 
+                  type='date'
+                  value={inputValues.birth_date}
+                  onIonInput={(e: any) => setInputValues({'birth_date': e.detail.value!})}
+                >
+                </IonInput>
+              </IonItem>
+
               <IonItem>
                 <IonLabel position="stacked"> Biografia</IonLabel>
                 <IonTextarea

src/services/api/api.ts

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

src/services/api/session.ts

@@ -1,6 +1,6 @@
-import instance from '../services/api';
+import instance from './api';
-import sessionRoutes from '../constants/routes/sessionRoutes';
+import sessionRoutes from '../../constants/routes/sessionRoutes';
-import LocalStorage from '../LocalStorage';
+import LocalStorage from '../../LocalStorage';
 import { AxiosRequestHeaders } from 'axios';
 
 let token: string | null;

src/services/api/users.ts

@@ -1,9 +1,9 @@
-import instance from '../services/api';
+import instance from './api';
 // import LocalStorage from '../LocalStorage';
 
-import userRoutes from '../constants/routes/usersRoutes';
+import userRoutes from '../../constants/routes/usersRoutes';
 import { AxiosRequestHeaders } from 'axios';
-import LocalStorage from '../LocalStorage';
+import LocalStorage from '../../LocalStorage';
 
 let token: string;
 let header: AxiosRequestHeaders;
@@ -30,6 +30,7 @@ export interface CadastroResponse {
 
 export interface CadastroRequest {
   name: string;
+  lastname: string;
   email: string;
   birth_date: string;
   password: string;

src/services/refreshSession.ts

@@ -0,0 +1,44 @@
+import * as sessionRoutes from "../services/api/session";
+
+interface refreshSessionReturn {
+  userId?: string;
+  error?: boolean;
+  errorMessage?: string;
+}
+
+interface refreshSessionResponse {
+  status?: string;
+  message?: string;
+  userId?: string;
+}
+
+export const refreshSession = async (): Promise<refreshSessionReturn> => {
+  try {
+    let res: refreshSessionResponse = await sessionRoutes.refresh()
+
+    if (res.status === "error") {
+      return {
+        error: true,
+        errorMessage: res.message,
+      };
+    }
+
+    return {
+      userId: res.userId,
+    };
+  } catch(err) {
+    return {
+      error: true,
+      errorMessage: "Por favor, autentique-se.",
+    };
+  }
+  // catch (err: any) {
+  //   if (err.response) {
+  //       // The client was given an error response (5xx, 4xx)
+  //   } else if (err.request) {
+  //       // The client never received a response, and the request was never left
+  //   } else {
+  //       // Anything else
+  //   }
+// }
+};