chore: split ticket in multiple componentts

backend/src/controllers/TicketController.ts

@@ -4,6 +4,7 @@ import { getIO } from "../libs/socket";
 import CreateTicketService from "../services/TicketServices/CreateTicketService";
 import DeleteTicketService from "../services/TicketServices/DeleteTicketService";
 import ListTicketsService from "../services/TicketServices/ListTicketsService";
+import ShowTicketService from "../services/TicketServices/ShowTicketService";
 import UpdateTicketService from "../services/TicketServices/UpdateTicketService";
 
 type IndexQuery = {
@@ -60,6 +61,14 @@ export const store = async (req: Request, res: Response): Promise<Response> => {
   return res.status(200).json(ticket);
 };
 
+export const show = async (req: Request, res: Response): Promise<Response> => {
+  const { ticketId } = req.params;
+
+  const contact = await ShowTicketService(ticketId);
+
+  return res.status(200).json(contact);
+};
+
 export const update = async (
   req: Request,
   res: Response

backend/src/routes/ticketRoutes.ts

@@ -7,6 +7,8 @@ const ticketRoutes = express.Router();
 
 ticketRoutes.get("/tickets", isAuth, TicketController.index);
 
+ticketRoutes.get("/tickets/:ticketId", isAuth, TicketController.show);
+
 ticketRoutes.post("/tickets", isAuth, TicketController.store);
 
 ticketRoutes.put("/tickets/:ticketId", isAuth, TicketController.update);

backend/src/services/ContactServices/UpdateContactService.ts

@@ -56,8 +56,12 @@ const UpdateContactService = async ({
   await contact.update({
     name,
     number,
-    email,
+    email
-    extraInfo
+  });
+
+  await contact.reload({
+    attributes: ["id", "name", "number", "email", "profilePicUrl"],
+    include: ["extraInfo"]
   });
 
   return contact;

backend/src/services/WbotServices/wbotMessageListener.ts

@@ -27,19 +27,26 @@ const verifyContact = async (
   msgContact: WbotContact,
   profilePicUrl: string
 ): Promise<Contact> => {
+  const io = getIO();
+
   let contact = await Contact.findOne({
     where: { number: msgContact.id.user }
   });
 
   if (contact) {
     await contact.update({ profilePicUrl });
+
+    io.emit("contact", {
+      action: "update",
+      contact
+    });
   } else {
     contact = await Contact.create({
       name: msgContact.name || msgContact.pushname || msgContact.id.user,
       number: msgContact.id.user,
       profilePicUrl
     });
-    const io = getIO();
+
     io.emit("contact", {
       action: "create",
       contact

frontend/src/components/MessageListItem/index.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const MessageListItem = () => {
+	return <div></div>;
+};
+
+export default MessageListItem;

frontend/src/components/MessagesList/index.js

@@ -0,0 +1,559 @@
+import React, { useState, useEffect, useReducer, useRef } from "react";
+
+import { isSameDay, parseISO, format } from "date-fns";
+import openSocket from "socket.io-client";
+import clsx from "clsx";
+
+import { green } from "@material-ui/core/colors";
+import {
+	Button,
+	CircularProgress,
+	Divider,
+	IconButton,
+	makeStyles,
+} from "@material-ui/core";
+import {
+	AccessTime,
+	Block,
+	Done,
+	DoneAll,
+	ExpandMore,
+	GetApp,
+} from "@material-ui/icons";
+
+import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
+import ModalImageCors from "../ModalImageCors";
+import MessageOptionsMenu from "../MessageOptionsMenu";
+import whatsBackground from "../../assets/wa-background.png";
+
+import api from "../../services/api";
+import { toast } from "react-toastify";
+
+const useStyles = makeStyles(theme => ({
+	messagesListWrapper: {
+		overflow: "hidden",
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+	},
+
+	messagesList: {
+		backgroundImage: `url(${whatsBackground})`,
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		padding: "20px 20px 20px 20px",
+		overflowY: "scroll",
+		...theme.scrollbarStyles,
+	},
+
+	circleLoading: {
+		color: green[500],
+		position: "absolute",
+		opacity: "70%",
+		top: 0,
+		left: "50%",
+		marginTop: 12,
+	},
+
+	messageLeft: {
+		marginRight: 20,
+		marginTop: 2,
+		minWidth: 100,
+		maxWidth: 600,
+		height: "auto",
+		display: "block",
+		position: "relative",
+
+		whiteSpace: "pre-wrap",
+		backgroundColor: "#ffffff",
+		color: "#303030",
+		alignSelf: "flex-start",
+		borderTopLeftRadius: 0,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 8,
+		paddingLeft: 5,
+		paddingRight: 5,
+		paddingTop: 5,
+		paddingBottom: 0,
+		boxShadow: "0 1px 1px #b3b3b3",
+	},
+
+	messageRight: {
+		marginLeft: 20,
+		marginTop: 2,
+		minWidth: 100,
+		maxWidth: 600,
+		height: "auto",
+		display: "block",
+		position: "relative",
+
+		"&:hover #messageActionsButton": {
+			display: "flex",
+			position: "absolute",
+			top: 0,
+			right: 0,
+		},
+
+		whiteSpace: "pre-wrap",
+		backgroundColor: "#dcf8c6",
+		color: "#303030",
+		alignSelf: "flex-end",
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 0,
+		paddingLeft: 5,
+		paddingRight: 5,
+		paddingTop: 5,
+		paddingBottom: 0,
+		boxShadow: "0 1px 1px #b3b3b3",
+	},
+
+	messageActionsButton: {
+		display: "none",
+		position: "relative",
+		color: "#999",
+		zIndex: 1,
+		backgroundColor: "#dcf8c6",
+		"&:hover, &.Mui-focusVisible": { backgroundColor: "#dcf8c6" },
+	},
+
+	messageContactName: {
+		display: "flex",
+		paddingLeft: 6,
+		color: "#6bcbef",
+		fontWeight: 500,
+	},
+
+	textContentItem: {
+		overflowWrap: "break-word",
+		padding: "3px 80px 6px 6px",
+	},
+
+	textContentItemDeleted: {
+		fontStyle: "italic",
+		color: "rgba(0, 0, 0, 0.36)",
+		overflowWrap: "break-word",
+		padding: "3px 80px 6px 6px",
+	},
+
+	messageMedia: {
+		objectFit: "cover",
+		width: 250,
+		height: 200,
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 8,
+	},
+
+	timestamp: {
+		fontSize: 11,
+		position: "absolute",
+		bottom: 0,
+		right: 5,
+		color: "#999",
+	},
+
+	dailyTimestamp: {
+		alignItems: "center",
+		textAlign: "center",
+		alignSelf: "center",
+		width: "110px",
+		backgroundColor: "#e1f3fb",
+		margin: "10px",
+		borderRadius: "10px",
+		boxShadow: "0 1px 1px #b3b3b3",
+	},
+
+	dailyTimestampText: {
+		color: "#808888",
+		padding: 8,
+		alignSelf: "center",
+		marginLeft: "0px",
+	},
+
+	ackIcons: {
+		fontSize: 18,
+		verticalAlign: "middle",
+		marginLeft: 4,
+	},
+
+	deletedIcon: {
+		fontSize: 18,
+		verticalAlign: "middle",
+		marginRight: 4,
+	},
+
+	ackDoneAllIcon: {
+		color: green[500],
+		fontSize: 18,
+		verticalAlign: "middle",
+		marginLeft: 4,
+	},
+
+	downloadMedia: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: "inherit",
+		padding: 10,
+	},
+}));
+
+const reducer = (state, action) => {
+	if (action.type === "LOAD_MESSAGES") {
+		const messages = action.payload;
+		const newMessages = [];
+
+		messages.forEach(message => {
+			const messageIndex = state.findIndex(m => m.id === message.id);
+			if (messageIndex !== -1) {
+				state[messageIndex] = message;
+			} else {
+				newMessages.push(message);
+			}
+		});
+
+		return [...newMessages, ...state];
+	}
+
+	if (action.type === "ADD_MESSAGE") {
+		const newMessage = action.payload;
+		const messageIndex = state.findIndex(m => m.id === newMessage.id);
+
+		if (messageIndex !== -1) {
+			state[messageIndex] = newMessage;
+		} else {
+			state.push(newMessage);
+		}
+
+		return [...state];
+	}
+
+	if (action.type === "UPDATE_MESSAGE") {
+		const messageToUpdate = action.payload;
+		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
+
+		if (messageIndex !== -1) {
+			state[messageIndex] = messageToUpdate;
+		}
+
+		return [...state];
+	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
+};
+
+const MessagesList = ({ ticketId }) => {
+	const classes = useStyles();
+
+	const [messagesList, dispatch] = useReducer(reducer, []);
+	const [pageNumber, setPageNumber] = useState(1);
+	const [hasMore, setHasMore] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const lastMessageRef = useRef();
+
+	const [selectedMessageId, setSelectedMessageId] = useState(null);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const messageOptionsMenuOpen = Boolean(anchorEl);
+
+	useEffect(() => {
+		dispatch({ type: "RESET" });
+		setPageNumber(1);
+	}, [ticketId]);
+
+	useEffect(() => {
+		setLoading(true);
+		const delayDebounceFn = setTimeout(() => {
+			const fetchMessages = async () => {
+				try {
+					const { data } = await api.get("/messages/" + ticketId, {
+						params: { pageNumber },
+					});
+
+					dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
+					setHasMore(data.hasMore);
+
+					if (pageNumber === 1 && data.messages.length > 1) {
+						scrollToBottom();
+					}
+				} catch (err) {
+					console.log(err);
+					if (err.response && err.response.data && err.response.data.error) {
+						toast.error(err.response.data.error);
+					}
+				}
+			};
+
+			setLoading(false);
+			fetchMessages();
+		}, 500);
+		return () => clearTimeout(delayDebounceFn);
+	}, [pageNumber, ticketId]);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		socket.emit("joinChatBox", ticketId);
+
+		socket.on("appMessage", data => {
+			if (data.action === "create") {
+				dispatch({ type: "ADD_MESSAGE", payload: data.message });
+				scrollToBottom();
+			}
+
+			if (data.action === "update") {
+				dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, [ticketId]);
+
+	const loadMore = () => {
+		setPageNumber(prevPageNumber => prevPageNumber + 1);
+	};
+
+	const scrollToBottom = () => {
+		if (lastMessageRef.current) {
+			lastMessageRef.current.scrollIntoView({});
+		}
+	};
+
+	const handleScroll = e => {
+		if (!hasMore) return;
+		const { scrollTop } = e.currentTarget;
+
+		if (scrollTop === 0) {
+			document.getElementById("messagesList").scrollTop = 1;
+		}
+
+		if (loading) {
+			return;
+		}
+
+		if (scrollTop < 50) {
+			loadMore();
+		}
+	};
+
+	const handleOpenMessageOptionsMenu = (e, messageId) => {
+		setAnchorEl(e.currentTarget);
+		setSelectedMessageId(messageId);
+	};
+
+	const handleCloseMessageOptionsMenu = e => {
+		setAnchorEl(null);
+	};
+
+	const checkMessageMedia = message => {
+		if (message.mediaType === "image") {
+			return <ModalImageCors imageUrl={message.mediaUrl} />;
+		}
+		if (message.mediaType === "audio") {
+			return (
+				<audio controls>
+					<source src={message.mediaUrl} type="audio/ogg"></source>
+				</audio>
+			);
+		}
+
+		if (message.mediaType === "video") {
+			return (
+				<video
+					className={classes.messageMedia}
+					src={message.mediaUrl}
+					controls
+				/>
+			);
+		} else {
+			return (
+				<>
+					<div className={classes.downloadMedia}>
+						<Button
+							startIcon={<GetApp />}
+							color="primary"
+							variant="outlined"
+							target="_blank"
+							href={message.mediaUrl}
+						>
+							Download
+						</Button>
+					</div>
+					<Divider />
+				</>
+			);
+		}
+	};
+
+	const renderMessageAck = message => {
+		if (message.ack === 0) {
+			return <AccessTime fontSize="small" className={classes.ackIcons} />;
+		}
+		if (message.ack === 1) {
+			return <Done fontSize="small" className={classes.ackIcons} />;
+		}
+		if (message.ack === 2) {
+			return <DoneAll fontSize="small" className={classes.ackIcons} />;
+		}
+		if (message.ack === 3) {
+			return <DoneAll fontSize="small" className={classes.ackDoneAllIcon} />;
+		}
+	};
+
+	const renderDailyTimestamps = (message, index) => {
+		if (index === 0) {
+			return (
+				<span
+					className={classes.dailyTimestamp}
+					key={`timestamp-${message.id}`}
+				>
+					<div className={classes.dailyTimestampText}>
+						{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
+					</div>
+				</span>
+			);
+		}
+		if (index < messagesList.length - 1) {
+			let messageDay = parseISO(messagesList[index].createdAt);
+			let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
+
+			if (!isSameDay(messageDay, previousMessageDay)) {
+				return (
+					<span
+						className={classes.dailyTimestamp}
+						key={`timestamp-${message.id}`}
+					>
+						<div className={classes.dailyTimestampText}>
+							{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
+						</div>
+					</span>
+				);
+			}
+		}
+		if (index === messagesList.length - 1) {
+			return (
+				<div
+					key={`ref-${message.createdAt}`}
+					ref={lastMessageRef}
+					style={{ float: "left", clear: "both" }}
+				/>
+			);
+		}
+	};
+
+	const renderMessageDivider = (message, index) => {
+		if (index < messagesList.length && index > 0) {
+			let messageUser = messagesList[index].fromMe;
+			let previousMessageUser = messagesList[index - 1].fromMe;
+
+			if (messageUser !== previousMessageUser) {
+				return (
+					<span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
+				);
+			}
+		}
+	};
+
+	const renderMessages = () => {
+		if (messagesList.length > 0) {
+			const viewMessagesList = messagesList.map((message, index) => {
+				if (!message.fromMe) {
+					return (
+						<LinkifyWithTargetBlank key={message.id}>
+							{renderDailyTimestamps(message, index)}
+							{renderMessageDivider(message, index)}
+							<div className={classes.messageLeft}>
+								{/* {ticket.isGroup && (
+									<span className={classes.messageContactName}>
+										{message.contact?.name}
+									</span>
+								)} */}
+								{message.mediaUrl && checkMessageMedia(message)}
+								<div className={classes.textContentItem}>
+									{message.body}
+									<span className={classes.timestamp}>
+										{format(parseISO(message.createdAt), "HH:mm")}
+									</span>
+								</div>
+							</div>
+						</LinkifyWithTargetBlank>
+					);
+				} else {
+					return (
+						<LinkifyWithTargetBlank key={message.id}>
+							{renderDailyTimestamps(message, index)}
+							{renderMessageDivider(message, index)}
+							<div className={classes.messageRight}>
+								<IconButton
+									variant="contained"
+									size="small"
+									id="messageActionsButton"
+									disabled={message.isDeleted}
+									className={classes.messageActionsButton}
+									onClick={e => handleOpenMessageOptionsMenu(e, message.id)}
+								>
+									<ExpandMore />
+								</IconButton>
+								{message.mediaUrl && checkMessageMedia(message)}
+								<div
+									className={clsx(classes.textContentItem, {
+										[classes.textContentItemDeleted]: message.isDeleted,
+									})}
+								>
+									{message.isDeleted && (
+										<Block
+											color="disabled"
+											fontSize="small"
+											className={classes.deletedIcon}
+										/>
+									)}
+									{message.body}
+									<span className={classes.timestamp}>
+										{format(parseISO(message.createdAt), "HH:mm")}
+										{renderMessageAck(message)}
+									</span>
+								</div>
+							</div>
+						</LinkifyWithTargetBlank>
+					);
+				}
+			});
+			return viewMessagesList;
+		} else {
+			return <div>Say hello to your new contact!</div>;
+		}
+	};
+
+	return (
+		<div className={classes.messagesListWrapper}>
+			<MessageOptionsMenu
+				messageId={selectedMessageId}
+				anchorEl={anchorEl}
+				menuOpen={messageOptionsMenuOpen}
+				handleClose={handleCloseMessageOptionsMenu}
+			/>
+			<div
+				id="messagesList"
+				className={classes.messagesList}
+				onScroll={handleScroll}
+			>
+				{messagesList.length > 0 ? renderMessages() : []}
+			</div>
+			{loading && (
+				<div>
+					<CircularProgress className={classes.circleLoading} />
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default MessagesList;

frontend/src/components/Ticket/index.js

@@ -1,33 +1,20 @@
-import React, { useState, useEffect, useRef, useReducer } from "react";
+import React, { useState, useEffect } from "react";
 import { useParams, useHistory } from "react-router-dom";
 
 import { toast } from "react-toastify";
-import { isSameDay, parseISO, format } from "date-fns";
 import openSocket from "socket.io-client";
 import clsx from "clsx";
 
-import { makeStyles } from "@material-ui/core/styles";
+import { Paper, makeStyles } from "@material-ui/core";
-import { green } from "@material-ui/core/colors";
-import AccessTimeIcon from "@material-ui/icons/AccessTime";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import DoneIcon from "@material-ui/icons/Done";
-import DoneAllIcon from "@material-ui/icons/DoneAll";
-import Paper from "@material-ui/core/Paper";
 
-import { Button, Divider, IconButton } from "@material-ui/core";
-import { Block, ExpandMore, GetApp } from "@material-ui/icons";
-
-import api from "../../services/api";
 import ContactDrawer from "../ContactDrawer";
-import whatsBackground from "../../assets/wa-background.png";
+
-import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
 import MessageInput from "../MessageInput/";
 import TicketHeader from "../TicketHeader";
 import TicketInfo from "../TicketInfo";
 import TicketActionButtons from "../TicketActionButtons";
-
+import MessagesList from "../MessagesList";
-import MessageOptionsMenu from "../MessageOptionsMenu";
+import api from "../../services/api";
-import ModalImageCors from "../ModalImageCors";
 
 const drawerWidth = 320;
 
@@ -64,227 +51,8 @@ const useStyles = makeStyles(theme => ({
 		}),
 		marginRight: 0,
 	},
-
-	messagesListWrapper: {
-		overflow: "hidden",
-		position: "relative",
-		display: "flex",
-		flexDirection: "column",
-		flexGrow: 1,
-	},
-
-	messagesList: {
-		backgroundImage: `url(${whatsBackground})`,
-		display: "flex",
-		flexDirection: "column",
-		flexGrow: 1,
-		padding: "20px 20px 20px 20px",
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
-
-	circleLoading: {
-		color: green[500],
-		position: "absolute",
-		opacity: "70%",
-		top: 0,
-		left: "50%",
-		marginTop: 12,
-	},
-
-	messageLeft: {
-		marginRight: 20,
-		marginTop: 2,
-		minWidth: 100,
-		maxWidth: 600,
-		height: "auto",
-		display: "block",
-		position: "relative",
-
-		whiteSpace: "pre-wrap",
-		backgroundColor: "#ffffff",
-		color: "#303030",
-		alignSelf: "flex-start",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 8,
-		paddingLeft: 5,
-		paddingRight: 5,
-		paddingTop: 5,
-		paddingBottom: 0,
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
-
-	messageRight: {
-		marginLeft: 20,
-		marginTop: 2,
-		minWidth: 100,
-		maxWidth: 600,
-		height: "auto",
-		display: "block",
-		position: "relative",
-
-		"&:hover #messageActionsButton": {
-			display: "flex",
-			position: "absolute",
-			top: 0,
-			right: 0,
-		},
-
-		whiteSpace: "pre-wrap",
-		backgroundColor: "#dcf8c6",
-		color: "#303030",
-		alignSelf: "flex-end",
-		borderTopLeftRadius: 8,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 0,
-		paddingLeft: 5,
-		paddingRight: 5,
-		paddingTop: 5,
-		paddingBottom: 0,
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
-
-	messageActionsButton: {
-		display: "none",
-		position: "relative",
-		color: "#999",
-		zIndex: 1,
-		backgroundColor: "#dcf8c6",
-		"&:hover, &.Mui-focusVisible": { backgroundColor: "#dcf8c6" },
-	},
-
-	messageContactName: {
-		display: "flex",
-		paddingLeft: 6,
-		color: "#6bcbef",
-		fontWeight: 500,
-	},
-
-	textContentItem: {
-		overflowWrap: "break-word",
-		padding: "3px 80px 6px 6px",
-	},
-
-	textContentItemDeleted: {
-		fontStyle: "italic",
-		color: "rgba(0, 0, 0, 0.36)",
-		overflowWrap: "break-word",
-		padding: "3px 80px 6px 6px",
-	},
-
-	messageMedia: {
-		objectFit: "cover",
-		width: 250,
-		height: 200,
-		borderTopLeftRadius: 8,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 8,
-	},
-
-	timestamp: {
-		fontSize: 11,
-		position: "absolute",
-		bottom: 0,
-		right: 5,
-		color: "#999",
-	},
-
-	dailyTimestamp: {
-		alignItems: "center",
-		textAlign: "center",
-		alignSelf: "center",
-		width: "110px",
-		backgroundColor: "#e1f3fb",
-		margin: "10px",
-		borderRadius: "10px",
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
-
-	dailyTimestampText: {
-		color: "#808888",
-		padding: 8,
-		alignSelf: "center",
-		marginLeft: "0px",
-	},
-
-	ackIcons: {
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginLeft: 4,
-	},
-
-	deletedIcon: {
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginRight: 4,
-	},
-
-	ackDoneAllIcon: {
-		color: green[500],
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginLeft: 4,
-	},
-
-	downloadMedia: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		backgroundColor: "inherit",
-		padding: 10,
-	},
 }));
 
-const reducer = (state, action) => {
-	if (action.type === "LOAD_MESSAGES") {
-		const messages = action.payload;
-		const newMessages = [];
-
-		messages.forEach(message => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
-			if (messageIndex !== -1) {
-				state[messageIndex] = message;
-			} else {
-				newMessages.push(message);
-			}
-		});
-
-		return [...newMessages, ...state];
-	}
-
-	if (action.type === "ADD_MESSAGE") {
-		const newMessage = action.payload;
-		const messageIndex = state.findIndex(m => m.id === newMessage.id);
-
-		if (messageIndex !== -1) {
-			state[messageIndex] = newMessage;
-		} else {
-			state.push(newMessage);
-		}
-
-		return [...state];
-	}
-
-	if (action.type === "UPDATE_MESSAGE") {
-		const messageToUpdate = action.payload;
-		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
-
-		if (messageIndex !== -1) {
-			state[messageIndex] = messageToUpdate;
-		}
-
-		return [...state];
-	}
-
-	if (action.type === "RESET") {
-		return [];
-	}
-};
-
 const Ticket = () => {
 	const { ticketId } = useParams();
 	const history = useHistory();
@@ -292,44 +60,22 @@ const Ticket = () => {
 
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const [loading, setLoading] = useState(true);
-	const [ticketLoading, setTicketLoading] = useState(true);
 	const [contact, setContact] = useState({});
 	const [ticket, setTicket] = useState({});
 
-	const [messagesList, dispatch] = useReducer(reducer, []);
-	const [hasMore, setHasMore] = useState(false);
-	const [pageNumber, setPageNumber] = useState(1);
-	const lastMessageRef = useRef();
-
-	const [selectedMessageId, setSelectedMessageId] = useState(null);
-	const [anchorEl, setAnchorEl] = useState(null);
-	const messageOptionsMenuOpen = Boolean(anchorEl);
-
 	useEffect(() => {
-		dispatch({ type: "RESET" });
+		setLoading(true);
-		setPageNumber(1);
-		setTicketLoading(true);
 	}, [ticketId]);
 
 	useEffect(() => {
-		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
 			const fetchMessages = async () => {
 				try {
-					const { data } = await api.get("/messages/" + ticketId, {
+					const { data } = await api.get("/tickets/" + ticketId);
-						params: { pageNumber },
-					});
 
-					setContact(data.ticket.contact);
+					setContact(data.contact);
-					setTicket(data.ticket);
+					setTicket(data);
-					dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
-					setHasMore(data.hasMore);
 					setLoading(false);
-					setTicketLoading(false);
-
-					if (pageNumber === 1 && data.messages.length > 1) {
-						scrollToBottom();
-					}
 				} catch (err) {
 					console.log(err);
 					if (err.response && err.response.data && err.response.data.error) {
@@ -343,30 +89,12 @@ const Ticket = () => {
 			fetchMessages();
 		}, 500);
 		return () => clearTimeout(delayDebounceFn);
-	}, [pageNumber, ticketId, history]);
+	}, [ticketId, history]);
 
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.emit("joinChatBox", ticketId);
 
-		socket.on("appMessage", data => {
-			if (data.action === "create") {
-				dispatch({ type: "ADD_MESSAGE", payload: data.message });
-				scrollToBottom();
-
-				setContact(prevState => {
-					if (prevState.id === data.contact?.id) {
-						return data.contact;
-					}
-					return prevState;
-				});
-			}
-
-			if (data.action === "update") {
-				dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
-			}
-		});
-
 		socket.on("ticket", data => {
 			if (data.action === "updateStatus") {
 				setTicket({ ...data.ticket, user: data.user });
@@ -402,223 +130,6 @@ const Ticket = () => {
 		setDrawerOpen(false);
 	};
 
-	const handleOpenMessageOptionsMenu = (e, messageId) => {
-		setAnchorEl(e.currentTarget);
-		setSelectedMessageId(messageId);
-	};
-
-	const handleCloseMessageOptionsMenu = e => {
-		setAnchorEl(null);
-	};
-
-	const loadMore = () => {
-		setPageNumber(prevPageNumber => prevPageNumber + 1);
-	};
-
-	const scrollToBottom = () => {
-		if (lastMessageRef.current) {
-			lastMessageRef.current.scrollIntoView({});
-		}
-	};
-
-	const handleScroll = e => {
-		if (!hasMore) return;
-		const { scrollTop } = e.currentTarget;
-
-		if (scrollTop === 0) {
-			document.getElementById("messagesList").scrollTop = 1;
-		}
-
-		if (loading) {
-			return;
-		}
-
-		if (scrollTop < 50) {
-			loadMore();
-		}
-	};
-
-	const checkMessageMedia = message => {
-		if (message.mediaType === "image") {
-			return <ModalImageCors imageUrl={message.mediaUrl} />;
-		}
-		if (message.mediaType === "audio") {
-			return (
-				<audio controls>
-					<source src={message.mediaUrl} type="audio/ogg"></source>
-				</audio>
-			);
-		}
-
-		if (message.mediaType === "video") {
-			return (
-				<video
-					className={classes.messageMedia}
-					src={message.mediaUrl}
-					controls
-				/>
-			);
-		} else {
-			return (
-				<>
-					<div className={classes.downloadMedia}>
-						<Button
-							startIcon={<GetApp />}
-							color="primary"
-							variant="outlined"
-							target="_blank"
-							href={message.mediaUrl}
-						>
-							Download
-						</Button>
-					</div>
-					<Divider />
-				</>
-			);
-		}
-	};
-
-	const renderMessageAck = message => {
-		if (message.ack === 0) {
-			return <AccessTimeIcon fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 1) {
-			return <DoneIcon fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 2) {
-			return <DoneAllIcon fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 3) {
-			return (
-				<DoneAllIcon fontSize="small" className={classes.ackDoneAllIcon} />
-			);
-		}
-	};
-
-	const renderDailyTimestamps = (message, index) => {
-		if (index === 0) {
-			return (
-				<span
-					className={classes.dailyTimestamp}
-					key={`timestamp-${message.id}`}
-				>
-					<div className={classes.dailyTimestampText}>
-						{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
-					</div>
-				</span>
-			);
-		}
-		if (index < messagesList.length - 1) {
-			let messageDay = parseISO(messagesList[index].createdAt);
-			let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
-
-			if (!isSameDay(messageDay, previousMessageDay)) {
-				return (
-					<span
-						className={classes.dailyTimestamp}
-						key={`timestamp-${message.id}`}
-					>
-						<div className={classes.dailyTimestampText}>
-							{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
-						</div>
-					</span>
-				);
-			}
-		}
-		if (index === messagesList.length - 1) {
-			return (
-				<div
-					key={`ref-${message.createdAt}`}
-					ref={lastMessageRef}
-					style={{ float: "left", clear: "both" }}
-				/>
-			);
-		}
-	};
-
-	const renderMessageDivider = (message, index) => {
-		if (index < messagesList.length && index > 0) {
-			let messageUser = messagesList[index].fromMe;
-			let previousMessageUser = messagesList[index - 1].fromMe;
-
-			if (messageUser !== previousMessageUser) {
-				return (
-					<span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
-				);
-			}
-		}
-	};
-
-	const renderMessages = () => {
-		if (messagesList.length > 0) {
-			const viewMessagesList = messagesList.map((message, index) => {
-				if (!message.fromMe) {
-					return (
-						<LinkifyWithTargetBlank key={message.id}>
-							{renderDailyTimestamps(message, index)}
-							{renderMessageDivider(message, index)}
-							<div className={classes.messageLeft}>
-								{ticket.isGroup && (
-									<span className={classes.messageContactName}>
-										{message.contact?.name}
-									</span>
-								)}
-								{message.mediaUrl && checkMessageMedia(message)}
-								<div className={classes.textContentItem}>
-									{message.body}
-									<span className={classes.timestamp}>
-										{format(parseISO(message.createdAt), "HH:mm")}
-									</span>
-								</div>
-							</div>
-						</LinkifyWithTargetBlank>
-					);
-				} else {
-					return (
-						<LinkifyWithTargetBlank key={message.id}>
-							{renderDailyTimestamps(message, index)}
-							{renderMessageDivider(message, index)}
-							<div className={classes.messageRight}>
-								<IconButton
-									variant="contained"
-									size="small"
-									id="messageActionsButton"
-									disabled={message.isDeleted}
-									className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message.id)}
-								>
-									<ExpandMore />
-								</IconButton>
-								{message.mediaUrl && checkMessageMedia(message)}
-								<div
-									className={clsx(classes.textContentItem, {
-										[classes.textContentItemDeleted]: message.isDeleted,
-									})}
-								>
-									{message.isDeleted && (
-										<Block
-											color="disabled"
-											fontSize="small"
-											className={classes.deletedIcon}
-										/>
-									)}
-									{message.body}
-									<span className={classes.timestamp}>
-										{format(parseISO(message.createdAt), "HH:mm")}
-										{renderMessageAck(message)}
-									</span>
-								</div>
-							</div>
-						</LinkifyWithTargetBlank>
-					);
-				}
-			});
-			return viewMessagesList;
-		} else {
-			return <div>Say hello to your new contact!</div>;
-		}
-	};
-
 	return (
 		<div className={classes.root} id="drawer-container">
 			<Paper
@@ -628,7 +139,7 @@ const Ticket = () => {
 					[classes.mainWrapperShift]: drawerOpen,
 				})}
 			>
-				<TicketHeader loading={ticketLoading}>
+				<TicketHeader loading={loading}>
 					<TicketInfo
 						contact={contact}
 						ticket={ticket}
@@ -636,33 +147,14 @@ const Ticket = () => {
 					/>
 					<TicketActionButtons ticket={ticket} />
 				</TicketHeader>
-				<div className={classes.messagesListWrapper}>
+				<MessagesList ticketId={ticketId}></MessagesList>
-					<div
+				<MessageInput ticketStatus={ticket.status} />
-						id="messagesList"
-						className={classes.messagesList}
-						onScroll={handleScroll}
-					>
-						{messagesList.length > 0 ? renderMessages() : []}
-					</div>
-					<MessageInput ticketStatus={ticket.status} />
-					{loading ? (
-						<div>
-							<CircularProgress className={classes.circleLoading} />
-						</div>
-					) : null}
-				</div>
 			</Paper>
-			<MessageOptionsMenu
-				messageId={selectedMessageId}
-				anchorEl={anchorEl}
-				menuOpen={messageOptionsMenuOpen}
-				handleClose={handleCloseMessageOptionsMenu}
-			/>
 			<ContactDrawer
 				open={drawerOpen}
 				handleDrawerClose={handleDrawerClose}
 				contact={contact}
-				loading={ticketLoading}
+				loading={loading}
 			/>
 		</div>
 	);