From a66355f43bebf8c8ab39a37d3069674b3da43185 Mon Sep 17 00:00:00 2001 From: RenatoDiGiacomo Date: Thu, 21 Jul 2022 14:00:06 -0300 Subject: [PATCH] Tickets in progress I needed understand more about Socket.IO and how this aplication work to update de visual --- frontend/src/components/Ticket/index.js | 2 - frontend/src/components/TicketsList/index.js | 504 +++++++++--------- .../TicketsManager/TicketsManager.jsx | 338 ++++++++++++ .../src/components/TicketsManager/index.js | 4 +- .../components/TicketsQueueSelect/index.js | 93 ++-- .../src/components/UserModal/UserModal.jsx | 36 +- frontend/src/pages/Tickets/Tickets.jsx | 20 + frontend/src/pages/Tickets/Tickets.style.jsx | 9 + frontend/src/routes/index.js | 2 +- 9 files changed, 683 insertions(+), 325 deletions(-) create mode 100644 frontend/src/components/TicketsManager/TicketsManager.jsx create mode 100644 frontend/src/pages/Tickets/Tickets.jsx create mode 100644 frontend/src/pages/Tickets/Tickets.style.jsx diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js index 6b4a1cb..004803c 100644 --- a/frontend/src/components/Ticket/index.js +++ b/frontend/src/components/Ticket/index.js @@ -91,8 +91,6 @@ const Ticket = () => { const fetchTicket = async () => { try { - // maria julia - const { data } = await api.get("/tickets/" + ticketId); // setContact(data.contact); diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index 1fb3263..604d603 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -12,320 +12,294 @@ import useTickets from "../../hooks/useTickets"; import { i18n } from "../../translate/i18n"; import { AuthContext } from "../../context/Auth/AuthContext"; -const useStyles = makeStyles(theme => ({ - ticketsListWrapper: { - position: "relative", - display: "flex", - height: "100%", - flexDirection: "column", - overflow: "hidden", - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }, +const useStyles = makeStyles((theme) => ({ + ticketsListWrapper: { + position: "relative", + display: "flex", + height: "100%", + flexDirection: "column", + overflow: "hidden", + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, - ticketsList: { - flex: 1, - overflowY: "scroll", - ...theme.scrollbarStyles, - borderTop: "2px solid rgba(0, 0, 0, 0.12)", - }, + ticketsList: { + flex: 1, + overflowY: "scroll", + ...theme.scrollbarStyles, + borderTop: "2px solid rgba(0, 0, 0, 0.12)", + }, - ticketsListHeader: { - color: "rgb(67, 83, 105)", - zIndex: 2, - backgroundColor: "white", - borderBottom: "1px solid rgba(0, 0, 0, 0.12)", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - }, + ticketsListHeader: { + color: "rgb(67, 83, 105)", + zIndex: 2, + backgroundColor: "white", + borderBottom: "1px solid rgba(0, 0, 0, 0.12)", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + }, - ticketsCount: { - fontWeight: "normal", - color: "rgb(104, 121, 146)", - marginLeft: "8px", - fontSize: "14px", - }, + ticketsCount: { + fontWeight: "normal", + color: "rgb(104, 121, 146)", + marginLeft: "8px", + fontSize: "14px", + }, - noTicketsText: { - textAlign: "center", - color: "rgb(104, 121, 146)", - fontSize: "14px", - lineHeight: "1.4", - }, + noTicketsText: { + textAlign: "center", + color: "rgb(104, 121, 146)", + fontSize: "14px", + lineHeight: "1.4", + }, - noTicketsTitle: { - textAlign: "center", - fontSize: "16px", - fontWeight: "600", - margin: "0px", - }, + noTicketsTitle: { + textAlign: "center", + fontSize: "16px", + fontWeight: "600", + margin: "0px", + }, - noTicketsDiv: { - display: "flex", - height: "100px", - margin: 40, - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - }, + noTicketsDiv: { + display: "flex", + height: "100px", + margin: 40, + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + }, })); const reducer = (state, action) => { - if (action.type === "LOAD_TICKETS") { - const newTickets = action.payload; - - - newTickets.forEach(ticket => { + if (action.type === "LOAD_TICKETS") { + const newTickets = action.payload; - // console.log('* ticket.unreadMessages: ',ticket.unreadMessages) + newTickets.forEach((ticket) => { + const ticketIndex = state.findIndex((t) => t.id === ticket.id); + if (ticketIndex !== -1) { + state[ticketIndex] = ticket; + if (ticket.unreadMessages > 0) { + state.unshift(state.splice(ticketIndex, 1)[0]); + } + } else { + state.push(ticket); + } + }); - const ticketIndex = state.findIndex(t => t.id === ticket.id); - if (ticketIndex !== -1) { - state[ticketIndex] = ticket; - if (ticket.unreadMessages > 0) { - state.unshift(state.splice(ticketIndex, 1)[0]); - } - } else { - state.push(ticket); - } - }); + return [...state]; + } - return [...state]; - } + if (action.type === "RESET_UNREAD") { + const ticketId = action.payload; - if (action.type === "RESET_UNREAD") { - const ticketId = action.payload; + const ticketIndex = state.findIndex((t) => t.id === ticketId); + if (ticketIndex !== -1) { + state[ticketIndex].unreadMessages = 0; + } - const ticketIndex = state.findIndex(t => t.id === ticketId); - if (ticketIndex !== -1) { - state[ticketIndex].unreadMessages = 0; - } + return [...state]; + } - return [...state]; - } + if (action.type === "UPDATE_TICKET") { + const ticket = action.payload; - if (action.type === "UPDATE_TICKET") { - const ticket = action.payload; + const ticketIndex = state.findIndex((t) => t.id === ticket.id); + if (ticketIndex !== -1) { + state[ticketIndex] = ticket; + } else { + state.unshift(ticket); + } - // console.log('++++++++++++ UPDATE_TICKET: ',ticket) + return [...state]; + } - const ticketIndex = state.findIndex(t => t.id === ticket.id); - if (ticketIndex !== -1) { - state[ticketIndex] = ticket; - } else { - state.unshift(ticket); - } + if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") { + const message = action.payload.message; - return [...state]; - } + const ticket = action.payload.ticket; - if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") { + const ticketIndex = state.findIndex((t) => t.id === ticket.id); - const message = action.payload.message + if (ticketIndex !== -1) { + if (!message.fromMe) { + ticket.unreadMessages += 1; + } - const ticket = action.payload.ticket; + state[ticketIndex] = ticket; + state.unshift(state.splice(ticketIndex, 1)[0]); + } else { + state.unshift(ticket); + } - const ticketIndex = state.findIndex(t => t.id === ticket.id); + return [...state]; + } - if (ticketIndex !== -1) { - - // console.log('>>>>>> ticketIndex: ', ticketIndex) + if (action.type === "UPDATE_TICKET_CONTACT") { + const contact = action.payload; + const ticketIndex = state.findIndex((t) => t.contactId === contact.id); + if (ticketIndex !== -1) { + state[ticketIndex].contact = contact; + } + return [...state]; + } - // console.log('&&&&&&& UPDATE_TICKET_UNREAD_MESSAGES ticket: ',ticket, ' |\n MESSAGE: ', message) - - if(!message.fromMe){ - ticket.unreadMessages +=1 - } + if (action.type === "DELETE_TICKET") { + const ticketId = action.payload; + const ticketIndex = state.findIndex((t) => t.id === ticketId); + if (ticketIndex !== -1) { + state.splice(ticketIndex, 1); + } - state[ticketIndex] = ticket; - state.unshift(state.splice(ticketIndex, 1)[0]); - - } else { - state.unshift(ticket); - } + return [...state]; + } - return [...state]; - } - - if (action.type === "UPDATE_TICKET_CONTACT") { - const contact = action.payload; - const ticketIndex = state.findIndex(t => t.contactId === contact.id); - if (ticketIndex !== -1) { - state[ticketIndex].contact = contact; - } - return [...state]; - } - - if (action.type === "DELETE_TICKET") { - const ticketId = action.payload; - const ticketIndex = state.findIndex(t => t.id === ticketId); - if (ticketIndex !== -1) { - state.splice(ticketIndex, 1); - } - - return [...state]; - } - - if (action.type === "RESET") { - return []; - } + if (action.type === "RESET") { + return []; + } }; -const TicketsList = (props) => { - const { status, searchParam, showAll, selectedQueueIds, updateCount, style } = - props; - const classes = useStyles(); - const [pageNumber, setPageNumber] = useState(1); - const [ticketsList, dispatch] = useReducer(reducer, []); - const { user } = useContext(AuthContext); +const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount, style }) => { + const classes = useStyles(); + const [pageNumber, setPageNumber] = useState(1); + const [ticketsList, dispatch] = useReducer(reducer, []); + const { user } = useContext(AuthContext); - useEffect(() => { - dispatch({ type: "RESET" }); - setPageNumber(1); - }, [status, searchParam, dispatch, showAll, selectedQueueIds]); + useEffect(() => { + dispatch({ type: "RESET" }); + setPageNumber(1); + }, [status, searchParam, dispatch, showAll, selectedQueueIds]); - const { tickets, hasMore, loading } = useTickets({ - pageNumber, - searchParam, - status, - showAll, - queueIds: JSON.stringify(selectedQueueIds), - }); + const { tickets, hasMore, loading } = useTickets({ + pageNumber, + searchParam, + status, + showAll, + queueIds: JSON.stringify(selectedQueueIds), + }); - useEffect(() => { - if (!status && !searchParam) return; - dispatch({ - type: "LOAD_TICKETS", - payload: tickets, - }); - }, [tickets, status, searchParam]); + useEffect(() => { + if (!status && !searchParam) return; + dispatch({ + type: "LOAD_TICKETS", + payload: tickets, + }); + }, [tickets, status, searchParam]); - useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + useEffect(() => { + const socket = openSocket(process.env.REACT_APP_BACKEND_URL); - const shouldUpdateTicket = ticket => - (!ticket.userId || ticket.userId === user?.id || showAll) && - (!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1); + const shouldUpdateTicket = (ticket) => + (!ticket.userId || ticket.userId === user?.id || showAll) && + (!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1); - const notBelongsToUserQueues = ticket => - ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1; + const notBelongsToUserQueues = (ticket) => + ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1; - socket.on("connect", () => { - if (status) { - socket.emit("joinTickets", status); - } else { - socket.emit("joinNotification"); - } + socket.on("connect", () => { + if (status) { + socket.emit("joinTickets", status); + } else { + socket.emit("joinNotification"); + } + }); - }); + socket.on("ticket", (data) => { + if (data.action === "updateUnread") { + dispatch({ + type: "RESET_UNREAD", + payload: data.ticketId, + }); + } - socket.on("ticket", data => { - if (data.action === "updateUnread") { - dispatch({ - type: "RESET_UNREAD", - payload: data.ticketId, - }); - } + if (data.action === "update" && shouldUpdateTicket(data.ticket)) { + dispatch({ + type: "UPDATE_TICKET", + payload: data.ticket, + }); + } - if (data.action === "update" && shouldUpdateTicket(data.ticket)) { - dispatch({ - type: "UPDATE_TICKET", - payload: data.ticket, - }); - } + if (data.action === "update" && notBelongsToUserQueues(data.ticket)) { + dispatch({ type: "DELETE_TICKET", payload: data.ticket.id }); + } - if (data.action === "update" && notBelongsToUserQueues(data.ticket)) { - dispatch({ type: "DELETE_TICKET", payload: data.ticket.id }); - } + if (data.action === "delete") { + dispatch({ type: "DELETE_TICKET", payload: data.ticketId }); + } + }); - if (data.action === "delete") { - dispatch({ type: "DELETE_TICKET", payload: data.ticketId }); - } - }); + socket.on("appMessage", (data) => { + if (data.action === "create" && shouldUpdateTicket(data.ticket)) { + dispatch({ + type: "UPDATE_TICKET_UNREAD_MESSAGES", + // payload: data.ticket, + payload: data, + }); + } + }); - socket.on("appMessage", data => { - if (data.action === "create" && shouldUpdateTicket(data.ticket)) { + socket.on("contact", (data) => { + if (data.action === "update") { + dispatch({ + type: "UPDATE_TICKET_CONTACT", + payload: data.contact, + }); + } + }); - // console.log('((((((((((((((((((( DATA.MESSAGE: ', data.message) + return () => { + socket.disconnect(); + }; + }, [status, showAll, user, selectedQueueIds]); - dispatch({ - type: "UPDATE_TICKET_UNREAD_MESSAGES", - // payload: data.ticket, - payload: data, - }); - } - }); + useEffect(() => { + if (typeof updateCount === "function") { + updateCount(ticketsList.length); + } + }, [ticketsList]); - socket.on("contact", data => { - if (data.action === "update") { - dispatch({ - type: "UPDATE_TICKET_CONTACT", - payload: data.contact, - }); - } - }); + const loadMore = () => { + setPageNumber((prevState) => prevState + 1); + }; - return () => { - socket.disconnect(); - }; - }, [status, showAll, user, selectedQueueIds]); + const handleScroll = (e) => { + if (!hasMore || loading) return; - useEffect(() => { + const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; + if (scrollHeight - (scrollTop + 100) < clientHeight) { + loadMore(); + } + }; - - if (typeof updateCount === "function") { - updateCount(ticketsList.length); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ticketsList]); - - const loadMore = () => { - setPageNumber(prevState => prevState + 1); - }; - - const handleScroll = e => { - if (!hasMore || loading) return; - - const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; - - if (scrollHeight - (scrollTop + 100) < clientHeight) { - loadMore(); - } - }; - - return ( - - - - {ticketsList.length === 0 && !loading ? ( -
- - {i18n.t("ticketsList.noTicketsTitle")} - -

- {i18n.t("ticketsList.noTicketsMessage")} -

-
- ) : ( - <> - {ticketsList.map(ticket => ( - - ))} - - )} - {loading && } - - - - ); + return ( + + + + {ticketsList.length === 0 && !loading ? ( +
+ {i18n.t("ticketsList.noTicketsTitle")} +

{i18n.t("ticketsList.noTicketsMessage")}

+
+ ) : ( + <> + {ticketsList.map((ticket) => ( + + ))} + + )} + {loading && } + + + + ); }; export default TicketsList; + diff --git a/frontend/src/components/TicketsManager/TicketsManager.jsx b/frontend/src/components/TicketsManager/TicketsManager.jsx new file mode 100644 index 0000000..b1af5b8 --- /dev/null +++ b/frontend/src/components/TicketsManager/TicketsManager.jsx @@ -0,0 +1,338 @@ +import React, { useContext, useEffect, useRef, useState } from "react"; +import openSocket from "socket.io-client" + +import { makeStyles } from "@material-ui/core/styles"; +import Paper from "@material-ui/core/Paper"; +import SearchIcon from "@material-ui/icons/Search"; +import InputBase from "@material-ui/core/InputBase"; +import Tabs from "@material-ui/core/Tabs"; +import Tab from "@material-ui/core/Tab"; +import Badge from "@material-ui/core/Badge"; +import MoveToInboxIcon from "@material-ui/icons/MoveToInbox"; +import CheckBoxIcon from "@material-ui/icons/CheckBox"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Switch from "@material-ui/core/Switch"; +import { Button } from "@material-ui/core"; + +import NewTicketModal from "../NewTicketModal"; +import TicketsList from "../TicketsList"; +import TabPanel from "../TabPanel"; + +import { i18n } from "../../translate/i18n"; +import { AuthContext } from "../../context/Auth/AuthContext"; +import { Can } from "../Can"; +import TicketsQueueSelect from "../TicketsQueueSelect"; + +const useStyles = makeStyles((theme) => ({ + ticketsWrapper: { + position: "relative", + display: "flex", + height: "100%", + flexDirection: "column", + overflow: "hidden", + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + + tabsHeader: { + flex: "none", + backgroundColor: "#eee", + }, + + settingsIcon: { + alignSelf: "center", + marginLeft: "auto", + padding: 8, + }, + + tab: { + minWidth: 120, + width: 120, + }, + + ticketOptionsBox: { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + background: "#fafafa", + padding: theme.spacing(1), + }, + + serachInputWrapper: { + flex: 1, + background: "#fff", + display: "flex", + borderRadius: 40, + padding: 4, + marginRight: theme.spacing(1), + }, + + searchIcon: { + color: "grey", + marginLeft: 6, + marginRight: 6, + alignSelf: "center", + }, + + searchInput: { + flex: 1, + border: "none", + borderRadius: 30, + }, + + badge: { + right: "-10px", + }, + show: { + display: "block", + }, + hide: { + display: "none !important", + }, +})); + +const TicketsManager = () => { + const classes = useStyles(); + + // Old New State + const [newPage, setNewPage] = React.useState(true); + // Old New State + + const [searchParam, setSearchParam] = useState(""); + const [tab, setTab] = useState("open"); + const [tabOpen, setTabOpen] = useState("open"); + const [newTicketModalOpen, setNewTicketModalOpen] = useState(false); + const [showAllTickets, setShowAllTickets] = useState(false); + const searchInputRef = useRef(); + const { user } = useContext(AuthContext); + + const [openCount, setOpenCount] = useState(0); + const [pendingCount, setPendingCount] = useState(0); + + const userQueueIds = user.queues.map((q) => q.id); + const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []); + const socket = openSocket.open(process.env.REACT_APP_BACKEND_URL) + +console.log(user.queues) +console.log(selectedQueueIds) +socket.on("connect", () => { + if ("open") { + socket.emit("joinTickets", "open"); + } else { + socket.emit("joinNotification"); + } +}); + + +socket.on("connect", ()=>{ + +}) + + + useEffect(() => { + if (user.profile.toUpperCase() === "ADMIN") { + setShowAllTickets(true); + } + }, [user.profile]); + + useEffect(() => { + if (tab === "search") { + searchInputRef.current.focus(); + } + }, [tab]); + + let searchTimeout; + + const handleSearch = (e) => { + const searchedTerm = e.target.value.toLowerCase(); + + clearTimeout(searchTimeout); + + if (searchedTerm === "") { + setSearchParam(searchedTerm); + setTab("open"); + return; + } + + searchTimeout = setTimeout(() => { + setSearchParam(searchedTerm); + }, 500); + }; + + const handleChangeTab = (e, newValue) => { + setTab(newValue); + }; + + const handleChangeTabOpen = (e, newValue) => { + setTabOpen(newValue); + }; + + const applyPanelStyle = (status) => { + if (tabOpen !== status) { + return { width: 0, height: 0 }; + } + }; + + if (newPage) { + return ( + <> + setNewTicketModalOpen(false)} + /> +
+ setSelectedQueueIds(values)} + /> + setOpenCount(val)} + style={applyPanelStyle("open")} + /> + setPendingCount(val)} + style={applyPanelStyle("pending")} + /> +
+ + ); + } + return ( + + setNewTicketModalOpen(false)} + /> + + + } + label={i18n.t("tickets.tabs.open.title")} + classes={{ root: classes.tab }} + /> + } + label={i18n.t("tickets.tabs.closed.title")} + classes={{ root: classes.tab }} + /> + } + label={i18n.t("tickets.tabs.search.title")} + classes={{ root: classes.tab }} + /> + + + + {tab === "search" ? ( +
+ + +
+ ) : ( + <> + + ( + setShowAllTickets((prevState) => !prevState)} + name="showAllTickets" + color="primary" + /> + } + /> + )} + /> + + )} + setSelectedQueueIds(values)} + /> + + + + + {i18n.t("ticketsList.assignedHeader")} + + } + value={"open"} + /> + + {i18n.t("ticketsList.pendingHeader")} + + } + value={"pending"} + /> + + + setOpenCount(val)} + style={applyPanelStyle("open")} + /> + setPendingCount(val)} + style={applyPanelStyle("pending")} + /> + + + + + + + + + + ); +}; + +export default TicketsManager; diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js index 88e6ea0..7a2ed26 100644 --- a/frontend/src/components/TicketsManager/index.js +++ b/frontend/src/components/TicketsManager/index.js @@ -9,9 +9,9 @@ import Tab from "@material-ui/core/Tab"; import Badge from "@material-ui/core/Badge"; import MoveToInboxIcon from "@material-ui/icons/MoveToInbox"; import CheckBoxIcon from "@material-ui/icons/CheckBox"; - import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; +import { Button } from "@material-ui/core"; import NewTicketModal from "../NewTicketModal"; import TicketsList from "../TicketsList"; @@ -21,7 +21,6 @@ import { i18n } from "../../translate/i18n"; import { AuthContext } from "../../context/Auth/AuthContext"; import { Can } from "../Can"; import TicketsQueueSelect from "../TicketsQueueSelect"; -import { Button } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ ticketsWrapper: { @@ -112,7 +111,6 @@ const TicketsManager = () => { if (user.profile.toUpperCase() === "ADMIN") { setShowAllTickets(true); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/frontend/src/components/TicketsQueueSelect/index.js b/frontend/src/components/TicketsQueueSelect/index.js index 2d4d225..e3d1f09 100644 --- a/frontend/src/components/TicketsQueueSelect/index.js +++ b/frontend/src/components/TicketsQueueSelect/index.js @@ -6,55 +6,52 @@ import Select from "@material-ui/core/Select"; import { Checkbox, ListItemText } from "@material-ui/core"; import { i18n } from "../../translate/i18n"; -const TicketsQueueSelect = ({ - userQueues, - selectedQueueIds = [], - onChange, -}) => { - const handleChange = e => { - onChange(e.target.value); - }; +const TicketsQueueSelect = ({ userQueues, selectedQueueIds = [], onChange }) => { + const handleChange = (e) => { + onChange(e.target.value); + }; - return ( -
- - - -
- ); + return ( +
+ + + +
+ ); }; export default TicketsQueueSelect; + diff --git a/frontend/src/components/UserModal/UserModal.jsx b/frontend/src/components/UserModal/UserModal.jsx index eb254c6..efa0c0f 100644 --- a/frontend/src/components/UserModal/UserModal.jsx +++ b/frontend/src/components/UserModal/UserModal.jsx @@ -13,12 +13,35 @@ import UserModalComponent from "./UserModalImg/UserModalComponent"; import UserImg from "../../assets/images/User/user.jpg"; -const UserModal = ({ modal, click }) => { +const UserModal = ({ modal, click, userId }) => { const { user } = React.useContext(AuthContext); - const InitalState = { name: user.name, email: user.email, profile: user.profile }; - const [userData, setUserData] = React.useState(InitalState); - console.log(user); + const InitalState = { + name: "", + email: "", + password: "", + profile: "", + }; + const [userData, setUserData] = React.useState(InitalState); + const [selectedQueueIds, setSelectedQueueIds] = React.useState([]); + + React.useEffect(() => { + // const fetchUser = async () => { + // if (!userId) return; + // try { + // const { data } = await api.get(`/users/${userId}`); + // setUserData((prevState) => { + // return console.log({ ...prevState, ...data }); + // }); + // const userQueueIds = data.queues?.map((queue) => queue.id); + // setSelectedQueueIds(userQueueIds); + // } catch (err) { + // alert(err); + // } + // }; + + // fetchUser(); + }, [userId]); return ( @@ -30,14 +53,14 @@ const UserModal = ({ modal, click }) => { label="Nome" type="text" value={userData.name} - onChange={(event) => setUserData({name:event.target.data})} + onChange={(event) => setUserData({ name: event.target.data })} /> setUserData({email:event.target.data})} + onChange={(event) => setUserData({ email: event.target.data })} /> @@ -63,3 +86,4 @@ name: "teste" profile: "master" queues: [] tokenVersion: 0 */ + diff --git a/frontend/src/pages/Tickets/Tickets.jsx b/frontend/src/pages/Tickets/Tickets.jsx new file mode 100644 index 0000000..fa7eb4c --- /dev/null +++ b/frontend/src/pages/Tickets/Tickets.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { useParams } from "react-router-dom"; + +import TicketsStyled from "./Tickets.style"; + +import TicketsManager from "../../components/TicketsManager/TicketsManager"; +import Ticket from "../../components/Ticket/"; + +const Tickets = () => { + const { ticketId } = useParams(); + return ( + + + {ticketId ? :
Não tem nada
} + + ); +}; + +export default Tickets; + diff --git a/frontend/src/pages/Tickets/Tickets.style.jsx b/frontend/src/pages/Tickets/Tickets.style.jsx new file mode 100644 index 0000000..c8c3ea7 --- /dev/null +++ b/frontend/src/pages/Tickets/Tickets.style.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +const TicketsStyled = styled.div` + display: flex; + flex-direction: row; + height: 86vh; +`; + +export default TicketsStyled \ No newline at end of file diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index 431140c..ac11b68 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -10,7 +10,7 @@ import SchedulesReminder from "../pages/SchedulesReminder/"; import Login from "../pages/Login/"; import Signup from "../pages/Signup/"; -import Tickets from "../pages/Tickets/"; +import Tickets from "../pages/Tickets/Tickets"; import Connections from "../pages/Connections/"; import Settings from "../pages/Settings/"; import Users from "../pages/Users";