improvement: better names in pages, folders and routes

frontend/src/pages/Tickets/index.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Tickets from "../../components/Tickets/";
+import MessagesList from "../../components/MessagesList/";
+
+import { i18n } from "../../translate/i18n";
+
+const useStyles = makeStyles(theme => ({
+	chatContainer: {
+		flex: 1,
+		// backgroundColor: "#eee",
+		padding: theme.spacing(4),
+		height: `calc(100% - 48px)`,
+		overflowY: "hidden",
+	},
+
+	chatPapper: {
+		// backgroundColor: "red",
+		display: "flex",
+		height: "100%",
+	},
+
+	contactsWrapper: {
+		display: "flex",
+		height: "100%",
+		flexDirection: "column",
+		overflowY: "hidden",
+	},
+	messagessWrapper: {
+		display: "flex",
+		height: "100%",
+		flexDirection: "column",
+	},
+	welcomeMsg: {
+		backgroundColor: "#eee",
+		display: "flex",
+		justifyContent: "space-evenly",
+		alignItems: "center",
+		height: "100%",
+		textAlign: "center",
+	},
+}));
+
+const Chat = () => {
+	const classes = useStyles();
+	const { ticketId } = useParams();
+
+	return (
+		<div className={classes.chatContainer}>
+			<div className={classes.chatPapper}>
+				<Grid container spacing={0}>
+					<Grid item xs={4} className={classes.contactsWrapper}>
+						<Tickets />
+					</Grid>
+					<Grid item xs={8} className={classes.messagessWrapper}>
+						{ticketId ? (
+							<>
+								<MessagesList />
+							</>
+						) : (
+							<Paper square variant="outlined" className={classes.welcomeMsg}>
+								<span>{i18n.t("chat.noTicketMessage")}</span>
+							</Paper>
+						)}
+					</Grid>
+				</Grid>
+			</div>
+		</div>
+	);
+};
+
+export default Chat;