Feat: Added 'New ticket" option on ticket list

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 [loading, setLoading] = React.useState(false);
+	const [options, setOptions] = useState([]);
+	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 => {
-		console.log(selected.id);
+	const handleSaveTicket = async e => {
+		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,61 +89,67 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 				onClose={handleClose}
 				maxWidth="lg"
 				scroll="paper"
-				className={classes.modal}
 			>
-				<DialogTitle id="form-dialog-title">Criar Ticket</DialogTitle>
-				<DialogContent dividers>
-					<Autocomplete
-						id="asynchronous-demo"
-						style={{ width: 300 }}
-						getOptionLabel={option => option.name}
-						onChange={(e, newValue) => {
-							handleSaveTicket(newValue);
-						}}
-						options={options}
-						loading={loading}
-						renderInput={params => (
-							<TextField
-								{...params}
-								label="Selecione o contato"
-								variant="outlined"
-								InputProps={{
-									...params.InputProps,
-									endAdornment: (
-										<React.Fragment>
-											{loading ? (
-												<CircularProgress color="inherit" size={20} />
-											) : null}
-											{params.InputProps.endAdornment}
-										</React.Fragment>
-									),
-								}}
-							/>
-						)}
-					/>
-				</DialogContent>
-				<DialogActions>
-					<Button
-						onClick={handleClose}
-						color="secondary"
-						// disabled={isSubmitting}
-						variant="outlined"
-					>
-						Cancelar
-					</Button>
-					<Button
-						onClick={handleSaveTicket}
-						color="primary"
-						// disabled={isSubmitting}
-						variant="contained"
-						className={classes.btnWrapper}
-					>
-						Salvar
-						{loading && (
-							<CircularProgress size={24} className={classes.buttonProgress} />
-						)}
-					</Button>
-				</DialogActions>
+				<form onSubmit={handleSaveTicket}>
+					<DialogTitle id="form-dialog-title">Criar Ticket</DialogTitle>
+					<DialogContent dividers>
+						<Autocomplete
+							id="asynchronous-demo"
+							style={{ width: 300 }}
+							getOptionLabel={option => option.name}
+							onChange={(e, newValue) => {
+								setSelectedContact(newValue);
+							}}
+							options={options}
+							loading={loading}
+							renderInput={params => (
+								<TextField
+									{...params}
+									label="Selecione o contato"
+									variant="outlined"
+									required
+									id="my-input"
+									InputProps={{
+										...params.InputProps,
+										endAdornment: (
+											<React.Fragment>
+												{loading ? (
+													<CircularProgress color="inherit" size={20} />
+												) : null}
+												{params.InputProps.endAdornment}
+											</React.Fragment>
+										),
+									}}
+								/>
+							)}
+						/>
+					</DialogContent>
+					<DialogActions>
+						<Button
+							onClick={handleClose}
+							color="secondary"
+							disabled={loading}
+							variant="outlined"
+						>
+							Cancelar
+						</Button>
+						<Button
+							type="submit"
+							color="primary"
+							disabled={loading}
+							variant="contained"
+							className={classes.btnWrapper}
+						>
+							Salvar
+							{loading && (
+								<CircularProgress
+									size={24}
+									className={classes.buttonProgress}
+								/>
+							)}
+						</Button>
+					</DialogActions>
+				</form>
 			</Dialog>
 		</div>
 	);