simle-chat

1
import { Modal, Button } from 'react-bootstrap';
2
import { useSelector, useDispatch } from 'react-redux';
3
import { useTranslation } from 'react-i18next';
4
import { toast } from 'react-toastify';
5
import axios from 'axios';
6

7
import { getChangeableСhannelId } from '../../selectors/modalSelectors';
8
import { actions as modalActions } from '../../slices/modalSlice';
9
import useAuth from '../../hooks/index';
10
import routes from '../../routes';
11

12
const AddModal = () => {
13
  const dispatch = useDispatch();
14
  const { t } = useTranslation();
15
  const { getAuthHeader } = useAuth();
16

17
  const changeableСhannelId = useSelector(getChangeableСhannelId);
18

19
  const handleRemoveButton = async () => {
20
    const requestPath = routes.dataRequestPathWithId('channels', changeableСhannelId);
21
    const headers = await getAuthHeader();
22
    try {
23
      await axios.delete(requestPath, { headers });
24
      dispatch(modalActions.closedModal());
25
      toast.success(t('toasts.deleteChannel.success'));
26
    } catch (error) {
27
      toast.error(t('toasts.deleteChannel.error'));
28
      console.error(error);
29
    }
30
  };
31

32
  return (
33
    <>
34
      <Modal.Header closeButton>
35
        <Modal.Title>{t('modals.delete.title')}</Modal.Title>
36
      </Modal.Header>
37
      <Modal.Body>
38
        <p className="lead">{t('modals.delete.body')}</p>
39
        <div className="mt-3 d-flex justify-content-end">
40
          <Button
41
            onClick={() => dispatch(modalActions.closedModal())}
42
            variant="secondary"
43
            className="me-2"
44
          >
45
            {t('modals.cancelButton')}
46
          </Button>
47
          {' '}
48
          <Button
49
            type="submit"
50
            variant="danger"
51
            onClick={handleRemoveButton}
52
          >
53
            {t('modals.delete.button')}
54
          </Button>
55
        </div>
56

57
      </Modal.Body>
58
    </>
59
  );
60
};
61

62
export default AddModal;
63