projeto-hit/frontend/src/components/ContactCreateTicketModal/index.js

import React, { useState, useEffect, useContext } from "react";
import { useHistory } from "react-router-dom";
import { toast } from "react-toastify";

import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import Select from "@material-ui/core/Select";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core";

import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";

import { i18n } from "../../translate/i18n";
import ButtonWithSpinner from "../ButtonWithSpinner";
import { AuthContext } from "../../context/Auth/AuthContext";

import toastError from "../../errors/toastError";

import api from "../../services/api";

const useStyles = makeStyles((theme) => ({
  maxWidth: {
    width: "100%",
  },
  paper: {
    minWidth: "300px"
  }
}));

const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
  const { user } = useContext(AuthContext);

  const history = useHistory();
  const [queues, setQueues] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedQueue, setSelectedQueue] = useState('');
  const classes = useStyles();

  useEffect(() => {
    const userQueues = user.queues.map(({ id, name, color }) => { return { id, name, color } })
    setQueues(userQueues)
  }, [user]);

  const handleClose = () => {
    onClose();
  };

  const handleSaveTicket = async (e) => {
    e.preventDefault()
    if (!contactId) return;
    if (!selectedQueue) {
      toast.warning("Nenhuma Fila Selecionada")
      return
    }
    setLoading(true);
    try {
      const { data: ticket } = await api.post("/tickets", {
        contactId: contactId,
        userId: user?.id,
        queueId: selectedQueue,
        status: "open",
      });
      history.push(`/tickets/${ticket.id}`);
    } catch (err) {
      toastError(err);
      onClose()
    }
    setLoading(false);
  };

  return (
    <Dialog open={modalOpen} onClose={handleClose} maxWidth="xs" scroll="paper" classes={{ paper: classes.paper }}>
      <form onSubmit={handleSaveTicket}>
        <DialogTitle id="form-dialog-title">
          {i18n.t("newTicketModal.title")}
        </DialogTitle>
        <DialogContent dividers>
          <FormControl variant="outlined" className={classes.maxWidth}>
            <InputLabel>{i18n.t("Selecionar Fila")}</InputLabel>
            <Select
              value={selectedQueue}
              onChange={(e) => setSelectedQueue(e.target.value)}
              label={i18n.t("Filas")}
            >
              <MenuItem value={''}>&nbsp;</MenuItem>
              {queues.map(({ id, name }) => (
                <MenuItem key={id} value={id}>{name[0].toUpperCase() + name.slice(1).toLowerCase()}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={handleClose}
            color="secondary"
            disabled={loading}
            variant="outlined"
          >
            {i18n.t("newTicketModal.buttons.cancel")}
          </Button>
          <ButtonWithSpinner
            variant="contained"
            type="submit"
            color="primary"
            loading={loading}
          >
            {i18n.t("newTicketModal.buttons.ok")}
          </ButtonWithSpinner>
        </DialogActions>
      </form>
    </Dialog>
  );
};

export default ContactCreateTicketModal;