From edc249ac87fe0f8d57d5a1c25f02b762e63599fd Mon Sep 17 00:00:00 2001 From: RenatoDiGiacomo Date: Mon, 25 Jul 2022 18:38:21 -0300 Subject: [PATCH] =?UTF-8?q?Lista=20de=20mensagem=20est=C3=A1=20em=20desenv?= =?UTF-8?q?olvimento?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ainda no ajuste do reducer e das correções de execução das tarefas de filtragem --- .../Ticket/TicketsManager/TicketsManager.jsx | 23 ++++--- .../TicketListItem/TicketListItem.jsx | 65 +++++++++++++++---- .../TicketListItem/TicketListItem.style.jsx | 31 +++++++++ .../components/TicketsList/TicketsList.jsx | 42 ++++++------ 4 files changed, 120 insertions(+), 41 deletions(-) create mode 100644 frontend/src/components/TicketListItem/TicketListItem.style.jsx diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx index da928ae..6b16cc0 100644 --- a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx @@ -1,14 +1,11 @@ import React from "react"; -import NewTicketModal from "../../NewTicketModal"; -import TicketsList from "../../TicketsList/TicketsList"; - -import { AuthContext } from "../../../context/Auth/AuthContext"; -import { i18n } from "../../../translate/i18n"; -import { Can } from "../../Can"; -import TicketsQueueSelect from "../../TicketsQueueSelect"; import TicketsManagerStyled from "./TicketsManager.style"; import TicketsTabs from "./TicketsTabs/TicketsTabs"; +import TicketsList from "../../TicketsList/TicketsList"; +import NewTicketModal from "../../NewTicketModal"; + +import { AuthContext } from "../../../context/Auth/AuthContext"; const TicketsManager = () => { const [valueTab, setValueTab] = React.useState("open"); @@ -46,11 +43,19 @@ const TicketsManager = () => { return ( + {/*Input and add new call*/}
- +
- + {/*Input and add new call*/} + + + setNewTicketModalOpen(false)} diff --git a/frontend/src/components/TicketListItem/TicketListItem.jsx b/frontend/src/components/TicketListItem/TicketListItem.jsx index 7260c7e..5a1a341 100644 --- a/frontend/src/components/TicketListItem/TicketListItem.jsx +++ b/frontend/src/components/TicketListItem/TicketListItem.jsx @@ -1,33 +1,74 @@ -import React from "react"; +import React, { useState, useEffect, useRef, useContext } from "react"; import { useHistory, useParams } from "react-router-dom"; import { parseISO, format, isSameDay } from "date-fns"; +import clsx from "clsx"; import { i18n } from "../../translate/i18n"; import api from "../../services/api"; -import ButtonWithSpinner from "../ButtonWithSpinner"; -import MarkdownWrapper from "../MarkdownWrapper"; -import { Tooltip } from "@material-ui/core"; import { AuthContext } from "../../context/Auth/AuthContext"; import toastError from "../../errors/toastError"; +import { + TicketDateStyled, + TicketImgStyled, + TicketListItemStyled, + TicketTitleStyled, +} from "./TicketListItem.style"; -const TicketListItem = ({ ticket, status }) => { +const TicketListItem = ({ tickets }) => { const history = useHistory(); + const [loading, setLoading] = useState(false); const { ticketId } = useParams(); - const isMounted = React.useRef(true); - const { user } = React.useContext(AuthContext); + const isMounted = useRef(true); + const { user } = useContext(AuthContext); + + useEffect(() => { + return () => { + isMounted.current = false; + }; + }, []); + + const handleAcepptTicket = async (id) => { + setLoading(true); + try { + await api.put(`/tickets/${id}`, { + status: "open", + userId: user?.id, + }); + } catch (err) { + setLoading(false); + toastError(err); + } + if (isMounted.current) { + setLoading(false); + } + history.push(`/tickets/${id}`); + }; const handleSelectTicket = (id) => { history.push(`/tickets/${id}`); }; - if (ticket.status !== status) return null; + if (!tickets) return null; return ( - -

{ticket.id}

- {ticket.id} -

{ticket.lastMessage}

+ + + + +

{tickets.contact.name}

+

{tickets.lastMessage}

+ + + {isSameDay(parseISO(tickets.updatedAt), new Date()) ? ( + <>{format(parseISO(tickets.updatedAt), "HH:mm")} + ) : ( + <>{format(parseISO(tickets.updatedAt), "dd/MM/yyyy")} + )} +

badge

+ + + ); }; diff --git a/frontend/src/components/TicketListItem/TicketListItem.style.jsx b/frontend/src/components/TicketListItem/TicketListItem.style.jsx new file mode 100644 index 0000000..ccef80d --- /dev/null +++ b/frontend/src/components/TicketListItem/TicketListItem.style.jsx @@ -0,0 +1,31 @@ +import styled from "styled-components"; +import { color } from "../../style/varibles"; + +export const TicketListItemStyled = styled.li` + background-color: ${color.pricinpal.grisOscuro}; + display: flex; + align-items: center; + padding: 0.5rem 6px; + border-bottom: 1.5px solid ${color.gradient.border}; + &:nth-child(1){ + margin-top: 6px; + } +`; + +export const TicketTitleStyled = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; +`; +export const TicketDateStyled = styled.div` + display: block; + color: white; +`; + +export const TicketImgStyled = styled.img` + width: 40px; + height: 40px; + object-fit: contain; + border-radius: 50%; +`; + diff --git a/frontend/src/components/TicketsList/TicketsList.jsx b/frontend/src/components/TicketsList/TicketsList.jsx index 31aede6..d3f7c66 100644 --- a/frontend/src/components/TicketsList/TicketsList.jsx +++ b/frontend/src/components/TicketsList/TicketsList.jsx @@ -1,4 +1,5 @@ -import React, { useReducer } from "react"; +import React from "react"; +import { useHistory } from "react-router-dom"; import openSocket from "socket.io-client"; import useTickets from "../../hooks/useTickets"; @@ -13,6 +14,8 @@ const reducer = (state, action) => { const newTickets = action.payload; newTickets.forEach((ticket) => { + // console.log("* ticket.unreadMessages: ", ticket.unreadMessages); + const ticketIndex = state.findIndex((t) => t.id === ticket.id); if (ticketIndex !== -1) { state[ticketIndex] = ticket; @@ -41,6 +44,8 @@ const reducer = (state, action) => { if (action.type === "UPDATE_TICKET") { const ticket = action.payload; + // console.log('++++++++++++ UPDATE_TICKET: ',ticket) + const ticketIndex = state.findIndex((t) => t.id === ticket.id); if (ticketIndex !== -1) { state[ticketIndex] = ticket; @@ -95,12 +100,11 @@ const reducer = (state, action) => { return []; } }; - const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount }) => { + const history = useHistory(); const [pageNumber, setPageNumber] = React.useState(1); + const [ticketsList, dispatch] = React.useReducer(reducer, []); const { user } = React.useContext(AuthContext); - const [ticketsList, dispatch] = useReducer(reducer, []); - const { tickets, hasMore, loading } = useTickets({ pageNumber, searchParam, @@ -166,6 +170,8 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou socket.on("appMessage", (data) => { if (data.action === "create" && shouldUpdateTicket(data.ticket)) { + // console.log('((((((((((((((((((( DATA.MESSAGE: ', data.message) + dispatch({ type: "UPDATE_TICKET_UNREAD_MESSAGES", // payload: data.ticket, @@ -188,12 +194,19 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou }; }, [status, showAll, user, selectedQueueIds]); + React.useEffect(() => { + 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; + if (!hasMore || loading) return; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; @@ -201,22 +214,11 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou loadMore(); } }; - + console.log(ticketsList); return ( -
    - {ticketsList.length === 0 && !loading ? ( -
    - {i18n.t("ticketsList.noTicketsTitle")} -

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

    -
    - ) : ( - <> - {ticketsList.map((ticket) => ( - - ))} - - )} - {loading && } +
      + {ticketsList && + ticketsList.map((ticket) => )}
    ); };