From a6d380862fdeeddbd21c33561309b1544d1cd3d5 Mon Sep 17 00:00:00 2001
From: RenatoDiGiacomo <renato_di_giacomo@hotmail.com>
Date: Thu, 21 Jul 2022 10:19:27 -0300
Subject: [PATCH] Title Reactive Done
---
.../Base/MainContainer/MainContainer.jsx | 1 -
.../src/components/Menu/MenuComponent.jsx | 2 +-
.../src/components/PageTitle/PageTitle.jsx | 45 ++++++++++++++++++-
.../src/components/UserModal/UserModal.jsx | 25 +++++++----
frontend/src/layout/index.js | 6 +--
5 files changed, 63 insertions(+), 16 deletions(-)
diff --git a/frontend/src/components/Base/MainContainer/MainContainer.jsx b/frontend/src/components/Base/MainContainer/MainContainer.jsx
index b8bb60d..e38be30 100644
--- a/frontend/src/components/Base/MainContainer/MainContainer.jsx
+++ b/frontend/src/components/Base/MainContainer/MainContainer.jsx
@@ -1,7 +1,6 @@
import React from "react";
import PageTitle from "../../PageTitle/PageTitle";
-
import MainContainerStyled, {
TitleContainerStyled,
ContentContainerStyled,
diff --git a/frontend/src/components/Menu/MenuComponent.jsx b/frontend/src/components/Menu/MenuComponent.jsx
index 047aedc..dc0c6c9 100644
--- a/frontend/src/components/Menu/MenuComponent.jsx
+++ b/frontend/src/components/Menu/MenuComponent.jsx
@@ -63,7 +63,7 @@ const MenuComponent = () => {
<MenuItem icon={<Tickets />} text="Tickets" to="/tickets" hover={hover} />
<MenuItem icon={<Contact />} text="Contatos" to="/contacts" 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 />
<MenuItem icon={<Users />} text="Usuários" to="/users" hover={hover} />
<MenuItem icon={<Rows />} text="Filas" to="/Queues" hover={hover} />
diff --git a/frontend/src/components/PageTitle/PageTitle.jsx b/frontend/src/components/PageTitle/PageTitle.jsx
index 6ba57c1..364db61 100644
--- a/frontend/src/components/PageTitle/PageTitle.jsx
+++ b/frontend/src/components/PageTitle/PageTitle.jsx
@@ -1,4 +1,5 @@
import React from "react";
+import { useLocation } from "react-router-dom";
import { PageTitleStyled } from "./PageTitle.style";
import UserBtn from "./UserBtn/UserBtn";
@@ -7,15 +8,57 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import logo from "../../assets/images/Logo.png";
const PageTitle = () => {
+ const path = useLocation();
+ const [title,setTitle] = React.useState()
const [modal, setModal] = React.useState(false);
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 = () => {
setModal(!modal);
};
return (
<PageTitleStyled>
- <h1>PageTitle</h1>
+ <h1>{title}</h1>
<UserBtn user={user} img={logo} modal={modal} modalSet={handleModal} />
</PageTitleStyled>
);
diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx
index 3f9776c..eb254c6 100644
--- a/frontend/src/components/UserModal/UserModal.jsx
+++ b/frontend/src/components/UserModal/UserModal.jsx
@@ -15,12 +15,9 @@ import UserImg from "../../assets/images/User/user.jpg";
const UserModal = ({ modal, click }) => {
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);
return (
@@ -28,8 +25,20 @@ const UserModal = ({ modal, click }) => {
<UserModalStyled>
<UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
<FormComponent method="get">
- <InputComponent id="nome" label="Nome" type="text" value={initalData.name}/>
- <InputComponent id="email" label="E-mail" type="email" value={initalData.email}/>
+ <InputComponent
+ 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" />
<UserBtns>
<BtnComponent text="Cancelar" onClick={click} />
@@ -53,4 +62,4 @@ id: 2
name: "teste"
profile: "master"
queues: []
-tokenVersion: 0 */
\ No newline at end of file
+tokenVersion: 0 */
diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js
index 353899e..dcc26ee 100644
--- a/frontend/src/layout/index.js
+++ b/frontend/src/layout/index.js
@@ -8,11 +8,7 @@ import MenuComponent from "../components/Menu/MenuComponent";
const LoggedInLayout = ({ children }) => {
const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
- const logout = (e) => {
- handleLogout();
- };
- const { user } = React.useContext(AuthContext);
- console.log(user.name);
+
if (loading) {
return <Loading />;