components/modal/useCollection.ts

import { useMemo, useState } from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"

import { Collection } from "@/utils/type"

export const useCollection = (id?: string) => {
  const { data: open } = useQuery(["modal"], () => {
    return null
  }, {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
    initialData: null
  })
  const setOpen = (id: string | null) => client.setQueryData(["modal"], () => id)

  const client = useQueryClient()

  const collection = useMemo(() => {
    const collections = client.getQueryData<Collection>(["collections"])
    if (!collections?.images) return null

    return collections?.images?.find((collection) => collection.id === id)
  }, [id])

  return {
    collection,
    open,
    setOpen
  }
}