diff --git a/src/components/Conf/Gallery/index.tsx b/src/components/Conf/Gallery/index.tsx index 7f5ea2e22d..caae2e678d 100644 --- a/src/components/Conf/Gallery/index.tsx +++ b/src/components/Conf/Gallery/index.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps } from "react" +import React, { ComponentProps, useEffect, useRef, useState } from "react" import { images } from "../../../utils/conf-images" import Zoom from "react-medium-image-zoom" import "react-medium-image-zoom/dist/styles.css" @@ -15,63 +15,87 @@ function chunk(arr: T[], len: number): T[][] { return chunks } -function Img({ src, alt = "gallery" }: ComponentProps<"img">) { +function Img({ + src, + alt = "gallery", + isLast, + newLimit, +}: ComponentProps<"img"> & { + isLast?: boolean + newLimit: () => any +}) { + /** + * Select the Card component with useRef + */ + const cardRef = useRef(null) + + /** + * Implement Intersection Observer to check if the last Card in the array is visible on the screen, then set a new limit + */ + useEffect(() => { + if (!cardRef?.current) return + + const observer = new IntersectionObserver(([entry]) => { + if (isLast && entry.isIntersecting) { + newLimit() + observer.unobserve(entry.target) + } + }) + + observer.observe(cardRef.current) + }, [isLast]) + return ( {alt} ) } const GalleryConf = () => { + const [page, setPage] = useState(1) + + const currentImages = chunk(images, 6).slice(0, page) + const lastSrc = currentImages.at(-1)!.at(-1) return (
-
- {chunk(images, 6).map((c, i) => ( -
-
- {c[0] && ( -
- -
- )} - {c[1] && ( -
- -
- )} - {c[2] && ( -
- -
- )} + {currentImages.map((c, i) => { + function getCard(index: number) { + return ( + c[index] && ( + setPage(page + 1)} + /> + ) + ) + } + + return ( +
+
+
+ {getCard(0)} + {getCard(1)} +
+ {getCard(2)}
-
- {c[3] && ( -
- -
- )} -
- {c[4] && ( -
- -
- )} - {c[5] && ( -
- -
- )} +
+ {getCard(3)} +
+ {getCard(4)} + {getCard(5)}
- ))} -
+ ) + })}
) } diff --git a/src/components/Conf/Sponsors/index.tsx b/src/components/Conf/Sponsors/index.tsx index 4000d19b8d..1e58b453ca 100644 --- a/src/components/Conf/Sponsors/index.tsx +++ b/src/components/Conf/Sponsors/index.tsx @@ -100,7 +100,7 @@ function List({ rel="noreferrer" title={name} > - + diff --git a/src/utils/conf-images.ts b/src/utils/conf-images.ts index f9f3e5b958..a58e7bd0eb 100644 --- a/src/utils/conf-images.ts +++ b/src/utils/conf-images.ts @@ -119,7 +119,6 @@ import filename119 from "../../static/img/conf/Gallery/graphqlconf-202393_532291 import filename120 from "../../static/img/conf/Gallery/graphqlconf-202394_53228255057_o.jpg" import filename121 from "../../static/img/conf/Gallery/graphqlconf-202395_53229430163_o.jpg" import filename122 from "../../static/img/conf/Gallery/graphqlconf-202396_53229628185_o.jpg" -import filename123 from "../../static/img/conf/Gallery/graphqlconf-20239_53229431483_o.jpg" import filename124 from "../../static/img/conf/Gallery/graphqlconf-2023graphqlconf-2023_53228255062_o.jpg" export const images = [ @@ -244,6 +243,5 @@ export const images = [ filename120, filename121, filename122, - filename123, filename124, ] diff --git a/static/img/conf/Gallery/graphqlconf-20239_53229431483_o.jpg b/static/img/conf/Gallery/graphqlconf-20239_53229431483_o.jpg deleted file mode 100644 index 3a8a4b3bbf..0000000000 Binary files a/static/img/conf/Gallery/graphqlconf-20239_53229431483_o.jpg and /dev/null differ