From 9061b152d50ad291f8ae521f2cf24281af8560f8 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Tue, 24 May 2022 20:00:51 -0500 Subject: [PATCH 1/3] =?UTF-8?q?Alterando=20informa=C3=A7=C3=B5es=20de=20pe?= =?UTF-8?q?rfil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/routes/usersRoutes.ts | 2 +- src/pages/Cadastro/Cadastro.tsx | 3 +- src/pages/Perfil.tsx | 14 ++++-- src/pages/PerfilEditar.tsx | 67 +++++++++++++++++++++++------ src/services/users.ts | 1 + 5 files changed, 68 insertions(+), 19 deletions(-) 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..2a21052 100644 --- a/src/pages/Cadastro/Cadastro.tsx +++ b/src/pages/Cadastro/Cadastro.tsx @@ -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 diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index e242598..17993c0 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -32,8 +32,10 @@ const Perfil: React.FC = () => { (state: any, newState: any) => ({ ...state, ...newState }), { name: '', + lastname: '', + email: '', + birth_date: '', bio: '', - email: '' } ); @@ -73,7 +75,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 +123,7 @@ const Perfil: React.FC = () => { - {inputValues.name} + {inputValues.name} {inputValues.lastname} diff --git a/src/pages/PerfilEditar.tsx b/src/pages/PerfilEditar.tsx index 2ca0cd8..8b9ca95 100644 --- a/src/pages/PerfilEditar.tsx +++ b/src/pages/PerfilEditar.tsx @@ -27,10 +27,14 @@ import isEqual from 'lodash.isequal'; import * as usersRoutes from '../services/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 Date: Wed, 25 May 2022 17:06:39 -0500 Subject: [PATCH 2/3] =?UTF-8?q?Tabs=20agora=20aparecem=20somente=20para=20?= =?UTF-8?q?usu=C3=A1rios=20logados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 88 +++++++++++++++++++++++++------ src/pages/Cadastro/Cadastro.tsx | 4 +- src/pages/Login.tsx | 9 +++- src/pages/Perfil.css | 6 +++ src/pages/Perfil.tsx | 36 ++++++++++++- src/pages/PerfilEditar.tsx | 2 +- src/services/{ => api}/api.ts | 2 +- src/services/{ => api}/session.ts | 6 +-- src/services/{ => api}/users.ts | 6 +-- 9 files changed, 129 insertions(+), 30 deletions(-) rename src/services/{ => api}/api.ts (71%) rename src/services/{ => api}/session.ts (82%) rename src/services/{ => api}/users.ts (91%) 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/pages/Cadastro/Cadastro.tsx b/src/pages/Cadastro/Cadastro.tsx index 2a21052..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(); @@ -114,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 17993c0..bce71b4 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,8 +24,8 @@ 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"; @@ -137,6 +143,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 8b9ca95..c2cefaa 100644 --- a/src/pages/PerfilEditar.tsx +++ b/src/pages/PerfilEditar.tsx @@ -25,7 +25,7 @@ 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' diff --git a/src/services/api.ts b/src/services/api/api.ts similarity index 71% rename from src/services/api.ts rename to src/services/api/api.ts index 909f183..70062b2 100644 --- a/src/services/api.ts +++ b/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(), diff --git a/src/services/session.ts b/src/services/api/session.ts similarity index 82% rename from src/services/session.ts rename to src/services/api/session.ts index efa3635..ba8118a 100644 --- a/src/services/session.ts +++ b/src/services/api/session.ts @@ -1,6 +1,6 @@ -import instance from '../services/api'; -import sessionRoutes from '../constants/routes/sessionRoutes'; -import LocalStorage from '../LocalStorage'; +import instance from './api'; +import sessionRoutes from '../../constants/routes/sessionRoutes'; +import LocalStorage from '../../LocalStorage'; import { AxiosRequestHeaders } from 'axios'; let token: string | null; diff --git a/src/services/users.ts b/src/services/api/users.ts similarity index 91% rename from src/services/users.ts rename to src/services/api/users.ts index 9146158..424190a 100644 --- a/src/services/users.ts +++ b/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; From f3969579f1befd5616d236929ffa0749bcf57930 Mon Sep 17 00:00:00 2001 From: Matheus Albino Brunhara Date: Wed, 25 May 2022 17:56:10 -0500 Subject: [PATCH 3/3] =?UTF-8?q?Tornando=20a=20fun=C3=A7=C3=A3o=20refreshSe?= =?UTF-8?q?ssions=20externa?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Perfil.tsx | 20 +++++++--------- src/services/refreshSession.ts | 44 ++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 12 deletions(-) create mode 100644 src/services/refreshSession.ts diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index bce71b4..be7d6bf 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -29,6 +29,7 @@ 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); @@ -57,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') { diff --git a/src/services/refreshSession.ts b/src/services/refreshSession.ts new file mode 100644 index 0000000..7d29d42 --- /dev/null +++ b/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 => { + 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 + // } +// } +};