{"size": 668, "ext": "js", "max_stars_repo_path": "src/layout/components/ImageGallery/containers/ImageGalleryContainer.js", "max_stars_repo_name": "Garbonauta/TwinCitiesBJJ", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/layout/components/ImageGallery/containers/ImageGalleryContainer.js", "max_issues_repo_name": "Garbonauta/TwinCitiesBJJ", "max_issues_repo_issues_event_min_datetime": "2021-09-02T18:16:23.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-02T18:16:23.000Z", "max_forks_repo_path": "src/layout/components/ImageGallery/containers/ImageGalleryContainer.js", "max_forks_repo_name": "e1moreno/TwinCitiesBJJ", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 26.72, "max_line_length": 80, "alphanum_fraction": 0.6526946108}
import React, { useContext, useCallback } from 'react';

import Carousel, { Modal, ModalGateway } from 'react-images';
import { ImageGalleryContext } from '../context/ImageGalleryContextProvider';

const ImageGalleryContainer = () => {
  const { open, currentImage, src, dispatch } = useContext(ImageGalleryContext);

  const handleClose = useCallback(() => {
    dispatch({ type: 'setOpen', open: false });
  }, [dispatch]);

  return (
    <ModalGateway>
      {open && (
        <Modal onClose={handleClose}>
          <Carousel views={src} currentIndex={currentImage} />
        </Modal>
      )}
    </ModalGateway>
  );
};

export default ImageGalleryContainer;
