feat: start adding queues page

frontend/src/components/ColorPicker/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import { GithubPicker } from "react-color";
+
+const ColorPicker = ({ onChange, currentColor }) => {
+	const [color, setColor] = useState(currentColor);
+
+	const handleChange = color => {
+		setColor(color.hex);
+	};
+
+	return (
+		<div>
+			<GithubPicker
+				width={"100%"}
+				triangle="hide"
+				color={color}
+				onChange={handleChange}
+				onChangeComplete={color => onChange(color.hex)}
+			/>
+		</div>
+	);
+};
+
+export default ColorPicker;

frontend/src/components/ConfirmationModal/index.js

@@ -8,11 +8,11 @@ import Typography from "@material-ui/core/Typography";
 
 import { i18n } from "../../translate/i18n";
 
-const ConfirmationModal = ({ title, children, open, setOpen, onConfirm }) => {
+const ConfirmationModal = ({ title, children, open, onClose, onConfirm }) => {
 	return (
 		<Dialog
 			open={open}
-			onClose={() => setOpen(false)}
+			onClose={() => onClose(false)}
 			aria-labelledby="confirm-dialog"
 		>
 			<DialogTitle id="confirm-dialog">{title}</DialogTitle>
@@ -22,7 +22,7 @@ const ConfirmationModal = ({ title, children, open, setOpen, onConfirm }) => {
 			<DialogActions>
 				<Button
 					variant="contained"
-					onClick={() => setOpen(false)}
+					onClick={() => onClose(false)}
 					color="default"
 				>
 					{i18n.t("confirmationModal.buttons.cancel")}
@@ -30,7 +30,7 @@ const ConfirmationModal = ({ title, children, open, setOpen, onConfirm }) => {
 				<Button
 					variant="contained"
 					onClick={() => {
-						setOpen(false);
+						onClose(false);
 						onConfirm();
 					}}
 					color="secondary"

frontend/src/components/MessageOptionsMenu/index.js

@@ -36,7 +36,7 @@ const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
 			<ConfirmationModal
 				title={i18n.t("messageOptionsMenu.confirmationModal.title")}
 				open={confirmationOpen}
-				setOpen={setConfirmationOpen}
+				onClose={setConfirmationOpen}
 				onConfirm={handleDeleteMessage}
 			>
 				{i18n.t("messageOptionsMenu.confirmationModal.message")}

frontend/src/components/QueueModal/index.js

@@ -0,0 +1,238 @@
+import React, { useState, useEffect } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { green } from "@material-ui/core/colors";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+
+import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+import toastError from "../../errors/toastError";
+import ColorPicker from "../ColorPicker";
+import { InputAdornment } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+	},
+	textField: {
+		marginRight: theme.spacing(1),
+		flex: 1,
+	},
+
+	btnWrapper: {
+		position: "relative",
+	},
+
+	buttonProgress: {
+		color: green[500],
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		marginTop: -12,
+		marginLeft: -12,
+	},
+	formControl: {
+		margin: theme.spacing(1),
+		minWidth: 120,
+	},
+	colorAdorment: {
+		width: 20,
+		height: 20,
+	},
+}));
+
+const QueueSchema = Yup.object().shape({
+	name: Yup.string()
+		.min(2, "Too Short!")
+		.max(50, "Too Long!")
+		.required("Required"),
+	color: Yup.string().min(3, "Too Short!").max(9, "Too Long!").required(),
+	greetingMessage: Yup.string(),
+});
+
+const QueueModal = ({ open, onClose, queueId }) => {
+	const classes = useStyles();
+
+	const initialState = {
+		name: "",
+		color: "",
+		greetingMessage: "",
+	};
+
+	const [queue, setQueue] = useState(initialState);
+
+	useEffect(() => {
+		(async () => {
+			if (!queueId) return;
+			try {
+				const { data } = await api.get(`/queue/${queueId}`);
+				setQueue(prevState => {
+					return { ...prevState, ...data };
+				});
+			} catch (err) {
+				toastError(err);
+			}
+		})();
+
+		return () => {
+			setQueue({
+				name: "",
+				color: "",
+				greetingMessage: "",
+			});
+		};
+	}, [queueId, open]);
+
+	const handleClose = () => {
+		onClose();
+		setQueue(initialState);
+	};
+
+	const handleSaveQueue = async values => {
+		try {
+			if (queueId) {
+				await api.put(`/queue/${queueId}`, values);
+			} else {
+				await api.post("/queue", values);
+			}
+			toast.success("Queue saved successfully");
+			handleClose();
+		} catch (err) {
+			toastError(err);
+		}
+	};
+
+	return (
+		<div className={classes.root}>
+			<Dialog open={open} onClose={handleClose} maxWidth="lg" scroll="paper">
+				<DialogTitle>
+					{queueId
+						? `${i18n.t("queueModal.title.edit")}`
+						: `${i18n.t("queueModal.title.add")}`}
+				</DialogTitle>
+				<Formik
+					initialValues={queue}
+					enableReinitialize={true}
+					validationSchema={QueueSchema}
+					onSubmit={(values, actions) => {
+						setTimeout(() => {
+							handleSaveQueue(values);
+							actions.setSubmitting(false);
+						}, 400);
+					}}
+				>
+					{({ touched, errors, isSubmitting, values }) => (
+						<Form>
+							<DialogContent dividers>
+								<Field
+									as={TextField}
+									label={i18n.t("queueModal.form.name")}
+									autoFocus
+									name="name"
+									error={touched.name && Boolean(errors.name)}
+									helperText={touched.name && errors.name}
+									variant="outlined"
+									margin="dense"
+									className={classes.textField}
+								/>
+								<Field
+									as={TextField}
+									label={i18n.t("queueModal.form.color")}
+									InputProps={{
+										startAdornment: (
+											<InputAdornment position="start">
+												<div
+													style={{ backgroundColor: values.color }}
+													className={classes.colorAdorment}
+												></div>
+											</InputAdornment>
+										),
+									}}
+									name="color"
+									error={touched.color && Boolean(errors.color)}
+									helperText={touched.color && errors.color}
+									variant="outlined"
+									margin="dense"
+								/>
+								<ColorPicker
+									label={"Pick Color"}
+									currentColor={queue.color}
+									onChange={color => {
+										values.color = color;
+										setQueue(prevState => {
+											return { ...prevState, color };
+										});
+									}}
+								/>
+								<div>
+									<Field
+										as={TextField}
+										label={i18n.t("queueModal.form.greetingMessage")}
+										type="greetingMessage"
+										multiline
+										rows={5}
+										fullWidth
+										name="greetingMessage"
+										error={
+											touched.greetingMessage && Boolean(errors.greetingMessage)
+										}
+										helperText={
+											touched.greetingMessage && errors.greetingMessage
+										}
+										variant="outlined"
+										margin="dense"
+									/>
+								</div>
+							</DialogContent>
+							<DialogActions>
+								<Button
+									onClick={handleClose}
+									color="secondary"
+									disabled={isSubmitting}
+									variant="outlined"
+								>
+									{i18n.t("queueModal.buttons.cancel")}
+								</Button>
+								<Button
+									type="submit"
+									color="primary"
+									disabled={isSubmitting}
+									variant="contained"
+									className={classes.btnWrapper}
+								>
+									{queueId
+										? `${i18n.t("queueModal.buttons.okEdit")}`
+										: `${i18n.t("queueModal.buttons.okAdd")}`}
+									{isSubmitting && (
+										<CircularProgress
+											size={24}
+											className={classes.buttonProgress}
+										/>
+									)}
+								</Button>
+							</DialogActions>
+						</Form>
+					)}
+				</Formik>
+			</Dialog>
+		</div>
+	);
+};
+
+export default QueueModal;

frontend/src/components/TicketOptionsMenu/index.js

@@ -76,7 +76,7 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 					ticket.contact.name
 				}?`}
 				open={confirmationOpen}
-				setOpen={setConfirmationOpen}
+				onClose={setConfirmationOpen}
 				onConfirm={handleDeleteTicket}
 			>
 				{i18n.t("ticketOptionsMenu.confirmationModal.message")}