ProjectsCanvas.tsx

import { IndexProjectsPageData } from "types/back"
import React, { useEffect, useMemo, useState } from "react"
import { Texture, TextureLoader } from "three"
import InfiniteSlider from "@components/CanvasGL/InfiniteSlider"
import { makeButton, useTweaks } from "use-tweaks"
import random from "canvas-sketch-util/random"
import { Slide } from "../InfiniteSlider/types"

const ProjectsCanvas = ({ pageProps: { allProjects } }: { pageProps: IndexProjectsPageData }) => {
  // State
  const [seed, setSeed] = useState(561)
  const [slides, setSlides] = useState<Slide[]>(null)

  // Data
  const loader = useMemo(() => new TextureLoader(), [])
  const projectsCoversPromises: Promise<Texture>[] = allProjects.map(
    (p) =>
      new Promise((resolve) => {
        loader.load(p.cover.url, (texture) => resolve(texture))
      }),
  )

  async function waitForAllTextures() {
    const textures: Texture[] = await Promise.all(projectsCoversPromises)
    setSlides(
      allProjects.map((project, i) => ({
        slug: project.slug,
        texture: textures[i],
        cartel: {
          title: project.title,
          date: new Date(project.date),
        },
      })),
    )
  }

  useTweaks("Slider", {
    ...makeButton("New seed", () => {
      setSeed(random.rangeFloor(1, 10000))
    }),
  })

  useEffect(() => {
    waitForAllTextures()
  }, [])

  if (!slides) return null

  return (
    <InfiniteSlider seed={seed} slides={slides} />
  )
}

export default React.memo(ProjectsCanvas)