diff --git a/src/App.tsx b/src/App.tsx index ffa29b8..2d5a17b 100644 --- a/src/App.tsx +++ b/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 = ( + <> + + + + + + + + ) + +interface IUserManager { + setIsLoggedIn: Function; +} + +const user: IUserManager = { + setIsLoggedIn: () => {} +}; + +export const UserContext = React.createContext(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( - - - - - - - - - - - - - + {isLoggedIn ? ( + + {routes} + + + + + Buscar + + + + Home + + + + Perfil + + + + ) : ({routes})} + -); + ) +} + +const App: React.FC = () => { + return ( + + + + ); +}; export default App; diff --git a/src/constants/routes/usersRoutes.ts b/src/constants/routes/usersRoutes.ts index 45c8a7e..4ebe2d0 100644 --- a/src/constants/routes/usersRoutes.ts +++ b/src/constants/routes/usersRoutes.ts @@ -1,7 +1,7 @@ const usersRoutesDefault = '/users'; const usersRoutes = { create: { - url: `${usersRoutesDefault}/create` + url: `${usersRoutesDefault}` }, get: { url: `${usersRoutesDefault}` diff --git a/src/pages/Cadastro/Cadastro.tsx b/src/pages/Cadastro/Cadastro.tsx index 15ed2aa..184691a 100644 --- a/src/pages/Cadastro/Cadastro.tsx +++ b/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 = () => { - + diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 0a7f44b..afa8665 100644 --- a/src/pages/Login.tsx +++ b/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("matheusalb3213@gmail.com"); const [password, setPassword] = useState("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 diff --git a/src/pages/Perfil.css b/src/pages/Perfil.css index 65cb3ee..f1080b7 100644 --- a/src/pages/Perfil.css +++ b/src/pages/Perfil.css @@ -1,3 +1,9 @@ #avatar { border-radius: 50%; + width: 64px; + height: 64px; +} + +IonIcon { + color: blue; } \ No newline at end of file diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index e242598..be7d6bf 100644 --- a/src/pages/Perfil.tsx +++ b/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 usersRoutes from '../services/users'; +import * as sessionRoutes from '../services/api/session'; +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: '' } ); @@ -49,19 +58,14 @@ const Perfil: React.FC = () => { const loadUserData = async () => { let userId = '' - - await sessionRoutes.refresh().then(response => { - if (response.status === 'error') { - setMessageToast(response.message); - setShowToast(true); - - return - } - - userId = response.userId - }).catch(() => { + + // verify if user is authenticated + const refreshedSession = await refreshSession() + + if (refreshedSession.error) { 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 = () => { - {inputValues.name} + {inputValues.name} {inputValues.lastname} @@ -129,6 +139,32 @@ const Perfil: React.FC = () => { + + + Status do perfil + + Passageiro + + + + + + Dashboard + + + Confirmar perfil + + + Cadastrar Van + + + Pagamentos + + + Avaliações + + + history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> diff --git a/src/pages/PerfilEditar.tsx b/src/pages/PerfilEditar.tsx index 2ca0cd8..c2cefaa 100644 --- a/src/pages/PerfilEditar.tsx +++ b/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 = () => { Editar perfil - + @@ -104,15 +120,27 @@ const PerfilEditar: React.FC = () => { - - - Nome completo - setInputValues({'name': e.detail.value!})} - > - + +
+ + Nome + setInputValues({'name': e.detail.value!})} + > + + + + Sobrenome + setInputValues({'lastname': e.detail.value!})} + > + +
+ Email { onIonChange={(e) => setInputValues({'email': e.detail.value!})} > + + + Data de nascimento + setInputValues({'birth_date': e.detail.value!})} + > + + + Biografia => { + 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 + // } +// } +};