Feat: Added 'New ticket" option on ticket list

backend/src/controllers/TicketController.js

@@ -48,8 +48,18 @@ exports.index = async (req, res) => {
 };
 
 exports.store = async (req, res) => {
+	const io = getIO();
 	const ticket = await Ticket.create(req.body);
 
+	const contact = await ticket.getContact();
+
+	const serializaedTicket = { ...ticket.dataValues, contact: contact };
+
+	io.to("notification").emit("ticket", {
+		action: "create",
+		ticket: serializaedTicket,
+	});
+
 	res.status(200).json(ticket);
 };
 

frontend/src/components/NewTicketModal/index.js

@@ -7,11 +7,9 @@ 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 Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import FormControl from "@material-ui/core/FormControl";
 import { green } from "@material-ui/core/colors";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -23,18 +21,6 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexWrap: "wrap",
 	},
-	textField: {
-		// marginLeft: theme.spacing(1),
-		marginRight: theme.spacing(1),
-		// width: "25ch",
-		flex: 1,
-	},
-
-	extraAttr: {
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-	},
 
 	btnWrapper: {
 		// margin: theme.spacing(1),
@@ -53,11 +39,14 @@ const useStyles = makeStyles(theme => ({
 
 const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 	const classes = useStyles();
+	const userId = +localStorage.getItem("userId");
 
-	const [options, setOptions] = React.useState([]);
+	const [options, setOptions] = useState([]);
-	const [loading, setLoading] = React.useState(false);
+	const [loading, setLoading] = useState(false);
+	const [selectedContact, setSelectedContact] = useState(null);
 
 	useEffect(() => {
+		setLoading(true);
 		const fetchContacts = async () => {
 			try {
 				const res = await api.get("contacts");
@@ -68,21 +57,29 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 		};
 
 		fetchContacts();
+		setLoading(false);
 	}, []);
 
 	const handleClose = () => {
 		onClose();
-		// setTicket(initialState);
+		setSelectedContact(null);
 	};
 
-	const handleSaveTicket = async selected => {
+	const handleSaveTicket = async e => {
-		console.log(selected.id);
+		e.preventDefault();
+		if (!selectedContact) return;
+		setLoading(true);
 		try {
-			await api.post("/tickets", { contactId: selected.id });
+			await api.post("/tickets", {
+				contactId: selectedContact.id,
+				userId: userId,
+				status: "open",
+			});
 		} catch (err) {
 			alert(err);
 		}
-		// handleClose();
+		setLoading(false);
+		handleClose();
 	};
 
 	return (
@@ -92,8 +89,8 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 				onClose={handleClose}
 				maxWidth="lg"
 				scroll="paper"
-				className={classes.modal}
 			>
+				<form onSubmit={handleSaveTicket}>
 					<DialogTitle id="form-dialog-title">Criar Ticket</DialogTitle>
 					<DialogContent dividers>
 						<Autocomplete
@@ -101,7 +98,7 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 							style={{ width: 300 }}
 							getOptionLabel={option => option.name}
 							onChange={(e, newValue) => {
-							handleSaveTicket(newValue);
+								setSelectedContact(newValue);
 							}}
 							options={options}
 							loading={loading}
@@ -110,6 +107,8 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 									{...params}
 									label="Selecione o contato"
 									variant="outlined"
+									required
+									id="my-input"
 									InputProps={{
 										...params.InputProps,
 										endAdornment: (
@@ -129,24 +128,28 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 						<Button
 							onClick={handleClose}
 							color="secondary"
-						// disabled={isSubmitting}
+							disabled={loading}
 							variant="outlined"
 						>
 							Cancelar
 						</Button>
 						<Button
-						onClick={handleSaveTicket}
+							type="submit"
 							color="primary"
-						// disabled={isSubmitting}
+							disabled={loading}
 							variant="contained"
 							className={classes.btnWrapper}
 						>
 							Salvar
 							{loading && (
-							<CircularProgress size={24} className={classes.buttonProgress} />
+								<CircularProgress
+									size={24}
+									className={classes.buttonProgress}
+								/>
 							)}
 						</Button>
 					</DialogActions>
+				</form>
 			</Dialog>
 		</div>
 	);

frontend/src/components/TicketsList/index.js

@@ -250,8 +250,8 @@ const TicketsList = () => {
 			if (data.action === "updateUnread") {
 				resetUnreadMessages(data.ticketId);
 			}
-			if (data.action === "updateStatus") {
+			if (data.action === "updateStatus" || data.action === "create") {
-				updateTicketStatus(data);
+				updateTickets(data);
 			}
 		});
 
@@ -293,7 +293,7 @@ const TicketsList = () => {
 		});
 	};
 
-	const updateTicketStatus = data => {
+	const updateTickets = data => {
 		setTickets(prevState => {
 			const ticketIndex = prevState.findIndex(
 				ticket => ticket.id === data.ticket.id
@@ -358,8 +358,6 @@ const TicketsList = () => {
 		history.push(`/chat/${ticketId}`);
 	};
 
-	const handleOpenNewTicketModal = () => {};
-
 	const countTickets = (status, userId) => {
 		const ticketsFound = tickets.filter(
 			t => t.status === status && t.userId === userId