Lista de mensagem está em desenvolvimento

ainda no ajuste do reducer e das correções de execução das tarefas de filtragem

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 (
     <TicketsManagerStyled>
       <TicketsTabs setValueTab={setValueTab} valueTab={valueTab} />
+      {/*Input and add new call*/}
       <div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}>
         <input type="text" style={{ width: "100%", margin: "0 6px" }} onChange={handleSearch} />
         <button onClick={() => setNewTicketModalOpen(true)}>+</button>
       </div>
-      <TicketsList status={valueTab} selectedQueueIds={selectedQueueIds} searchParam={searchParam} />
+      {/*Input and add new call*/}
+      
+      <TicketsList
+        status={valueTab}
+        selectedQueueIds={selectedQueueIds}
+        searchParam={searchParam}
+      />
+
       <NewTicketModal
         modalOpen={newTicketModalOpen}
         onClose={(e) => setNewTicketModalOpen(false)}

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 (
-    <React.Fragment key={ticket.id}>
-      <h1>{ticket.id}</h1>
-      <img src={ticket.contact.profilePicUrl} alt={ticket.id} style={{ width: "50px" }} />
-      <p>{ticket.lastMessage}</p>
+    <React.Fragment key={tickets.id}>
+      <TicketListItemStyled>
+        <TicketImgStyled src={tickets.contact.profilePicUrl} alt={tickets.id} />
+        <TicketTitleStyled>
+          <p>{tickets.contact.name}</p>
+          <p>{tickets.lastMessage}</p>
+        </TicketTitleStyled>
+        <TicketDateStyled>
+          {isSameDay(parseISO(tickets.updatedAt), new Date()) ? (
+            <>{format(parseISO(tickets.updatedAt), "HH:mm")}</>
+          ) : (
+            <>{format(parseISO(tickets.updatedAt), "dd/MM/yyyy")}</>
+          )}
+          <p>badge</p>
+        </TicketDateStyled>
+
+      </TicketListItemStyled>
     </React.Fragment>
   );
 };

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%;
+`;
+

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,6 +194,13 @@ 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);
   };
@@ -201,22 +214,11 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou
       loadMore();
     }
   };
-  
+  console.log(ticketsList);
   return (
-    <ul>
-      {ticketsList.length === 0 && !loading ? (
-        <div>
-          <span>{i18n.t("ticketsList.noTicketsTitle")}</span>
-          <p>{i18n.t("ticketsList.noTicketsMessage")}</p>
-        </div>
-      ) : (
-        <>
-          {ticketsList.map((ticket) => (
-            <TicketListItem ticket={ticket} key={ticket.id} status={status} />
-          ))}
-        </>
-      )}
-      {loading && <TicketsListSkeleton />}
+    <ul style={{backgroundColor: "#55A5DC3F", height:"100vh",marginTop:"16px"}}>
+      {ticketsList &&
+        ticketsList.map((ticket) => <TicketListItem tickets={ticket} key={ticket.id} />)}
     </ul>
   );
 };