components/main/hooks/useCollections.ts

import { useQuery } from "@tanstack/react-query";
import { useLocalStorage, useUpdateEffect } from "react-use";

export const useCollections = (category: string) => {
  const [myGenerationsId] = useLocalStorage<any>('my-own-generations', []);
  const {
    data: collections,
    isFetching: loading,
    refetch,
      } = useQuery(
    ["collections"],
    async () => {
      // if category is my-own, send to reauest myGenerationsId array
      const response = await fetch("/api/collections", {
        method: "POST",
        body: JSON.stringify({
          ids: category === 'my-own' ? myGenerationsId : undefined,
        }),
      })
      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.message)
      }
      return data.images;
    },
    {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,      
    }
  );

  useUpdateEffect(() => {
    refetch()
  }, [category]);

  return {
    collections,
    loading,
  }
};