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

Terminando telas de completar cadastro

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-06-20 04:05:34 -05:00
parent c368324747
commit 3e63a74fc9
10 changed files with 411 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -19,7 +19,8 @@ import Perfil from './pages/Perfil';
import PerfilEditar from './pages/PerfilEditar';
import CadastroVan from './pages/CadastroVan';
import CadastroCompletar from './pages/CadastroCompletar/CadastroCompletar';
import CompletarDocumentos from './pages/CadastroCompletar/CompletarDocumentos';
import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
@@ -55,7 +56,8 @@ const routes = (
<Route exact path="/perfil" component={Perfil}></Route>
<Route exact path="/perfil/editar" component={PerfilEditar}></Route>
<Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
<Route exact path="/perfil/completar/documentos" component={CompletarDocumentos}></Route>
<Route exact path="/perfil/completar/documento" component={CompletarDocumento}></Route>
<Route exact path="/perfil/completar/telefone" component={CompletarTelefone}></Route>
<Route exact path="/usuario/:id" component={Perfil}></Route>

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

@@ -12,13 +12,11 @@ IonPage,
IonTitle,
IonToolbar
} from "@ionic/react";
import React, { useEffect, useReducer, useState } from "react";
import React, { useEffect, useReducer } from "react";
import '../Perfil.css'
import { useHistory, useLocation } from "react-router";
import { bookOutline, callOutline, documentTextOutline, homeOutline } from "ionicons/icons";
import * as usersRoutes from '../../services/api/users';
import { callOutline, documentTextOutline } from "ionicons/icons";
import '../Cadastro/Cadastro.css'
@@ -26,93 +24,60 @@ 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 items = [
// TODO, CPF e CNH
interface cardItem {
icon: string;
label: string;
description: string;
url: string;
required: boolean;
}
let items: cardItem[] = [
{
icon: documentTextOutline,
label: 'Documentos',
description: 'Cadastre seus documentos para que seu perfil possa ser verificado.'
label: 'Documento',
description: 'Cadastre seu documento para que seu perfil possa ser verificado',
url: '/perfil/completar/documento',
required: false
},
// TODO, telefone e WhatsApp
{
icon: callOutline,
label: 'Informações de contato',
description: 'Cadastre seu número de telefone celular que para possam contatar você.'
},
{
icon: homeOutline,
label: 'Endereço de residência',
description: 'Diga-nos seu endereço para que possa começar a solicitar vagas.'
},
{
icon: bookOutline,
label: 'Instituição de ensino',
description: 'Diga-nos sua IES para que possa começar a solicitar vagas.'
},
description: 'Cadastre seu número de telefone celular que para possam contatar você',
url: '/perfil/completar/telefone',
required: false
}
]
const CadastroCompletar: React.FC = () => {
const history = useHistory();
const location = useLocation<LocationState>();
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const handleCardClick = (item: cardItem) => {
if (!item.required) return
const [userData, setUserData] = useState({
name: '',
lastname: '',
email: '',
birth_date: '',
bio: '',
});
const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
{
name: '',
lastname: '',
email: '',
birth_date: '',
bio: '',
}
);
history.push({ pathname: item.url });
}
useEffect(() => {
let userData = location.state.userData
if (!location.state) {
history.push({ pathname: '/perfil' })
}
setUserData(location.state.userData)
setInputValues({
'name': userData.name,
'lastname': userData.lastname,
'email': userData.email,
'birth_date': userData.birth_date,
'bio': userData.bio
});
}, [userData]);
const handleUpdateUserData = () => {
usersRoutes.update(inputValues).then(response => {
if (response.status === 'error') {
setMessageToast(response.message);
setShowToast(true);
return
}
console.log(response)
}).catch((err) => {
setMessageToast(err);
setShowToast(true);
})
}
if (!location.state.userData.document) items[0].required = true
if (!location.state.userData.phone_number) items[1].required = true
}, []);
return (
<IonPage>
@@ -128,7 +93,7 @@ const CadastroCompletar: React.FC = () => {
<IonContent>
{ items.map((item, index) => {
return (
<IonCard button key={index}>
<IonCard button={item.required} key={index} onClick={() => { handleCardClick(item) }}>
<IonItem>
<IonIcon icon={item.icon} slot="start" />
<IonLabel>{item.label}</IonLabel>

193
src/pages/CadastroCompletar/CompletarDocumento.tsx Normal file
View File

@@ -0,0 +1,193 @@
import {
IonBackButton,
IonButtons,
IonContent,
IonFab,
IonFabButton,
IonHeader,
IonIcon,
IonList,
IonPage,
IonSelect,
IonSelectOption,
IonTitle,
IonToast,
IonToolbar
} from "@ionic/react";
import React, { useEffect, useState } from "react";
import { IonGrid, IonRow, IonCol } from "@ionic/react";
import { useHistory, useLocation } from "react-router-dom";
import {
IonItem,
IonLabel,
IonInput,
} from "@ionic/react";
import { saveOutline } from "ionicons/icons";
import * as usersRoutes from '../../services/api/users';
import validateCpf from '../../services/validateCpf'
interface documentTypesInterface {
label: string;
name: string;
}
const CompletarDocumento: React.FC = () => {
const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
const [documentTypes, setDocumentTypes] = useState<documentTypesInterface[]>([]);
const [document, setDocument] = useState('');
const [documentType, setDocumentType] = useState('');
const [documentMaxLength, setDocumentMaxLength] = useState(0);
const [showToast, setShowToast] = useState(false);
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)
return false
}
if (documentType === 'cpf' && !validateCpf(document)) {
setMessageToast('CPF inválido!')
setShowToast(true)
return false
}
return true
}
const handleUpdateUserDocuments = async () => {
if (!validateform()) {
return
}
usersRoutes.update({ document_type: documentType, document: document }).then(response => {
if (response.status === 'error') {
setMessageToast(response.message);
setShowToast(true);
return
}
console.log(response)
}).catch((err) => {
setMessageToast(err);
setShowToast(true);
})
};
const handleChangeDocumentType = (document_type: string) => {
switch(document_type) {
case 'cpf':
setDocumentType('cpf') // workaround para o problema de setState para valores vindos de um evento sendo triggerado por um ion-select
setDocumentMaxLength(11)
break;
case 'cnh':
setDocumentType('cnh') // workaround para o problema de setState para valores vindos de um evento sendo triggerado por um ion-select
setDocumentMaxLength(11)
break;
case 'rg':
setDocumentType('rg') // workaround para o problema de setState para valores vindos de um evento sendo triggerado por um ion-select
setDocumentMaxLength(9)
break;
}
}
useEffect(() => {
setDocumentTypes([
{
name: 'cpf',
label: 'CPF',
},
{
name: 'rg',
label: 'RG',
},
{
name: 'cnh',
label: 'CNH',
},
])
}, [])
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Completar cadastro</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil/completar" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Completar cadastro</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>
<IonList lines="full" class="ion-no-margin">
<IonItem>
<IonLabel position="floating"> Tipo de documento</IonLabel>
<IonSelect id="document_type" onIonChange={(e: any) => { handleChangeDocumentType(e.detail.value) } }>
{ documentTypes ? documentTypes.map((document, index) => {
return (<IonSelectOption key={index} value={document.name}>{document.label}</IonSelectOption>)
}) : <></> }
</IonSelect>
</IonItem>
<IonItem>
<IonLabel position="floating"> Documento</IonLabel>
<IonInput
type="text"
value={document}
maxlength={documentMaxLength}
onIonChange={(e: any) => { setDocument(e.target.value); setHasChangedSinceInitialState(true) }}
></IonInput>
</IonItem>
</IonList>
</IonCol>
</IonRow>
</IonGrid>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton disabled={!hasChangedSinceInitialState} onClick={handleUpdateUserDocuments}>
<IonIcon icon={saveOutline} />
</IonFabButton>
</IonFab>
<IonToast
color='danger'
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}
duration={2500}
/>
</IonContent>
</IonPage>
);
};
export default CompletarDocumento;

137
src/pages/CadastroCompletar/CompletarTelefone.tsx Normal file
View File

@@ -0,0 +1,137 @@
import {
IonBackButton,
IonButtons,
IonContent,
IonFab,
IonFabButton,
IonHeader,
IonIcon,
IonList,
IonPage,
IonSelect,
IonSelectOption,
IonTitle,
IonToast,
IonToolbar
} from "@ionic/react";
import React, { useEffect, useState } from "react";
import { IonGrid, IonRow, IonCol } from "@ionic/react";
import { useHistory, useLocation } from "react-router-dom";
import {
IonItem,
IonLabel,
IonInput,
} from "@ionic/react";
import { saveOutline } from "ionicons/icons";
import * as usersRoutes from '../../services/api/users';
interface documentTypesInterface {
label: string;
name: string;
}
const CompletarTelefone: React.FC = () => {
const [hasChangedSinceInitialState, setHasChangedSinceInitialState] = useState(false);
const [phone, setPhone] = useState('');
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const history = useHistory();
const location = useLocation();
useEffect(() => {
if (!location.state) {
history.push({ pathname: '/perfil/completar' })
}
}, [])
const validateform = () => {
if (isNaN((Number)(phone))) {
setMessageToast('O telefone pode conter apenas números!')
setShowToast(true)
return false
}
return true
}
const handleUpdateUserDocuments = async () => {
if (!validateform()) {
return
}
usersRoutes.update({ phone_number: phone }).then(response => {
if (response.status === 'error') {
setMessageToast(response.message);
setShowToast(true);
return
}
console.log(response)
}).catch((err) => {
setMessageToast(err);
setShowToast(true);
})
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Completar cadastro</IonTitle>
<IonButtons slot="start">
<IonBackButton defaultHref="/perfil/completar" />
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Completar cadastro</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol>
<IonList lines="full" class="ion-no-margin">
<IonItem>
<IonLabel position="floating"> Telefone</IonLabel>
<IonInput
type="text"
value={phone}
maxlength={11}
onIonChange={(e: any) => { setPhone(e.target.value); setHasChangedSinceInitialState(true) }}
></IonInput>
</IonItem>
</IonList>
</IonCol>
</IonRow>
</IonGrid>
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton disabled={!hasChangedSinceInitialState} onClick={handleUpdateUserDocuments}>
<IonIcon icon={saveOutline} />
</IonFabButton>
</IonFab>
<IonToast
color='danger'
isOpen={showToast}
onDidDismiss={() => setShowToast(false)}
message={messageToast}
duration={2500}
/>
</IonContent>
</IonPage>
);
};
export default CompletarTelefone;

3
src/pages/CadastroVan.tsx
View File

@@ -231,9 +231,10 @@ const CadastroVan: React.FC = () => {
/>
</IonItem>
{/* TODO, problema de setState para valores vindos de um evento sendo triggerado por um ion-select */}
<IonItem>
<IonLabel>Marca</IonLabel>
<IonSelect value={inputValues.carBrand} onIonChange={(e: any) => setInputValues({ carBrand: e.target.value })}>
<IonSelect onIonChange={(e: any) => { setInputValues({ carBrand: e.detail.value }) }}>
{ carModels ? carModels.map((carModel, index) => {
return (<IonSelectOption key={index} value={carModel.name}>{carModel.name}</IonSelectOption>)
}) : <></> }

2
src/pages/Home.tsx
View File

@@ -38,7 +38,7 @@ const Home: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonButton onClick={() => { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa</IonButton>
{/* <IonButton onClick={() => { history.push({ pathname: '/usuario/56520ae7-faf8-4444-a82b-7f3990ab02d8' }); }}>Ir para o perfil de outra pessoa</IonButton> */}
</IonContent>
</IonPage>
);

99
src/pages/Perfil.tsx
View File

@@ -42,27 +42,23 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
const [isVisitor, setIsVisitor] = useState(true)
const [incompleteProfile, setIncompleteProfile] = useState(false)
const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState('');
const [inputValues, setInputValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
{
id: '',
name: '',
lastname: '',
email: '',
phone_number: '',
birth_date: '',
bio: '',
}
);
const [inputSocialInformationValues, setInputSocialInformationValues] = useReducer(
(state: any, newState: any) => ({ ...state, ...newState }),
{
phone: '',
whatsapp: '',
facebook: '',
telegram: '',
document_type: '',
document: '',
}
);
@@ -122,44 +118,24 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
if (isMounted) {
setInputValues({
'id': userId,
'name': userData.name,
'lastname': userData.lastname,
'email': userData.email,
'phone_number': userData.phone_number,
'birth_date': userData.birth_date,
'bio': userData.bio
'bio': userData.bio,
'document_type': userData.document_type,
'document': userData.document
});
if (!props.match.params.id) {
setIsVisitor(false)
}
}
}
// get user social info
const getUserSocialInfoRes = await usersService.getUserSocialInfo(userId)
if (getUserSocialInfoRes.error) {
if (isVisitor && props.match.params.id) {
setMessageToast('Usuário não existe!')
setShowToast(true)
history.push({ pathname: '/home' })
} else {
setMessageToast(getUserSocialInfoRes.error.errorMessage)
setShowToast(true)
}
return
}
if (getUserSocialInfoRes.data) {
const userSocialData = getUserSocialInfoRes.data
if (isMounted) {
setInputSocialInformationValues({
'phone': userSocialData.phone,
'whatsapp': userSocialData.whatsapp,
'facebook': userSocialData.facebook,
'telegram': userSocialData.telegram,
});
if (!userData.document || !userData.phone_number) {
setIncompleteProfile(true)
}
}
}
}
@@ -226,42 +202,15 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
<IonCardTitle>Informações de contato</IonCardTitle>
</IonCardHeader>
<IonCardContent>
{ !inputSocialInformationValues.phone && !inputSocialInformationValues.whatsapp && !inputSocialInformationValues.facebook && !inputSocialInformationValues.telegram ?
{ !inputValues.phone_number ?
<>Sem informações de contato.</>
: <>
{
inputSocialInformationValues.phone ?
inputValues.phone_number ?
<>
<IonChip>
<IonIcon icon={callOutline} />
<IonLabel>{inputSocialInformationValues.phone}</IonLabel>
</IonChip>
</> : <></>
}
{ inputSocialInformationValues.whatsapp ?
<>
<IonChip>
<IonIcon icon={logoWhatsapp} />
<IonLabel>{inputSocialInformationValues.whatsapp}</IonLabel>
</IonChip>
</> : <></>
}
{ inputSocialInformationValues.facebook ?
<>
<IonChip>
<IonIcon icon={logoFacebook} />
<IonLabel>{inputSocialInformationValues.facebook}</IonLabel>
</IonChip>
</> : <></>
}
{ inputSocialInformationValues.telegram ?
<>
<IonChip>
<IonIcon icon={callOutline} />
<IonLabel>{inputSocialInformationValues.telegram}</IonLabel>
<IonLabel>{inputValues.phone_number}</IonLabel>
</IonChip>
</> : <></>
}
@@ -277,10 +226,16 @@ const Perfil: React.FC<ScanNewProps> = (props) => {
<IonIcon icon={createOutline} slot="start" />
<IonLabel>Editar perfil</IonLabel>
</IonItem>
<IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
<IonIcon icon={shieldCheckmarkOutline} slot="start" />
<IonLabel>Completar cadastro</IonLabel>
</IonItem>
{ incompleteProfile ?
<>
<IonItem button onClick={() => history.push({ pathname: '/perfil/completar', state: { userData: inputValues } })}>
<IonIcon icon={shieldCheckmarkOutline} slot="start" />
<IonLabel>Completar cadastro</IonLabel>
</IonItem>
</>
: <></> }
<IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}>
<IonIcon icon={carOutline} slot="start" />
<IonLabel>Cadastrar Van</IonLabel>

4
src/pages/PerfilEditar.tsx
View File

@@ -68,6 +68,10 @@ const PerfilEditar: React.FC = () => {
);
useEffect(() => {
if (!location.state) {
history.push({ pathname: '/perfil' })
}
let userData = location.state.userData
setUserData(location.state.userData)

5
src/services/api/users.ts
View File

@@ -40,8 +40,9 @@ export interface UpdateUserRequest {
name?: string;
email?: string;
bio?: string;
cpf?: string;
cnpj?: string;
document_type?: string;
document?: string;
phone_number?: string;
}
// export async function get(cpf) {

10
src/services/functions/usersService.ts
View File

@@ -5,10 +5,11 @@ interface getByIdReturn {
name: string;
lastname: string;
email: string;
phone_number: string;
birth_date: string;
bio: string;
cpf: string;
cnpj: string;
document_type: string;
document: string;
},
error?: {
errorMessage: string;
@@ -23,10 +24,11 @@ interface getByIdRes {
name: string;
lastname: string;
email: string;
phone_number: string;
birth_date: string;
bio: string;
cpf: string;
cnpj: string;
document_type: string;
document: string;
},
}