diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js index f2a34d5..4339940 100644 --- a/backend/src/controllers/TicketController.js +++ b/backend/src/controllers/TicketController.js @@ -8,7 +8,15 @@ const Message = require("../models/Message"); const { getIO } = require("../libs/socket"); exports.index = async (req, res) => { - const { status = "", date = "", searchParam = "" } = req.query; + const { + pageNumber = 1, + status = "", + date = "", + searchParam = "", + } = req.query; + + let limit = 20; + let offset = limit * (pageNumber - 1); let whereCondition = {}; let includeCondition = [ @@ -41,6 +49,7 @@ exports.index = async (req, res) => { ), }, required: false, + duplicating: false, }, ]; @@ -78,13 +87,16 @@ exports.index = async (req, res) => { }; } - const tickets = await Ticket.findAll({ + const { count, rows: tickets } = await Ticket.findAndCountAll({ where: whereCondition, + distinct: true, include: includeCondition, + limit, + offset, order: [["updatedAt", "DESC"]], }); - return res.json(tickets); + return res.json({ count, tickets }); }; exports.store = async (req, res) => { diff --git a/frontend/package.json b/frontend/package.json index 459c388..40c7533 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-infinite-scroll-reverse": "^1.0.3", + "react-infinite-scroller": "^1.2.4", "react-linkify": "^1.0.0-alpha", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index 1d3404a..dc2b7da 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -3,6 +3,7 @@ import { useHistory, useParams } from "react-router-dom"; import openSocket from "socket.io-client"; import { parseISO, format } from "date-fns"; import { toast } from "react-toastify"; +import InfiniteScroll from "react-infinite-scroller"; import { makeStyles } from "@material-ui/core/styles"; import { green } from "@material-ui/core/colors"; @@ -60,7 +61,7 @@ const useStyles = makeStyles(theme => ({ width: 120, // a number of your choice }, - openTicketsList: { + halfTicketsList: { height: "50%", overflowY: "scroll", "&::-webkit-scrollbar": { @@ -74,7 +75,7 @@ const useStyles = makeStyles(theme => ({ borderTop: "1px solid rgba(0, 0, 0, 0.12)", }, - closedTicketsList: { + fullHeightTicketsList: { flex: 1, overflowY: "scroll", "&::-webkit-scrollbar": { @@ -245,6 +246,9 @@ const TicketsList = () => { const [newTicketModalOpen, setNewTicketModalOpen] = useState(false); const [showAllTickets, setShowAllTickets] = useState(false); + const [pageNumber, setPageNumber] = useState(1); + const [count, setCount] = useState(0); + useEffect(() => { if (!("Notification" in window)) { console.log("This browser doesn't support notifications"); @@ -255,17 +259,21 @@ const TicketsList = () => { useEffect(() => { setTickets([]); - }, [searchParam]); + setPageNumber(1); + }, [searchParam, tab]); useEffect(() => { setLoading(true); const delayDebounceFn = setTimeout(() => { const fetchContacts = async () => { try { - const res = await api.get("/tickets", { - params: { searchParam, status: tab }, + const { data } = await api.get("/tickets", { + params: { searchParam, pageNumber, status: tab }, }); - setTickets(res.data); + setTickets(prevState => { + return [...prevState, ...data.tickets]; + }); + setCount(data.count); setLoading(false); } catch (err) { console.log(err); @@ -274,7 +282,9 @@ const TicketsList = () => { fetchContacts(); }, 1000); return () => clearTimeout(delayDebounceFn); - }, [searchParam, token, tab]); + }, [searchParam, pageNumber, token, tab]); + + console.log(pageNumber); useEffect(() => { const socket = openSocket(process.env.REACT_APP_BACKEND_URL); @@ -316,6 +326,11 @@ const TicketsList = () => { }; }, [ticketId, userId, history]); + const loadMore = () => { + if (loading) return; + setPageNumber(prevPageNumber => prevPageNumber + 1); + }; + const updateTickets = ({ ticket }) => { setTickets(prevState => { const ticketIndex = prevState.findIndex(t => t.id === ticket.id); @@ -388,7 +403,6 @@ const TicketsList = () => { const handleSearchContact = e => { if (e.target.value === "") { - // setTab("open"); setSearchParam(e.target.value.toLowerCase()); return; } @@ -423,8 +437,7 @@ const TicketsList = () => { return ticketsFound; }; - console.log(tickets); - const renderTickets = (status, userId) => { + const RenderTickets = ({ status, userId }) => { const viewTickets = tickets.map(ticket => { if ( (ticket.status === status && ticket.userId === userId) || @@ -521,7 +534,7 @@ const TicketsList = () => { else return null; }); - if (loading) { + if (loading && status !== "all" && status !== "closed") { return ; } else if ( countTickets(status, userId) === "" && @@ -546,6 +559,22 @@ const TicketsList = () => { } }; + const RenderInfiniteScroll = ({ children, loadingKey }) => { + return ( + } + > + {children} + + ); + }; + return ( { - - -
- Atendendo - - {countTickets("open", userId)} - -
- setShowAllTickets(prevState => !prevState)} - name="showAllTickets" - color="primary" - /> - } - /> - setNewTicketModalOpen(true)} - style={{ marginLeft: 20 }} - > - - -
+ +
+ Atendendo + + {countTickets("open", userId)} + +
+ setShowAllTickets(prevState => !prevState)} + name="showAllTickets" + color="primary" + /> + } + /> + setNewTicketModalOpen(true)} + style={{ marginLeft: 20 }} + > + +
- {renderTickets("open", userId)} +
+ +
- + +
+ Aguardando + + {countTickets("pending", null)} + +
-
- Aguardando - - {countTickets("pending", null)} - -
- {renderTickets("pending", null)} +
@@ -643,8 +672,10 @@ const TicketsList = () => { index={"closed"} className={classes.contactsWrapper} > - - {renderTickets("closed", userId)} + + + + { index={"search"} className={classes.contactsWrapper} > - - {loading ? ( - - ) : ( - <> - {tickets.length === 0 ? ( -
- - "Nada encontrado" - -

- Tente buscar por outro termo. -

-
- ) : ( - {renderTickets("all")} - )} - - )} + + <> + {tickets.length === 0 && !loading ? ( +
+ Nada encontrado +

+ Tente buscar por outro termo. +

+
+ ) : ( + + + + )} +