projeto-hit/frontend/src/components/PageTitle/UserBtn/UserBtn.jsx

47 lines
1.7 KiB
JavaScript

import React from "react";
import { UserBtnStyled, UserModalStyled, UserModalListStyled } from "../PageTitle.style";
import { AuthContext } from "../../../context/Auth/AuthContext";
import UserItem from "./UserItem";
import { ReactComponent as Perfil } from "../../../assets/icons/UserModal/perfil.svg";
import { ReactComponent as Signoff } from "../../../assets/icons/UserModal/signoff.svg";
import ConfirmationModal from "../../ConfirmationModal/ConfirmationModal";
import UserModal from "../../UserModal/UserModal";
const UserBtn = ({ user, img, modal, modalSet }) => {
const [modalConfirm, setModalConfirm] = React.useState(false);
const [modalUser, setModalUser] = React.useState(false);
const { handleLogout } = React.useContext(AuthContext);
const handleModal = () => {
setModalConfirm(!modalConfirm);
};
const handleModalUser = (e)=>{
e.preventDefault()
setModalUser(!modalUser)
}
return (
<>
<UserBtnStyled onClick={modalSet}>
<img src={img} alt={user ? user.name : null} width="24px" />
Bem Vindo, {user ? user.name : null}
</UserBtnStyled>
<UserModalStyled modal={modal} onMouseLeave={modalSet}>
<UserModalListStyled>
<UserItem title="Perfil" icon={<Perfil />} onClick={handleModalUser} />
<UserItem title="Sair" icon={<Signoff />} onClick={handleModal} />
</UserModalListStyled>
</UserModalStyled>
<UserModal modal={modalUser} click={handleModalUser} userId={user.id}/>
<ConfirmationModal title="Sair?" modal={modalConfirm} click={{ handleModal, handleLogout }}>
Deseja Sair do sistema?
</ConfirmationModal>
</>
);
};
export default UserBtn;