feat: show day timestamp instead of hour if not today

frontend/src/components/MessageInput/index.js

@@ -102,10 +102,9 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const MessageInput = ({ searchParam }) => {
+const MessageInput = () => {
 	const classes = useStyles();
 	const { ticketId } = useParams();
-	// const userId = localStorage.getItem("userId");
 	const username = localStorage.getItem("username");
 
 	const mediaInitialState = { preview: "", raw: "", name: "" };
@@ -309,7 +308,7 @@ const MessageInput = ({ searchParam }) => {
 				</label>
 				<div className={classes.messageInputWrapper}>
 					<InputBase
-						inputRef={input => input && !searchParam && input.focus()}
+						inputRef={input => input && input.focus()}
 						className={classes.messageInput}
 						placeholder="Escreva uma mensagem"
 						multiline

frontend/src/components/MessagesList/index.js

@@ -234,7 +234,6 @@ const MessagesList = () => {
 	const [ticket, setTicket] = useState({});
 	const [messagesList, setMessagesList] = useState([]);
 	const [hasMore, setHasMore] = useState(false);
-	const [searchParam, setSearchParam] = useState("");
 	const [pageNumber, setPageNumber] = useState(0);
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const lastMessageRef = useRef();
@@ -242,17 +241,13 @@ const MessagesList = () => {
 	const [anchorEl, setAnchorEl] = useState(null);
 	const moreMenuOpen = Boolean(anchorEl);
 
-	useEffect(() => {
-		setMessagesList([]);
-	}, [searchParam]);
-
 	useEffect(() => {
 		setLoading(true);
 		const delayDebounceFn = setTimeout(() => {
 			const fetchMessages = async () => {
 				try {
 					const res = await api.get("/messages/" + ticketId, {
-						params: { searchParam, pageNumber },
+						params: { pageNumber },
 					});
 					setContact(res.data.ticket.contact);
 					setTicket(res.data.ticket);
@@ -273,7 +268,7 @@ const MessagesList = () => {
 			fetchMessages();
 		}, 1000);
 		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, pageNumber, ticketId, token, history]);
+	}, [pageNumber, ticketId, token, history]);
 
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
@@ -297,17 +292,11 @@ const MessagesList = () => {
 
 		return () => {
 			socket.disconnect();
-			setSearchParam("");
 			setPageNumber(1);
 			setMessagesList([]);
 		};
 	}, [ticketId]);
 
-	// const handleSearch = e => {
-	// 	setSearchParam(e.target.value);
-	// 	setPageNumber(1);
-	// };
-
 	const loadMore = () => {
 		setPageNumber(prevPageNumber => prevPageNumber + 1);
 	};
@@ -613,7 +602,7 @@ const MessagesList = () => {
 					>
 						{messagesList.length > 0 ? renderMessages() : []}
 					</InfiniteScrollReverse>
-					<MessageInput searchParam={searchParam} />
+					<MessageInput />
 					{loading ? (
 						<div>
 							<CircularProgress className={classes.circleLoading} />

frontend/src/components/Tickets/index.js

@@ -50,8 +50,8 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	tab: {
-		minWidth: 120, // a number of your choice
-		width: 120, // a number of your choice
+		minWidth: 120,
+		width: 120,
 	},
 
 	halfTicketsList: {
@@ -84,13 +84,10 @@ const useStyles = makeStyles(theme => ({
 
 	ticketsListHeader: {
 		display: "flex",
-		// flexShrink: 0,
-		// -webkitBoxAlign: "center",
 		alignItems: "center",
 		fontWeight: 500,
 		fontSize: "16px",
 		height: "56px",
-		// backgroundColor: "#eee",
 		color: "rgb(67, 83, 105)",
 		padding: "0px 12px",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
@@ -391,8 +388,6 @@ const Tickets = () => {
 		);
 	};
 
-	console.log(tickets);
-
 	return (
 		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
 			<NewTicketModal

frontend/src/components/TicketsList/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { parseISO, format } from "date-fns";
+import { parseISO, format, isSameDay } from "date-fns";
 
 import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
@@ -146,7 +146,11 @@ const TicketsList = ({
 											variant="body2"
 											color="textSecondary"
 										>
-											{format(parseISO(ticket.updatedAt), "HH:mm")}
+											{isSameDay(parseISO(ticket.updatedAt), new Date()) ? (
+												<>{format(parseISO(ticket.updatedAt), "HH:mm")}</>
+											) : (
+												<>{format(parseISO(ticket.updatedAt), "MM/dd/yyyy")}</>
+											)}
 										</Typography>
 									)}
 								</span>