feat: tickets and messages search concluded

2026-04-18 03:39:29 +00:00 · 2020-08-06 15:29:25 -03:00
parent 527e7c5375
commit bfd5c4f1a3
6 changed files with 127 additions and 80 deletions
--- 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) => {
--- 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",
--- 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 <TicketsSkeleton />;
 		} else if (
 			countTickets(status, userId) === "" &&
@@ -546,6 +559,22 @@ const TicketsList = () => {
 		}
 	};

+	const RenderInfiniteScroll = ({ children, loadingKey }) => {
+		return (
+			<InfiniteScroll
+				pageStart={0}
+				loadMore={loadMore}
+				hasMore={!(tickets.length === count)}
+				useWindow={false}
+				initialLoad={false}
+				threshold={100}
+				loader={<TicketsSkeleton key={loadingKey} />}
+			>
+				<List style={{ paddingTop: 0 }}>{children}</List>
+			</InfiniteScroll>
+		);
+	};
+
 	return (
 		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
 			<NewTicketModal
@@ -586,55 +615,55 @@ const TicketsList = () => {
 					<SearchIcon className={classes.searchIcon} />
 					<InputBase
 						className={classes.contactsSearchInput}
-						placeholder="Buscar contatos"
+						placeholder="Pesquisar tickets e mensagens"
 						type="search"
 						onChange={handleSearchContact}
 					/>
 				</div>
 			</Paper>
 			<TabPanel value={tab} index={"open"} className={classes.contactsWrapper}>
-				<Paper square elevation={0} className={classes.openTicketsList}>
-					<List style={{ paddingTop: 0 }}>
-						<div className={classes.ticketsListHeader}>
-							Atendendo
-							<span className={classes.ticketsCount}>
-								{countTickets("open", userId)}
-							</span>
-							<div className={classes.ticketsListActions}>
-								<FormControlLabel
-									label="Todos"
-									labelPlacement="start"
-									control={
-										<Switch
-											size="small"
-											checked={showAllTickets}
-											onChange={e => setShowAllTickets(prevState => !prevState)}
-											name="showAllTickets"
-											color="primary"
-										/>
-									}
-								/>
-								<IconButton
-									aria-label="add ticket"
-									onClick={e => setNewTicketModalOpen(true)}
-									style={{ marginLeft: 20 }}
-								>
-									<AddIcon />
-								</IconButton>
-							</div>
+				<Paper square elevation={0} className={classes.halfTicketsList}>
+					<div className={classes.ticketsListHeader}>
+						Atendendo
+						<span className={classes.ticketsCount}>
+							{countTickets("open", userId)}
+						</span>
+						<div className={classes.ticketsListActions}>
+							<FormControlLabel
+								label="Todos"
+								labelPlacement="start"
+								control={
+									<Switch
+										size="small"
+										checked={showAllTickets}
+										onChange={e => setShowAllTickets(prevState => !prevState)}
+										name="showAllTickets"
+										color="primary"
+									/>
+								}
+							/>
+							<IconButton
+								aria-label="add ticket"
+								onClick={e => setNewTicketModalOpen(true)}
+								style={{ marginLeft: 20 }}
+							>
+								<AddIcon />
+							</IconButton>
 						</div>
-						{renderTickets("open", userId)}
+					</div>
+					<List style={{ paddingTop: 0 }}>
+						<RenderTickets status="open" userId={userId} />
 					</List>
 				</Paper>
-				<Paper square elevation={0} className={classes.openTicketsList}>
+				<Paper square elevation={0} className={classes.halfTicketsList}>
+					<div className={classes.ticketsListHeader}>
+						Aguardando
+						<span className={classes.ticketsCount}>
+							{countTickets("pending", null)}
+						</span>
+					</div>
 					<List style={{ paddingTop: 0 }}>
-						<div className={classes.ticketsListHeader}>
-							Aguardando
-							<span className={classes.ticketsCount}>
-								{countTickets("pending", null)}
-							</span>
-						</div>
-						{renderTickets("pending", null)}
+						<RenderTickets status="pending" userId={null} />
 					</List>
 				</Paper>
 			</TabPanel>
@@ -643,8 +672,10 @@ const TicketsList = () => {
 				index={"closed"}
 				className={classes.contactsWrapper}
 			>
-				<Paper square elevation={0} className={classes.closedTicketsList}>
-					<List>{renderTickets("closed", userId)}</List>
+				<Paper square elevation={0} className={classes.fullHeightTicketsList}>
+					<RenderInfiniteScroll loadingKey="loading-closed">
+						<RenderTickets status="closed" userId={null} />
+					</RenderInfiniteScroll>
 				</Paper>
 			</TabPanel>
 			<TabPanel
@@ -652,25 +683,21 @@ const TicketsList = () => {
 				index={"search"}
 				className={classes.contactsWrapper}
 			>
-				<Paper square elevation={0} className={classes.closedTicketsList}>
-					{loading ? (
-						<TicketsSkeleton />
-					) : (
-						<>
-							{tickets.length === 0 ? (
-								<div className={classes.noTicketsDiv}>
-									<span className={classes.noTicketsTitle}>
-										"Nada encontrado"
-									</span>
-									<p className={classes.noTicketsText}>
-										Tente buscar por outro termo.
-									</p>
-								</div>
-							) : (
-								<List>{renderTickets("all")}</List>
-							)}
-						</>
-					)}
+				<Paper square elevation={0} className={classes.fullHeightTicketsList}>
+					<>
+						{tickets.length === 0 && !loading ? (
+							<div className={classes.noTicketsDiv}>
+								<span className={classes.noTicketsTitle}>Nada encontrado</span>
+								<p className={classes.noTicketsText}>
+									Tente buscar por outro termo.
+								</p>
+							</div>
+						) : (
+							<RenderInfiniteScroll loadingKey="loading-all">
+								<RenderTickets status="all" />
+							</RenderInfiniteScroll>
+						)}
+					</>
 				</Paper>
 			</TabPanel>
 			<audio id="sound" preload="auto">
--- a/frontend/src/components/TicketsSkeleton/index.js
+++ b/frontend/src/components/TicketsSkeleton/index.js
@@ -18,7 +18,7 @@ const TicketsSkeleton = () => {
 					secondary={<Skeleton animation="wave" height={20} width={90} />}
 				/>
 			</ListItem>
-			<Divider />
+			<Divider variant="inset" />
 			<ListItem dense>
 				<ListItemAvatar>
 					<Skeleton animation="wave" variant="circle" width={40} height={40} />
@@ -28,7 +28,7 @@ const TicketsSkeleton = () => {
 					secondary={<Skeleton animation="wave" height={20} width={120} />}
 				/>
 			</ListItem>
-			<Divider />
+			<Divider variant="inset" />
 			<ListItem dense>
 				<ListItemAvatar>
 					<Skeleton animation="wave" variant="circle" width={40} height={40} />
@@ -38,7 +38,7 @@ const TicketsSkeleton = () => {
 					secondary={<Skeleton animation="wave" height={20} width={90} />}
 				/>
 			</ListItem>
-			<Divider />
+			<Divider variant="inset" />
 		</>
 	);
 };
--- a/frontend/src/pages/Dashboard/Chart.js
+++ b/frontend/src/pages/Dashboard/Chart.js
@@ -36,10 +36,10 @@ const Chart = () => {
 	useEffect(() => {
 		const feathTickets = async () => {
 			try {
-				const res = await api.get("/tickets", {
+				const { data } = await api.get("/tickets", {
 					params: { date: new Date().toISOString() },
 				});
-				let ticketsData = res.data;
+				const ticketsData = data.tickets;
 				setTickets(ticketsData);
 				setChartData(prevState => {
 					let aux = [...prevState];
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -9012,7 +9012,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.4"

-prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9249,6 +9249,13 @@ react-infinite-scroll-reverse@^1.0.3:
  dependencies:
    prop-types "15.7.2"

+react-infinite-scroller@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
+  integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"