diff --git a/src/pages/Cadastro/Cadastro.tsx b/src/pages/Cadastro/Cadastro.tsx index debc61a..82c6b9a 100644 --- a/src/pages/Cadastro/Cadastro.tsx +++ b/src/pages/Cadastro/Cadastro.tsx @@ -8,6 +8,7 @@ import ModalExample from '../../components/Email'; import * as UsersService from '../../services/api/users' import LocalStorage from '../../LocalStorage'; import { UserContext } from '../../App'; +import { Color } from '@ionic/react/node_modules/@ionic/core'; const Cadastro: React.FC = () => { const history = useHistory(); @@ -15,7 +16,8 @@ const Cadastro: React.FC = () => { const user = useContext(UserContext); const [showToast, setShowToast] = useState(false); - const [messageToast, setMessageToast ] = useState(''); + const [messageToast, setMessageToast] = useState(''); + const [toastColor, setToastColor] = useState("primary"); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -57,7 +59,7 @@ const Cadastro: React.FC = () => { clearResult(); if(!emailValidate()) { - lResult.error = 'O EMAIL é inválido!'; + lResult.error = 'E-mail inválido!'; lResult.success = false; return lResult; } else if(password.length < 7 || password.length > 12) { //TODO: validar de acordo com a documentação @@ -70,50 +72,56 @@ const Cadastro: React.FC = () => { }; const handleSubmit = async () => { - - if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') { - if(password === confirmPassword){ - const signUpForm = { - name: firstName, - lastname: lastName, - email: email, - birth_date: birthDate, - password: password - } - - let result = fieldValidate(); - if((await result).success) { - - let retorno = await UsersService.create(signUpForm); - console.log(retorno); - if(retorno.token) { - // let signIn = await Api.signIn(email, passwordField); - // if(signIn.token) { - // await AsyncStorage.setItem('token', signIn.token); - // await AsyncStorage.setItem('cpf', retorno.cpf); - - LocalStorage.setToken(retorno.token.token); - - user.setIsLoggedIn(true); - - history.push('home'); - - } else { - setMessageToast(retorno.message); - setShowToast(true); - } - } else{ - setMessageToast(lResult.error); - setShowToast(true); - } - } else { - setMessageToast('As senhas devem ser iguais!'); - setShowToast(true); - } - } else { - setMessageToast('Nenhum campo pode ser nulo!'); + if(name === '' || email === '' || birthDate === '' || password === '' || confirmPassword === '') { + setToastColor("warning") + setMessageToast('Nenhum campo pode estar vazio!'); setShowToast(true); + return } + + if(password !== confirmPassword) { + setToastColor("warning") + setMessageToast('As senhas devem ser iguais!'); + setShowToast(true); + return + } + + const signUpForm = { + name: firstName, + lastname: lastName, + email: email, + birth_date: birthDate, + password: password + } + + let result = fieldValidate(); + if(!(await result).success) { + setToastColor("warning") + setMessageToast(lResult.error); + setShowToast(true); + return + } + + let retorno = await UsersService.create(signUpForm); + + if(!retorno.token) { + setToastColor('danger') + setMessageToast(retorno.message); + setShowToast(true); + return + } + + LocalStorage.setToken(retorno.token.token); + + user.setIsLoggedIn(true); + + history.push({ pathname: '/home', state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: "Usuário cadastrado com sucesso!", + } + }}) }; const { name } = useParams<{ name: string; }>(); @@ -130,19 +138,11 @@ const Cadastro: React.FC = () => { - - {/* Como você deseja se cadastrar? */} - Cadastro - + + {/* Como você deseja se cadastrar? */} + Cadastro + - {/* - - Continuar com Facebook - - - - Continuar com e-mail - */}
@@ -151,7 +151,7 @@ const Cadastro: React.FC = () => { setFirstName(e.target.value)} + onIonChange={(e: any) => setFirstName(e.target.value)} > @@ -159,7 +159,7 @@ const Cadastro: React.FC = () => { Sobrenome setLastName(e.target.value)} + onIonChange={(e: any) => setLastName(e.target.value)} > @@ -170,7 +170,7 @@ const Cadastro: React.FC = () => { setEmail(e.target.value)} + onIonChange={(e: any) => setEmail(e.target.value)} > @@ -179,7 +179,7 @@ const Cadastro: React.FC = () => { Data de nascimento setBirthDate(e.target.value)} + onIonChange={(e: any) => setBirthDate(e.target.value)} > @@ -189,7 +189,7 @@ const Cadastro: React.FC = () => { setPassword(e.target.value)} + onIonChange={(e: any) => setPassword(e.target.value)} > @@ -197,7 +197,7 @@ const Cadastro: React.FC = () => { setConfirmPassword(e.target.value)} + onIonChange={(e: any) => setConfirmPassword(e.target.value)} > @@ -210,9 +210,9 @@ const Cadastro: React.FC = () => { {/*
*/} + setShowToast(false)} message={messageToast} diff --git a/src/pages/CadastroCompletar/CadastroCompletar.tsx b/src/pages/CadastroCompletar/CadastroCompletar.tsx index 09e4c73..de2c677 100644 --- a/src/pages/CadastroCompletar/CadastroCompletar.tsx +++ b/src/pages/CadastroCompletar/CadastroCompletar.tsx @@ -10,15 +10,25 @@ IonItem, IonLabel, IonPage, IonTitle, +IonToast, IonToolbar } from "@ionic/react"; -import React, { useEffect, useReducer } from "react"; +import React, { useEffect, useReducer, useState } from "react"; import '../Perfil.css' import { useHistory, useLocation } from "react-router"; import { callOutline, documentTextOutline } from "ionicons/icons"; import '../Cadastro/Cadastro.css' +import { Color } from "@ionic/react/node_modules/@ionic/core"; + +interface cardItem { + icon: string; + label: string; + description: string; + url: string; + required: boolean; +} interface userData { name: string; @@ -32,15 +42,13 @@ interface userData { } interface LocationState { - userData: userData -} - -interface cardItem { - icon: string; - label: string; - description: string; - url: string; - required: boolean; + userData: userData; + + redirectData?: { + showToastMessage: boolean; + toastColor: Color; + toastMessage: string; + } } let items: cardItem[] = [ @@ -64,17 +72,31 @@ const CadastroCompletar: React.FC = () => { const history = useHistory(); const location = useLocation(); + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(''); + const [toastColor, setToastColor] = useState("primary"); + const handleCardClick = (item: cardItem) => { if (!item.required) return - history.push({ pathname: item.url }); + history.push({ pathname: item.url, state: { userData: location.state.userData } }); } useEffect(() => { - if (!location.state) { + if (!location.state || !location.state.userData) { history.push({ pathname: '/perfil' }) } + if (location.state && location.state.redirectData) { + const redirectData = location.state.redirectData + + if (redirectData.showToastMessage) { + setToastColor(redirectData.toastColor) + setToastMessage(redirectData.toastMessage) + setShowToast(true) + } + } + if (!location.state.userData.document) items[0].required = true if (!location.state.userData.phone_number) items[1].required = true }, []); @@ -103,6 +125,15 @@ const CadastroCompletar: React.FC = () => { ) })} + + setShowToast(false)} + message={toastMessage} + duration={2500} + /> ); diff --git a/src/pages/CadastroCompletar/CompletarDocumento.tsx b/src/pages/CadastroCompletar/CompletarDocumento.tsx index d1c7147..5fc9a8c 100644 --- a/src/pages/CadastroCompletar/CompletarDocumento.tsx +++ b/src/pages/CadastroCompletar/CompletarDocumento.tsx @@ -14,7 +14,7 @@ import { IonToast, IonToolbar } from "@ionic/react"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { IonGrid, IonRow, IonCol } from "@ionic/react"; import { useHistory, useLocation } from "react-router-dom"; import { @@ -33,8 +33,25 @@ interface documentTypesInterface { label: string; name: string; } + +interface userData { + name: string; + lastname: string; + email: string; + phone_number: string; + birth_date: string; + bio: string; + document_type: string; + document: string; +} + +interface LocationState { + userData: userData; +} const CompletarDocumento: React.FC = () => { + const location = useLocation(); + const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false); const [documentTypes, setDocumentTypes] = useState([]); @@ -48,16 +65,8 @@ const CompletarDocumento: React.FC = () => { const [messageToast, setMessageToast] = useState(''); const history = useHistory(); - const location = useLocation(); - - useEffect(() => { - if (!location.state) { - history.push({ pathname: '/perfil/completar' }) - } - }, []) const validateform = () => { - console.log(document) if (isNaN((Number)(document))) { setMessageToast('Documento pode conter apenas números!') setShowToast(true) @@ -86,7 +95,13 @@ const CompletarDocumento: React.FC = () => { return } - console.log(response) + history.push({ pathname: '/perfil', state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: response.message, + } + }}) }).catch((err) => { setMessageToast(err); setShowToast(true); @@ -111,6 +126,16 @@ const CompletarDocumento: React.FC = () => { } useEffect(() => { + if (!location.state.userData) { + history.push({ pathname: '/perfil', state: { + redirectData: { + showToastMessage: true, + toastColor: "warning", + toastMessage: "Houve um erro. Por favor, tente novamente.", + }, userData: location.state.userData + }}) + } + setDocumentTypes([ { name: 'cpf', @@ -178,11 +203,12 @@ const CompletarDocumento: React.FC = () => { setShowToast(false)} - message={messageToast} - duration={2500} + position="top" + color='danger' + isOpen={showToast} + onDidDismiss={() => setShowToast(false)} + message={messageToast} + duration={2500} /> diff --git a/src/pages/CadastroCompletar/CompletarTelefone.tsx b/src/pages/CadastroCompletar/CompletarTelefone.tsx index 6bccd65..f739146 100644 --- a/src/pages/CadastroCompletar/CompletarTelefone.tsx +++ b/src/pages/CadastroCompletar/CompletarTelefone.tsx @@ -8,13 +8,11 @@ import { IonIcon, IonList, IonPage, - IonSelect, - IonSelectOption, IonTitle, IonToast, IonToolbar } from "@ionic/react"; -import React, { useEffect, useState } from "react"; +import React, { useState, useEffect } from "react"; import { IonGrid, IonRow, IonCol } from "@ionic/react"; import { useHistory, useLocation } from "react-router-dom"; import { @@ -26,28 +24,40 @@ import { import { saveOutline } from "ionicons/icons"; import * as usersRoutes from '../../services/api/users'; +import { Color } from "@ionic/react/node_modules/@ionic/core"; interface documentTypesInterface { label: string; name: string; } - + +interface userData { + name: string; + lastname: string; + email: string; + phone_number: string; + birth_date: string; + bio: string; + document_type: string; + document: string; +} + +interface LocationState { + userData: userData; +} + const CompletarTelefone: React.FC = () => { + const location = useLocation(); + const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false); const [phone, setPhone] = useState(''); const [showToast, setShowToast] = useState(false); const [messageToast, setMessageToast] = useState(''); + const [toastColor, setToastColor] = useState("primary"); const history = useHistory(); - const location = useLocation(); - - useEffect(() => { - if (!location.state) { - history.push({ pathname: '/perfil/completar' }) - } - }, []) const validateform = () => { if (isNaN((Number)(phone))) { @@ -66,19 +76,40 @@ const CompletarTelefone: React.FC = () => { usersRoutes.update({ phone_number: phone }).then(response => { if (response.status === 'error') { + setToastColor("warning") setMessageToast(response.message); setShowToast(true); return } - console.log(response) + const userDataObj = location.state.userData + + history.push({ pathname: '/perfil', state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: response.message, + }, + }}) }).catch((err) => { setMessageToast(err); setShowToast(true); }) }; + useEffect(() => { + if (!location.state.userData) { + history.push({ pathname: '/perfil', state: { + redirectData: { + showToastMessage: true, + toastColor: "warning", + toastMessage: "Houve um erro. Por favor, tente novamente.", + } + }}) + } + }, []) + return ( @@ -122,11 +153,12 @@ const CompletarTelefone: React.FC = () => { setShowToast(false)} - message={messageToast} - duration={2500} + position="top" + color={toastColor} + isOpen={showToast} + onDidDismiss={() => setShowToast(false)} + message={messageToast} + duration={2500} /> diff --git a/src/pages/CadastroVan.tsx b/src/pages/CadastroVan.tsx index 7b592d3..aa080dd 100644 --- a/src/pages/CadastroVan.tsx +++ b/src/pages/CadastroVan.tsx @@ -19,6 +19,7 @@ import { } from "@ionic/react"; import React, { useEffect, useReducer, useState } from "react"; +import { useHistory } from "react-router-dom"; // import * as yup from 'yup'; @@ -27,10 +28,14 @@ import carsService from '../services/functions/carsService' import * as vansRoutes from '../services/api/vans'; import "./CadastroVan.css"; +import { Color } from "@ionic/react/node_modules/@ionic/core"; const CadastroVan: React.FC = () => { + const history = useHistory(); + const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); + const [toastColor, setToastColor] = useState("primary"); const [carModels, setCarModels] = useState([{ id_model: '', @@ -174,8 +179,15 @@ const CadastroVan: React.FC = () => { return } - console.log(response) + history.push({ pathname: '/perfil', state: { + redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: response.message, + }, + }}) }).catch((err) => { + setToastColor("danger") setToastMessage(err); setShowToast(true); }) @@ -188,7 +200,9 @@ const CadastroVan: React.FC = () => { const carModelsRes = await carsService.getAllCarModels() if (carModelsRes.error) { - console.log('Houve um erro') + setToastColor("danger") + setToastMessage(carModelsRes.error.errorMessage); + setShowToast(true); return } @@ -333,6 +347,15 @@ const CadastroVan: React.FC = () => { duration={2500} /> + + setShowToast(false)} + message={toastMessage} + duration={2500} + /> ); }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index c3d74d6..1306fd4 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,17 +1,40 @@ -import { IonButton, IonContent, IonPage } from '@ionic/react'; -import { useContext, useEffect } from 'react'; -import { useHistory } from 'react-router'; +import { IonContent, IonPage, IonToast } from '@ionic/react'; +import { Color } from '@ionic/react/node_modules/@ionic/core'; +import { useContext, useEffect, useState } from 'react'; +import { useLocation } from 'react-router'; import { UserContext } from '../App'; import * as sessionRoutes from '../services/api/session'; +interface LocationState { + redirectData?: { + showToastMessage: boolean; + toastColor: Color; + toastMessage: string; + } +} + const Home: React.FC = () => { - const history = useHistory() + const location = useLocation(); const user = useContext(UserContext); + const [showToast, setShowToast] = useState(false); + const [toastMessage, setToastMessage] = useState(''); + const [toastColor, setToastColor] = useState("primary"); + useEffect(() => { + if (location.state && location.state.redirectData) { + const redirectData = location.state.redirectData + + if (redirectData.showToastMessage) { + setToastColor(redirectData.toastColor) + setToastMessage(redirectData.toastMessage) + setShowToast(true) + } + } + const refreshUserToken = async () => { await sessionRoutes.refresh().then(response => { if (response.status === 'error') { @@ -33,12 +56,19 @@ const Home: React.FC = () => { } refreshUserToken() - }) + }, []) return ( - {/* { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa */} + setShowToast(false)} + message={toastMessage} + duration={2500} + /> ); diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index afa8665..5e02cec 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -89,7 +89,11 @@ const Page: React.FC = () => { user.setIsLoggedIn(true); - history.push({ pathname: '/home' }); + history.push({ pathname: '/home', state: { redirectData: { + showToastMessage: true, + toastColor: "success", + toastMessage: "Usuário autenticado com sucesso!", + }}}) }).catch(error => { // if (!error.response) return @@ -155,7 +159,7 @@ const Page: React.FC = () => { setShowToast(false)} diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx index cb4d126..7c88028 100644 --- a/src/pages/Perfil.tsx +++ b/src/pages/Perfil.tsx @@ -1,5 +1,6 @@ import { IonBackButton, + IonBadge, IonButtons, IonCard, IonCardContent, @@ -18,7 +19,7 @@ import { IonToast, IonToolbar, } from "@ionic/react"; -import { useHistory } from "react-router-dom"; +import { useHistory, useLocation } from "react-router-dom"; import React, { useState, useEffect, useReducer, useContext } from "react"; import { callOutline, cardOutline, carOutline, createOutline, exitOutline, logoFacebook, logoWhatsapp, shieldCheckmarkOutline, starOutline } from "ionicons/icons"; @@ -28,6 +29,7 @@ import LocalStorage from "../LocalStorage"; import sessionsService from '../services/functions/sessionsService' import usersService from '../services/functions/usersService' import { UserContext } from "../App"; +import { Color } from "@ionic/react/node_modules/@ionic/core"; interface ScanNewProps { match: { @@ -37,15 +39,28 @@ interface ScanNewProps { } } +interface LocationState { + redirectData?: { + showToastMessage: boolean; + toastColor: Color; + toastMessage: string; + } +} + const Perfil: React.FC = (props) => { const user = useContext(UserContext); + const history = useHistory(); + const location = useLocation(); + const [isVisitor, setIsVisitor] = useState(true) const [incompleteProfile, setIncompleteProfile] = useState(false) + const [incompleteProfileCounter, setIncompleteProfileCounter] = useState(0) const [showToast, setShowToast] = useState(false); - const [messageToast, setMessageToast] = useState(''); + const [toastMessage, setToastMessage] = useState(''); + const [toastColor, setToastColor] = useState("primary"); const [inputValues, setInputValues] = useReducer( (state: any, newState: any) => ({ ...state, ...newState }), @@ -62,12 +77,10 @@ const Perfil: React.FC = (props) => { } ); - const history = useHistory(); - const redirectUserToLogin = () => { // TODO, não impede o usuário de retornar a página de login history.push({ pathname: '/login' }); - setMessageToast("Por favor, autentique-se!"); + setToastMessage("Por favor, autentique-se!"); setShowToast(true); } @@ -78,6 +91,16 @@ const Perfil: React.FC = (props) => { } useEffect(() => { + if (location.state && location.state.redirectData) { + const redirectData = location.state.redirectData + + if (redirectData.showToastMessage) { + setToastColor(redirectData.toastColor) + setToastMessage(redirectData.toastMessage) + setShowToast(true) + } + } + const loadUserData = async () => { let userId = '' @@ -102,11 +125,11 @@ const Perfil: React.FC = (props) => { if (getByIdRes.error) { if (isVisitor && props.match.params.id) { - setMessageToast('Usuário não existe!') + setToastMessage('Usuário não existe!') setShowToast(true) history.push({ pathname: '/home' }) } else { - setMessageToast(getByIdRes.error.errorMessage) + setToastMessage(getByIdRes.error.errorMessage) setShowToast(true) } @@ -135,6 +158,13 @@ const Perfil: React.FC = (props) => { if (!userData.document || !userData.phone_number) { setIncompleteProfile(true) + + let counter = 0 + + if (!userData.document) counter++ + if (!userData.phone_number) counter++ + + setIncompleteProfileCounter(counter) } } } @@ -173,8 +203,8 @@ const Perfil: React.FC = (props) => { - {/* avatar */} - avatar + avatar + {/* avatar */} {inputValues.name} {inputValues.lastname} @@ -232,6 +262,7 @@ const Perfil: React.FC = (props) => { history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}> Completar cadastro + {incompleteProfileCounter} : <> } @@ -256,10 +287,11 @@ const Perfil: React.FC = (props) => { } setShowToast(false)} - message={messageToast} + message={toastMessage} duration={2500} /> diff --git a/src/pages/PerfilEditar.tsx b/src/pages/PerfilEditar.tsx index 47271f0..a8a783a 100644 --- a/src/pages/PerfilEditar.tsx +++ b/src/pages/PerfilEditar.tsx @@ -28,6 +28,7 @@ import isEqual from 'lodash.isequal'; import * as usersRoutes from '../services/api/users'; import './Cadastro/Cadastro.css' +import { Color } from "@ionic/react/node_modules/@ionic/core"; interface userData { name: string; @@ -47,6 +48,7 @@ const PerfilEditar: React.FC = () => { const [showToast, setShowToast] = useState(false); const [messageToast, setMessageToast] = useState(''); + const [toastColor, setToastColor] = useState("primary"); const [userData, setUserData] = useState({ name: '', @@ -87,14 +89,18 @@ const PerfilEditar: React.FC = () => { const handleUpdateUserData = () => { usersRoutes.update(inputValues).then(response => { if (response.status === 'error') { + setToastColor("danger") setMessageToast(response.message); setShowToast(true); return } - console.log(response) + setToastColor("success") + setMessageToast(response.message); + setShowToast(true); }).catch((err) => { + setToastColor("danger") setMessageToast(err); setShowToast(true); }) @@ -176,7 +182,7 @@ const PerfilEditar: React.FC = () => { setShowToast(false)} message={messageToast}