cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Diversas melhorias e toasts aparecem em redirecionamentos de páginas

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-06-20 05:25:00 -05:00
parent 3e63a74fc9
commit b1120248b9
9 changed files with 315 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/Cadastro/Cadastro.tsx
View File

@@ -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();
@@ -16,6 +17,7 @@ const Cadastro: React.FC = () => {
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const [toastColor, setToastColor] = useState<Color>("primary");
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
@@ -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,9 +72,20 @@ const Cadastro: React.FC = () => {
};
const handleSubmit = async () => {
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
}
if(name != '' && email != '' && birthDate != '' && password != '' && confirmPassword != '') {
if(password === confirmPassword){
const signUpForm = {
name: firstName,
lastname: lastName,
@@ -82,38 +95,33 @@ const Cadastro: React.FC = () => {
}
let result = fieldValidate();
if((await result).success) {
if(!(await result).success) {
setToastColor("warning")
setMessageToast(lResult.error);
setShowToast(true);
return
}
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);
if(!retorno.token) {
setToastColor('danger')
setMessageToast(retorno.message);
setShowToast(true);
return
}
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!');
setShowToast(true);
history.push({ pathname: '/home', state: {
redirectData: {
showToastMessage: true,
toastColor: "success",
toastMessage: "Usuário cadastrado com sucesso!",
}
}})
};
const { name } = useParams<{ name: string; }>();
@@ -135,14 +143,6 @@ const Cadastro: React.FC = () => {
<IonCardTitle>Cadastro</IonCardTitle>
</IonCol>
</IonRow>
{/* <IonItem>
<IonIcon icon={logoFacebook} />
Continuar com Facebook
</IonItem>
<IonItem>
<IonIcon icon={mail} />
Continuar com e-mail
</IonItem> */}
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
@@ -151,7 +151,7 @@ const Cadastro: React.FC = () => {
<IonInput
type='text'
clearInput
onIonInput={(e: any) => setFirstName(e.target.value)}
onIonChange={(e: any) => setFirstName(e.target.value)}
>
</IonInput>
</IonItem>
@@ -159,7 +159,7 @@ const Cadastro: React.FC = () => {
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonInput
clearInput
onIonInput={(e: any) => setLastName(e.target.value)}
onIonChange={(e: any) => setLastName(e.target.value)}
>
</IonInput>
</IonItem>
@@ -170,7 +170,7 @@ const Cadastro: React.FC = () => {
<IonInput
clearInput
type='email'
onIonInput={(e: any) => setEmail(e.target.value)}
onIonChange={(e: any) => setEmail(e.target.value)}
>
</IonInput>
</IonItem>
@@ -179,7 +179,7 @@ const Cadastro: React.FC = () => {
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput
type='date'
onIonInput={(e: any) => setBirthDate(e.target.value)}
onIonChange={(e: any) => setBirthDate(e.target.value)}
>
</IonInput>
</IonItem>
@@ -189,7 +189,7 @@ const Cadastro: React.FC = () => {
<IonInput
clearInput
type='password'
onIonInput={(e: any) => setPassword(e.target.value)}
onIonChange={(e: any) => setPassword(e.target.value)}
></IonInput>
</IonItem>
<IonItem>
@@ -197,7 +197,7 @@ const Cadastro: React.FC = () => {
<IonInput
clearInput
type='password'
onIonInput={(e: any) => setConfirmPassword(e.target.value)}
onIonChange={(e: any) => setConfirmPassword(e.target.value)}
></IonInput>
</IonItem>
@@ -210,9 +210,9 @@ const Cadastro: React.FC = () => {
<Action message="Já tem conta?" text="Login" link="/login" />
</IonGrid>
{/* <IonProgressBar type="indeterminate"></IonProgressBar><br /> */}
<IonToast
// cssClass={"toast-notification"}
color='danger'
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}

53
src/pages/CadastroCompletar/CadastroCompletar.tsx
View File

@@ -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
}
userData: userData;
interface cardItem {
icon: string;
label: string;
description: string;
url: string;
required: boolean;
redirectData?: {
showToastMessage: boolean;
toastColor: Color;
toastMessage: string;
}
}
let items: cardItem[] = [
@@ -64,17 +72,31 @@ const CadastroCompletar: React.FC = () => {
const history = useHistory();
const location = useLocation<LocationState>();
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastColor, setToastColor] = useState<Color>("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 = () => {
</IonCard>
)
})}
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={toastMessage}
duration={2500}
/>
</IonContent>
</IonPage>
);

44
src/pages/CadastroCompletar/CompletarDocumento.tsx
View File

@@ -34,7 +34,24 @@ interface documentTypesInterface {
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<LocationState>();
const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
const [documentTypes, setDocumentTypes] = useState<documentTypesInterface[]>([]);
@@ -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,6 +203,7 @@ const CompletarDocumento: React.FC = () => {
</IonFab>
<IonToast
position="top"
color='danger'
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}

56
src/pages/CadastroCompletar/CompletarTelefone.tsx
View File

@@ -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<LocationState>();
const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
const [phone, setPhone] = useState('');
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const [toastColor, setToastColor] = useState<Color>("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 (
<IonPage>
<IonHeader>
@@ -122,7 +153,8 @@ const CompletarTelefone: React.FC = () => {
</IonFab>
<IonToast
color='danger'
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}

27
src/pages/CadastroVan.tsx
View File

@@ -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<boolean>(false);
const [toastMessage, setToastMessage] = useState<string>("");
const [toastColor, setToastColor] = useState<Color>("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}
/>
</IonContent>
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={toastMessage}
duration={2500}
/>
</IonPage>
);
};

42
src/pages/Home.tsx
View File

@@ -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<LocationState>();
const user = useContext(UserContext);
const [showToast, setShowToast] = useState(false);
const [toastMessage, setToastMessage] = useState('');
const [toastColor, setToastColor] = useState<Color>("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 (
<IonPage>
<IonContent>
{/* <IonButton onClick={() => { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa</IonButton> */}
<IonToast
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={toastMessage}
duration={2500}
/>
</IonContent>
</IonPage>
);

8
src/pages/Login.tsx
View File

@@ -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 = () => {
</IonGrid>
<IonToast
// cssClass={"toast-notification"}
position="top"
color='danger'
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}

54
src/pages/Perfil.tsx
View File

@@ -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<ScanNewProps> = (props) => {
const user = useContext(UserContext);
const history = useHistory();
const location = useLocation<LocationState>();
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<Color>("primary");
const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
@@ -62,12 +77,10 @@ const Perfil: React.FC<ScanNewProps> = (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<ScanNewProps> = (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<ScanNewProps> = (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<ScanNewProps> = (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<ScanNewProps> = (props) => {
<IonCard>
<IonCardContent>
{/* <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/> */}
<img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/>
<img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
{/* <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/> */}
<IonCardHeader>
<IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
</IonCardHeader>
@@ -232,6 +262,7 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
<IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
<IonIcon icon={shieldCheckmarkOutline} slot="start" />
<IonLabel>Completar cadastro</IonLabel>
<IonBadge color="primary">{incompleteProfileCounter}</IonBadge>
</IonItem>
</>
: <></> }
@@ -256,10 +287,11 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
}
<IonToast
color='danger'
position="top"
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}
message={toastMessage}
duration={2500}
/>
</IonContent>

10
src/pages/PerfilEditar.tsx
View File

@@ -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<Color>("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 = () => {
</IonFab>
<IonToast
color='danger'
color={toastColor}
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}