angrybeanie-front-end/components/gallerypager.js

import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Image from 'next/image';
import Link from 'next/link'

const GalleryPager = ({galleryImages, basepath, gallery}) => {

    const router = useRouter()

    const handleImageClick = (e, path) => {
        alert(path)
    }

    const handlePagination = page => {
        const path = router.pathname
        const query = router.query
        query.page = page.selected + 1
        router.push({
          pathname: path,
          query: query,
        })
    }

    const carouselList = []
    for (var i = 0; i < galleryImages.meta.pagination.total; i++) {
        carouselList.push(<li data-target="carouselExample" data-slide-to={i}></li>)
    }

    return (
        <div className="episode_pages col-sm-12">
            <div className="card-columns">
                            {galleryImages.data.map((galleryImage) => {
                                var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
                                var imageLink = "/galleryimages/" + galleryImage.attributes.Slug
                                return (
                            <div className="card p-3 hover:cursor-pointer" data-target="#carouselExample" data-slide-to="0">
                                <Link href={imageLink}><Image 
                                src={imageUrl}
                                layout="responsive"
                                height={galleryImage.attributes.Image.data.attributes.formats.small.height}
                                width={galleryImage.attributes.Image.data.attributes.formats.small.width}
                                key={galleryImage.attributes.id}
                                className="card-img-top"
                                alt={galleryImage.attributes.Title}
                                ></Image></Link>
                            </div>
                            )})}
                        </div>
           
                <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-hidden="true">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div className="modal-body">
                    <div id="carouselExample" className="carousel slide" data-ride="carousel">
                        <ol>
                        {carouselList}
                        </ol>
                        <div className="carousel-inner">
                         {galleryImages.data.map((galleryImage) => {
                            <div className="carousel-item">
                                <img className="d-block w-100"
                                    src={basepath + galleryImage.attributes.Image.data.attributes.formats.medium.url}></img>
                            </div>
                         })}
                         <a className="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
            <span className="sr-only">Previous</span>
          </a>
          <a className="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span className="carousel-control-next-icon" aria-hidden="true"></span>
            <span className="sr-only">Next</span>
          </a>
                        </div>
                    </div>
                    <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>
</div>
            <ReactPaginate
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                previousLabel={"previous"}
                nextLabel={"next"}
                breakLabel={"..."}
                initialPage={galleryImages.page}
                pageCount={galleryImages.meta.pagination.pageCount}
                onPageChange={handlePagination} />
        </div>
    )
}

export default GalleryPager