147 lines
3.3 KiB
TypeScript
147 lines
3.3 KiB
TypeScript
import {
|
|
IonBackButton,
|
|
IonButtons,
|
|
IonCard,
|
|
IonCardContent,
|
|
IonContent,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonItem,
|
|
IonLabel,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar
|
|
} from "@ionic/react";
|
|
import React, { useEffect, useReducer, useState } 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 '../Cadastro/Cadastro.css'
|
|
|
|
interface userData {
|
|
name: string;
|
|
lastname: string;
|
|
email: string;
|
|
birth_date: string;
|
|
bio: string;
|
|
}
|
|
|
|
interface LocationState {
|
|
userData: userData
|
|
}
|
|
|
|
const items = [
|
|
// TODO, CPF e CNH
|
|
{
|
|
icon: documentTextOutline,
|
|
label: 'Documentos',
|
|
description: 'Cadastre seus documentos para que seu perfil possa ser verificado.'
|
|
},
|
|
// 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.'
|
|
},
|
|
]
|
|
|
|
const CadastroCompletar: React.FC = () => {
|
|
const history = useHistory();
|
|
const location = useLocation<LocationState>();
|
|
|
|
const [showToast, setShowToast] = useState(false);
|
|
const [messageToast, setMessageToast] = useState('');
|
|
|
|
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: '',
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
let userData = location.state.userData
|
|
|
|
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);
|
|
})
|
|
}
|
|
|
|
return (
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Completar cadastro</IonTitle>
|
|
<IonButtons slot="start">
|
|
<IonBackButton defaultHref="/perfil" />
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonContent>
|
|
{ items.map((item, index) => {
|
|
return (
|
|
<IonCard button key={index}>
|
|
<IonItem>
|
|
<IonIcon icon={item.icon} slot="start" />
|
|
<IonLabel>{item.label}</IonLabel>
|
|
</IonItem>
|
|
|
|
<IonCardContent>{item.description}</IonCardContent>
|
|
</IonCard>
|
|
)
|
|
})}
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default CadastroCompletar;
|