Title Reactive Done

pull/14/head^2
RenatoDiGiacomo 2022-07-21 10:19:27 -03:00
parent 3c966bb346
commit a6d380862f
5 changed files with 63 additions and 16 deletions

View File

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
import PageTitle from "../../PageTitle/PageTitle"; import PageTitle from "../../PageTitle/PageTitle";
import MainContainerStyled, { import MainContainerStyled, {
TitleContainerStyled, TitleContainerStyled,
ContentContainerStyled, ContentContainerStyled,

View File

@ -63,7 +63,7 @@ const MenuComponent = () => {
<MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} /> <MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
<MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} /> <MenuItem icon={<Contact />} text="Contatos" to="/contacts" hover={hover} />
<MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} /> <MenuItem icon={<Reminder />} text="Lembretes" to="/schedulesReminder" hover={hover} />
<MenuItem icon={<FastAanswer />} text="Respostas" to="" hover={hover} /> <MenuItem icon={<FastAanswer />} text="Respostas" to="/quickAnswers" hover={hover} />
<Divider /> <Divider />
<MenuItem icon={<Users />} text="Usuários" to="/users" hover={hover} /> <MenuItem icon={<Users />} text="Usuários" to="/users" hover={hover} />
<MenuItem icon={<Rows />} text="Filas" to="/Queues" hover={hover} /> <MenuItem icon={<Rows />} text="Filas" to="/Queues" hover={hover} />

View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { useLocation } from "react-router-dom";
import { PageTitleStyled } from "./PageTitle.style"; import { PageTitleStyled } from "./PageTitle.style";
import UserBtn from "./UserBtn/UserBtn"; import UserBtn from "./UserBtn/UserBtn";
@ -7,15 +8,57 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import logo from "../../assets/images/Logo.png"; import logo from "../../assets/images/Logo.png";
const PageTitle = () => { const PageTitle = () => {
const path = useLocation();
const [title,setTitle] = React.useState()
const [modal, setModal] = React.useState(false); const [modal, setModal] = React.useState(false);
const { user } = React.useContext(AuthContext); const { user } = React.useContext(AuthContext);
console.log(path.pathname);
React.useEffect(()=>{
switch (path.pathname) {
case "/tickets":
setTitle("Tickets");
break;
case "/contacts":
setTitle("Contatos");
break;
case "/schedulesReminder":
setTitle("Lembretes");
break;
case "/quickAnswers":
setTitle("Respostas Rápidas");
break;
case "/users":
setTitle("Usuários");
break;
case "/Queues":
setTitle("Filas");
break;
case "/connections":
setTitle("Conexões");
break;
case "/report":
setTitle("Relatórios");
break;
case "/super":
setTitle("Supervisão");
break;
case "/Settings":
setTitle("Configurações");
break;
default:
setTitle("Dashboard");
}
},[path])
const handleModal = () => { const handleModal = () => {
setModal(!modal); setModal(!modal);
}; };
return ( return (
<PageTitleStyled> <PageTitleStyled>
<h1>PageTitle</h1> <h1>{title}</h1>
<UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} /> <UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
</PageTitleStyled> </PageTitleStyled>
); );

View File

@ -15,12 +15,9 @@ import UserImg from "../../assets/images/User/user.jpg";
const UserModal = ({ modal, click }) => { const UserModal = ({ modal, click }) => {
const { user } = React.useContext(AuthContext); const { user } = React.useContext(AuthContext);
const InitalState = { name: user.name, email: user.email, profile: user.profile };
const [userData, setUserData] = React.useState(InitalState);
const initalData = {
name: user.name,
email: user.email,
perfil:user.profile,
}
console.log(user); console.log(user);
return ( return (
@ -28,8 +25,20 @@ const UserModal = ({ modal, click }) => {
<UserModalStyled> <UserModalStyled>
<UserModalComponent img={UserImg} desc="Clique na imagem para alterar" /> <UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
<FormComponent method="get"> <FormComponent method="get">
<InputComponent id="nome" label="Nome" type="text" value={initalData.name}/> <InputComponent
<InputComponent id="email" label="E-mail" type="email" value={initalData.email}/> id="nome"
label="Nome"
type="text"
value={userData.name}
onChange={(event) => setUserData({name:event.target.data})}
/>
<InputComponent
id="email"
label="E-mail"
type="email"
value={userData.email}
onChange={(event) => setUserData({email:event.target.data})}
/>
<InputComponent id="password" label="Senha" type="password" /> <InputComponent id="password" label="Senha" type="password" />
<UserBtns> <UserBtns>
<BtnComponent text="Cancelar" onClick={click} /> <BtnComponent text="Cancelar" onClick={click} />

View File

@ -8,11 +8,7 @@ import MenuComponent from "../components/Menu/MenuComponent";
const LoggedInLayout = ({ children }) => { const LoggedInLayout = ({ children }) => {
const { handleLogout, loading, isAuth } = React.useContext(AuthContext); const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
const logout = (e) => {
handleLogout();
};
const { user } = React.useContext(AuthContext);
console.log(user.name);
if (loading) { if (loading) {
return <Loading />; return <Loading />;