improvement: moved ticket logic to TicketListItem

frontend/src/components/TicketListItem/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { useHistory, useParams } from "react-router-dom";
 import { parseISO, format, isSameDay } from "date-fns";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -15,6 +16,8 @@ import Button from "@material-ui/core/Button";
 
 import { i18n } from "../../translate/i18n";
 
+import api from "../../services/api";
+
 const useStyles = makeStyles(theme => ({
 	ticket: {
 		position: "relative",
@@ -82,13 +85,27 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const TicketListItem = ({
+const TicketListItem = ({ ticket }) => {
-	ticket,
-	handleAcepptTicket,
-	handleSelectTicket,
-	selectedTicketId,
-}) => {
 	const classes = useStyles();
+	const history = useHistory();
+	const userId = +localStorage.getItem("userId");
+	const { ticketId } = useParams();
+
+	const handleAcepptTicket = async ticketId => {
+		try {
+			await api.put(`/tickets/${ticketId}`, {
+				status: "open",
+				userId: userId,
+			});
+		} catch (err) {
+			alert(err);
+		}
+		history.push(`/chat/${ticketId}`);
+	};
+
+	const handleSelectTicket = (e, ticket) => {
+		history.push(`/chat/${ticket.id}`);
+	};
 
 	return (
 		<React.Fragment key={ticket.id}>
@@ -99,7 +116,7 @@ const TicketListItem = ({
 					if (ticket.status === "pending" && handleAcepptTicket) return;
 					handleSelectTicket(e, ticket);
 				}}
-				selected={selectedTicketId && +selectedTicketId === ticket.id}
+				selected={ticketId && +ticketId === ticket.id}
 				className={classes.ticket}
 			>
 				<ListItemAvatar>

frontend/src/components/Tickets/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
@@ -19,7 +18,6 @@ import TicketsList from "../TicketsList";
 import TabPanel from "../TabPanel";
 
 import { i18n } from "../../translate/i18n";
-import api from "../../services/api";
 
 const useStyles = makeStyles(theme => ({
 	ticketsWrapper: {
@@ -85,19 +83,12 @@ const useStyles = makeStyles(theme => ({
 
 const Tickets = () => {
 	const classes = useStyles();
-	const history = useHistory();
 
-	const userId = +localStorage.getItem("userId");
-	const { ticketId } = useParams();
 	const [searchParam, setSearchParam] = useState("");
 	const [tab, setTab] = useState("open");
 	const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
 	const [showAllTickets, setShowAllTickets] = useState(false);
 
-	const handleSelectTicket = (e, ticket) => {
-		history.push(`/chat/${ticket.id}`);
-	};
-
 	const handleSearchContact = e => {
 		if (e.target.value === "") {
 			setSearchParam(e.target.value.toLowerCase());
@@ -112,18 +103,6 @@ const Tickets = () => {
 		setTab(newValue);
 	};
 
-	const handleAcepptTicket = async ticketId => {
-		try {
-			await api.put(`/tickets/${ticketId}`, {
-				status: "open",
-				userId: userId,
-			});
-		} catch (err) {
-			alert(err);
-		}
-		history.push(`/chat/${ticketId}`);
-	};
-
 	return (
 		<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
 			<NewTicketModal
@@ -194,35 +173,14 @@ const Tickets = () => {
 				</div>
 			</Paper>
 			<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
-				{/* <TicketsList
+				<TicketsList status="open" showAll={showAllTickets} />
-					status="open"
+				<TicketsList status="pending" showAll={true} />
-					handleSelectTicket={handleSelectTicket}
-					selectedTicketId={ticketId}
-					showAll={showAllTickets}
-				/> */}
-				<TicketsList
-					status="pending"
-					handleSelectTicket={handleSelectTicket}
-					handleAcepptTicket={handleAcepptTicket}
-					selectedTicketId={ticketId}
-					showAll={true}
-				/>
 			</TabPanel>
 			<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
-				<TicketsList
+				<TicketsList status="closed" showAll={true} />
-					status="closed"
-					handleSelectTicket={handleSelectTicket}
-					selectedTicketId={ticketId}
-					showAll={true}
-				/>
 			</TabPanel>
 			<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
-				<TicketsList
+				<TicketsList searchParam={searchParam} showAll={true} />
-					handleSelectTicket={handleSelectTicket}
-					selectedTicketId={ticketId}
-					searchParam={searchParam}
-					showAll={true}
-				/>
 			</TabPanel>
 		</Paper>
 	);

frontend/src/components/TicketsList/index.js

@@ -76,14 +76,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const TicketsList = ({
+const TicketsList = ({ status, searchParam, showAll }) => {
-	status,
-	searchParam,
-	handleSelectTicket,
-	handleAcepptTicket,
-	selectedTicketId,
-	showAll,
-}) => {
 	const classes = useStyles();
 	const [pageNumber, setPageNumber] = useState(1);
 
@@ -105,9 +98,7 @@ const TicketsList = ({
 
 	const handleScroll = e => {
 		if (!hasMore || loading) return;
-
 		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-
 		if (scrollHeight - (scrollTop + 100) < clientHeight) {
 			loadMore();
 		}
@@ -145,13 +136,7 @@ const TicketsList = ({
 					) : (
 						<>
 							{tickets.map(ticket => (
-								<TicketListItem
+								<TicketListItem ticket={ticket} key={ticket.id} />
-									ticket={ticket}
-									key={ticket.id}
-									handleSelectTicket={handleSelectTicket}
-									handleAcepptTicket={handleAcepptTicket}
-									selectedTicketId={selectedTicketId}
-								/>
 							))}
 						</>
 					)}