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

@@ -91,8 +91,6 @@ const Ticket = () => {
       const fetchTicket = async () => {
         try {
           
-          // maria julia
-
           const { data } = await api.get("/tickets/" + ticketId);
 
           // setContact(data.contact);

frontend/src/components/TicketsList/index.js

@@ -12,7 +12,7 @@ import useTickets from "../../hooks/useTickets";
 import { i18n } from "../../translate/i18n";
 import { AuthContext } from "../../context/Auth/AuthContext";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   ticketsListWrapper: {
     position: "relative",
     display: "flex",
@@ -75,12 +75,8 @@ const reducer = (state, action) => {
   if (action.type === "LOAD_TICKETS") {
     const newTickets = action.payload;
 
-	 
+    newTickets.forEach((ticket) => {
-		newTickets.forEach(ticket => {
+      const ticketIndex = state.findIndex((t) => t.id === ticket.id);
-
-			// console.log('* ticket.unreadMessages: ',ticket.unreadMessages)
-
-			const ticketIndex = state.findIndex(t => t.id === ticket.id);
       if (ticketIndex !== -1) {
         state[ticketIndex] = ticket;
         if (ticket.unreadMessages > 0) {
@@ -97,7 +93,7 @@ const reducer = (state, action) => {
   if (action.type === "RESET_UNREAD") {
     const ticketId = action.payload;
 
-		const ticketIndex = state.findIndex(t => t.id === ticketId);
+    const ticketIndex = state.findIndex((t) => t.id === ticketId);
     if (ticketIndex !== -1) {
       state[ticketIndex].unreadMessages = 0;
     }
@@ -108,9 +104,7 @@ 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);
-
-		const ticketIndex = state.findIndex(t => t.id === ticket.id);
     if (ticketIndex !== -1) {
       state[ticketIndex] = ticket;
     } else {
@@ -121,26 +115,19 @@ const reducer = (state, action) => {
   }
 
   if (action.type === "UPDATE_TICKET_UNREAD_MESSAGES") {
-
+    const message = action.payload.message;
-		const message = action.payload.message
 
     const ticket = action.payload.ticket;
 
-		const ticketIndex = state.findIndex(t => t.id === ticket.id);
+    const ticketIndex = state.findIndex((t) => t.id === ticket.id);
 
     if (ticketIndex !== -1) {
-			
+      if (!message.fromMe) {
-			// console.log('>>>>>> ticketIndex: ', ticketIndex)
+        ticket.unreadMessages += 1;
-
-			// console.log('&&&&&&& UPDATE_TICKET_UNREAD_MESSAGES ticket: ',ticket, ' |\n MESSAGE: ', message) 
-			
-			if(!message.fromMe){
-				ticket.unreadMessages +=1
       }
 
       state[ticketIndex] = ticket;
       state.unshift(state.splice(ticketIndex, 1)[0]);
-			
     } else {
       state.unshift(ticket);
     }
@@ -150,7 +137,7 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_TICKET_CONTACT") {
     const contact = action.payload;
-		const ticketIndex = state.findIndex(t => t.contactId === contact.id);
+    const ticketIndex = state.findIndex((t) => t.contactId === contact.id);
     if (ticketIndex !== -1) {
       state[ticketIndex].contact = contact;
     }
@@ -159,7 +146,7 @@ const reducer = (state, action) => {
 
   if (action.type === "DELETE_TICKET") {
     const ticketId = action.payload;
-		const ticketIndex = state.findIndex(t => t.id === ticketId);
+    const ticketIndex = state.findIndex((t) => t.id === ticketId);
     if (ticketIndex !== -1) {
       state.splice(ticketIndex, 1);
     }
@@ -172,9 +159,7 @@ const reducer = (state, action) => {
   }
 };
 
-const TicketsList = (props) => {
+const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount, style }) => {
-	const { status, searchParam, showAll, selectedQueueIds, updateCount, style } =
-		props;
   const classes = useStyles();
   const [pageNumber, setPageNumber] = useState(1);
   const [ticketsList, dispatch] = useReducer(reducer, []);
@@ -204,11 +189,11 @@ const TicketsList = (props) => {
   useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		const shouldUpdateTicket = ticket =>
+    const shouldUpdateTicket = (ticket) =>
       (!ticket.userId || ticket.userId === user?.id || showAll) &&
       (!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1);
 
-		const notBelongsToUserQueues = ticket =>
+    const notBelongsToUserQueues = (ticket) =>
       ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1;
 
     socket.on("connect", () => {
@@ -217,10 +202,9 @@ const TicketsList = (props) => {
       } else {
         socket.emit("joinNotification");
       }
-
     });
 
-		socket.on("ticket", data => {
+    socket.on("ticket", (data) => {
       if (data.action === "updateUnread") {
         dispatch({
           type: "RESET_UNREAD",
@@ -244,11 +228,8 @@ const TicketsList = (props) => {
       }
     });
 
-		socket.on("appMessage", data => {
+    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,
@@ -257,7 +238,7 @@ const TicketsList = (props) => {
       }
     });
 
-		socket.on("contact", data => {
+    socket.on("contact", (data) => {
       if (data.action === "update") {
         dispatch({
           type: "UPDATE_TICKET_CONTACT",
@@ -272,20 +253,16 @@ const TicketsList = (props) => {
   }, [status, showAll, user, selectedQueueIds]);
 
   useEffect(() => {
-
-
-
     if (typeof updateCount === "function") {
       updateCount(ticketsList.length);
     }
-		// eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ticketsList]);
 
   const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
+    setPageNumber((prevState) => prevState + 1);
   };
 
-	const handleScroll = e => {
+  const handleScroll = (e) => {
     if (!hasMore || loading) return;
 
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
@@ -307,16 +284,12 @@ const TicketsList = (props) => {
         <List style={{ paddingTop: 0 }}>
           {ticketsList.length === 0 && !loading ? (
             <div className={classes.noTicketsDiv}>
-							<span className={classes.noTicketsTitle}>
+              <span className={classes.noTicketsTitle}>{i18n.t("ticketsList.noTicketsTitle")}</span>
-								{i18n.t("ticketsList.noTicketsTitle")}
+              <p className={classes.noTicketsText}>{i18n.t("ticketsList.noTicketsMessage")}</p>
-							</span>
-							<p className={classes.noTicketsText}>
-								{i18n.t("ticketsList.noTicketsMessage")}
-							</p>
             </div>
           ) : (
             <>
-							{ticketsList.map(ticket => (
+              {ticketsList.map((ticket) => (
                 <TicketListItem ticket={ticket} key={ticket.id} />
               ))}
             </>
@@ -329,3 +302,4 @@ const TicketsList = (props) => {
 };
 
 export default TicketsList;
+

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 (
+      <>
+        <NewTicketModal
+          modalOpen={newTicketModalOpen}
+          onClose={(e) => setNewTicketModalOpen(false)}
+        />
+        <div>
+          <TicketsQueueSelect
+            style={{ marginLeft: 6 }}
+            selectedQueueIds={selectedQueueIds}
+            userQueues={user?.queues}
+            onChange={(values) => setSelectedQueueIds(values)}
+          />
+          <TicketsList
+            status="open"
+            showAll={showAllTickets}
+            selectedQueueIds={selectedQueueIds}
+            updateCount={(val) => setOpenCount(val)}
+            style={applyPanelStyle("open")}
+          />
+          <TicketsList
+            status="pending"
+            selectedQueueIds={selectedQueueIds}
+            updateCount={(val) => setPendingCount(val)}
+            style={applyPanelStyle("pending")}
+          />
+        </div>
+      </>
+    );
+  }
+  return (
+    <Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
+      <NewTicketModal
+        modalOpen={newTicketModalOpen}
+        onClose={(e) => setNewTicketModalOpen(false)}
+      />
+      <Paper elevation={0} square className={classes.tabsHeader}>
+        <Tabs
+          value={tab}
+          onChange={handleChangeTab}
+          variant="fullWidth"
+          indicatorColor="primary"
+          textColor="primary"
+          aria-label="icon label tabs example"
+        >
+          <Tab
+            value={"open"}
+            icon={<MoveToInboxIcon />}
+            label={i18n.t("tickets.tabs.open.title")}
+            classes={{ root: classes.tab }}
+          />
+          <Tab
+            value={"closed"}
+            icon={<CheckBoxIcon />}
+            label={i18n.t("tickets.tabs.closed.title")}
+            classes={{ root: classes.tab }}
+          />
+          <Tab
+            value={"search"}
+            icon={<SearchIcon />}
+            label={i18n.t("tickets.tabs.search.title")}
+            classes={{ root: classes.tab }}
+          />
+        </Tabs>
+      </Paper>
+      <Paper square elevation={0} className={classes.ticketOptionsBox}>
+        {tab === "search" ? (
+          <div className={classes.serachInputWrapper}>
+            <SearchIcon className={classes.searchIcon} />
+            <InputBase
+              className={classes.searchInput}
+              inputRef={searchInputRef}
+              placeholder={i18n.t("tickets.search.placeholder")}
+              type="search"
+              onChange={handleSearch}
+            />
+          </div>
+        ) : (
+          <>
+            <Button variant="outlined" color="primary" onClick={() => setNewTicketModalOpen(true)}>
+              {i18n.t("ticketsManager.buttons.newTicket")}
+            </Button>
+            <Can
+              role={user.profile}
+              perform="tickets-manager:showall"
+              yes={() => (
+                <FormControlLabel
+                  label={i18n.t("tickets.buttons.showAll")}
+                  labelPlacement="start"
+                  control={
+                    <Switch
+                      size="small"
+                      checked={showAllTickets}
+                      onChange={() => setShowAllTickets((prevState) => !prevState)}
+                      name="showAllTickets"
+                      color="primary"
+                    />
+                  }
+                />
+              )}
+            />
+          </>
+        )}
+        <TicketsQueueSelect
+          style={{ marginLeft: 6 }}
+          selectedQueueIds={selectedQueueIds}
+          userQueues={user?.queues}
+          onChange={(values) => setSelectedQueueIds(values)}
+        />
+      </Paper>
+      <TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
+        <Tabs
+          value={tabOpen}
+          onChange={handleChangeTabOpen}
+          indicatorColor="primary"
+          textColor="primary"
+          variant="fullWidth"
+        >
+          <Tab
+            label={
+              <Badge className={classes.badge} badgeContent={openCount} color="primary">
+                {i18n.t("ticketsList.assignedHeader")}
+              </Badge>
+            }
+            value={"open"}
+          />
+          <Tab
+            label={
+              <Badge className={classes.badge} badgeContent={pendingCount} color="secondary">
+                {i18n.t("ticketsList.pendingHeader")}
+              </Badge>
+            }
+            value={"pending"}
+          />
+        </Tabs>
+        <Paper className={classes.ticketsWrapper}>
+          <TicketsList
+            status="open"
+            showAll={showAllTickets}
+            selectedQueueIds={selectedQueueIds}
+            updateCount={(val) => setOpenCount(val)}
+            style={applyPanelStyle("open")}
+          />
+          <TicketsList
+            status="pending"
+            selectedQueueIds={selectedQueueIds}
+            updateCount={(val) => setPendingCount(val)}
+            style={applyPanelStyle("pending")}
+          />
+        </Paper>
+      </TabPanel>
+      <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
+        <TicketsList status="closed" showAll={true} selectedQueueIds={selectedQueueIds} />
+      </TabPanel>
+      <TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
+        <TicketsList searchParam={searchParam} showAll={true} selectedQueueIds={selectedQueueIds} />
+      </TabPanel>
+    </Paper>
+  );
+};
+
+export default TicketsManager;

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(() => {

frontend/src/components/TicketsQueueSelect/index.js

@@ -6,12 +6,8 @@ import Select from "@material-ui/core/Select";
 import { Checkbox, ListItemText } from "@material-ui/core";
 import { i18n } from "../../translate/i18n";
 
-const TicketsQueueSelect = ({
+const TicketsQueueSelect = ({ userQueues, selectedQueueIds = [], onChange }) => {
-	userQueues,
+  const handleChange = (e) => {
-	selectedQueueIds = [],
-	onChange,
-}) => {
-	const handleChange = e => {
     onChange(e.target.value);
   };
 
@@ -38,7 +34,7 @@ const TicketsQueueSelect = ({
           renderValue={() => i18n.t("ticketsQueueSelect.placeholder")}
         >
           {userQueues?.length > 0 &&
-						userQueues.map(queue => (
+            userQueues.map((queue) => (
               <MenuItem dense key={queue.id} value={queue.id}>
                 <Checkbox
                   style={{
@@ -58,3 +54,4 @@ const TicketsQueueSelect = ({
 };
 
 export default TicketsQueueSelect;
+

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 (
     <ModalOverlayStyled modal={modal}>
@@ -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 })}
           />
           <InputComponent
             id="email"
             label="E-mail"
             type="email"
             value={userData.email}
-            onChange={(event) => setUserData({email:event.target.data})}
+            onChange={(event) => setUserData({ email: event.target.data })}
           />
           <InputComponent id="password" label="Senha" type="password" />
           <UserBtns>
@@ -63,3 +86,4 @@ name: "teste"
 profile: "master"
 queues: []
 tokenVersion: 0 */
+

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 (
+    <TicketsStyled>
+      <TicketsManager />
+      {ticketId ? <Ticket /> : <div>Não tem nada</div>}
+    </TicketsStyled>
+  );
+};
+
+export default Tickets;
+

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

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";