simle-chat

1
import { useSelector, useDispatch } from 'react-redux';
2
import Modal from 'react-bootstrap/Modal';
3

4
import { getModalState, getModalType } from '../../selectors/modalSelectors';
5
import { actions as modalActions } from '../../slices/modalSlice';
6
import AddAndRenameChannel from './AddAndRenameChannel';
7
import DeleteChannel from './DeleteChannel';
8

9
const mappingModal = {
10
  addChannel: AddAndRenameChannel,
11
  renameChannel: AddAndRenameChannel,
12
  deleteChannel: DeleteChannel,
13
};
14

15
const ModalBox = () => {
16
  const dispatch = useDispatch();
17

18
  const modalState = useSelector(getModalState);
19
  const modalType = useSelector(getModalType);
20
  const CurrentModal = mappingModal[modalType];
21

22
  return (
23
    <Modal
24
      show={modalState}
25
      onHide={() => dispatch(modalActions.closedModal())}
26
      dialogClassName="modal-dialog-centered"
27
    >
28
      {CurrentModal && <CurrentModal modalType={modalType} />}
29
    </Modal>
30
  );
31
};
32

33
export default ModalBox;
34