Estado funcional da busca de tickets pelo conteudo

backend/src/services/TicketServices/ListTicketsService.ts

@@ -168,7 +168,7 @@ const ListTicketsService = async ({
 
     if (searchParamContent.length > 0) {
 
-      console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL')
+      // console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL')
 
       includeCondition = [
         ...includeCondition,

frontend/src/components/ContactCreateTicketModal/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef, useCallback } from "react";
 import { useHistory } from "react-router-dom";
 import { toast } from "react-toastify";
 
@@ -8,6 +8,7 @@ import Select from "@material-ui/core/Select";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
+import LinearProgress from "@material-ui/core/LinearProgress";
 import { makeStyles } from "@material-ui/core";
 
 import DialogActions from "@material-ui/core/DialogActions";
@@ -28,11 +29,15 @@ const useStyles = makeStyles((theme) => ({
   },
   paper: {
     minWidth: "300px"
+  },
+  linearProgress: {
+    marginTop: "5px"
   }
 }));
 
 const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
   const { user } = useContext(AuthContext);
+  let isMounted = useRef(true)
 
   const history = useHistory();
   const [queues, setQueues] = useState([]);
@@ -42,6 +47,7 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
 
   useEffect(() => {
     const userQueues = user.queues.map(({ id, name, color }) => { return { id, name, color } })
+    if (userQueues.length === 1) setSelectedQueue(userQueues[0].id)
     setQueues(userQueues)
   }, [user]);
 
@@ -49,32 +55,45 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
     onClose();
   };
 
-  const handleSaveTicket = async (e) => {
+  const handleSaveTicket = useCallback(async (contactId, userId, queueId) => {
-    e.preventDefault()
+    if (!contactId || !userId) {
-    if (!contactId) return;
+      console.log("Missing contactId or userId")
-    if (!selectedQueue) {
+      return
+    };
+    if (!queueId) {
       toast.warning("Nenhuma Fila Selecionada")
       return
     }
-    setLoading(true);
+    if (isMounted.current) setLoading(true);
     try {
       const { data: ticket } = await api.post("/tickets", {
         contactId: contactId,
-        userId: user?.id,
+        userId: userId,
-        queueId: selectedQueue,
+        queueId: queueId,
         status: "open",
       });
       history.push(`/tickets/${ticket.id}`);
     } catch (err) {
       toastError(err);
-      onClose()
     }
-    setLoading(false);
+    if (isMounted.current) setLoading(false);
+  }, [history])
+
+  useEffect(() => {
+    if (modalOpen && queues.length <= 1) {
+      handleSaveTicket(contactId, user.id, selectedQueue)
+    }
+    return () => {
+      isMounted.current = false;
     };
+  }, [modalOpen, contactId, user.id, selectedQueue, handleSaveTicket, queues.length]);
+
+  if (modalOpen && queues.length <= 1) {
+    return <LinearProgress />
+  }
 
   return (
     <Dialog open={modalOpen} onClose={handleClose} maxWidth="xs" scroll="paper" classes={{ paper: classes.paper }}>
-      <form onSubmit={handleSaveTicket}>
       <DialogTitle id="form-dialog-title">
         {i18n.t("newTicketModal.title")}
       </DialogTitle>
@@ -103,15 +122,14 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
           {i18n.t("newTicketModal.buttons.cancel")}
         </Button>
         <ButtonWithSpinner
+          onClick={() => handleSaveTicket(contactId, user.id, selectedQueue)}
           variant="contained"
-            type="submit"
           color="primary"
           loading={loading}
         >
           {i18n.t("newTicketModal.buttons.ok")}
         </ButtonWithSpinner>
       </DialogActions>
-      </form>
     </Dialog>
   );
 };

frontend/src/components/TicketsManager/index.js

@@ -174,6 +174,26 @@ const TicketsManager = () => {
 
   }, [tab, setTabOption]);
 
+  useEffect(() => {
+
+
+    clearTimeout(searchContentTimeout);
+
+    setSearchParam(prev => ({ ...prev, searchParamContent: "" }))
+
+    // console.log('inputContentSearch1: ', inputContentSearch)
+
+    if (!inputContentSearch) return 
+
+    searchContentTimeout = setTimeout(() => {
+
+      setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
+
+    }, 500);
+
+
+  }, [inputContentSearch,]);
+
   useEffect(() => {
 
 
@@ -182,6 +202,7 @@ const TicketsManager = () => {
       setTabOption('')
       setSearchParam(DEFAULT_SEARCH_PARAM);
       setInputSearch('');
+      setInputContentSearch('')
       setTab("open");
       return;
     }
@@ -217,6 +238,7 @@ const TicketsManager = () => {
 
     if (searchedTerm.length < 4) {
       setSearchParam(prev => ({ ...prev, searchParamContent: "" }))
+      setInputContentSearch('')
     }
 
 
@@ -233,18 +255,16 @@ const TicketsManager = () => {
 
     console.log('searchedContentText: ', searchedContentText)
 
+    // clearTimeout(searchContentTimeout);
+
+    // searchContentTimeout = setTimeout(() => {
+
+    //   setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
+
+    // }, 500);
+
     setInputContentSearch(searchedContentText)
 
-    // setInputSearch(removeExtraSpace(searchedContentText))
-
-    clearTimeout(searchContentTimeout);
-
-    searchContentTimeout = setTimeout(() => {
-
-      setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
-
-    }, 500);
-
   }
 
   const handleOpenTooltipSearch = () => {
@@ -352,7 +372,7 @@ const TicketsManager = () => {
                     placeholder={i18n.t("Busca por conteúdo")}
                     type="search"
                     value={inputContentSearch}
-                    onChange={handleContentSearch}
+                    onChange={(e) => handleContentSearch(e)}
                   />
                 </div>) : null
             }