Add React editor project

hooks/use-shopify-collections.ts

@@ -1,82 +1,36 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { shopifyFetch } from '@/services/shopify/client';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import {
-  GET_COLLECTIONS_QUERY,
-  GET_COLLECTION_PRODUCTS_QUERY,
-} from '@/graphql/collections';
-import type { Product } from './use-shopify-products';
+  getCollections,
+  getCollectionProducts,
+} from '@/services/shopify/catalog';
 
-interface CollectionImage {
-  url: string;
-  altText?: string;
-}
+export {
+  getCollections,
+  getCollectionProducts,
+  getCollectionProductsPage,
+} from '@/services/shopify/catalog';
+export type {
+  Collection,
+  CollectionWithProducts,
+  CollectionSortKey,
+  CollectionProductsPage,
+  ProductFilterFacet,
+} from '@/services/shopify/catalog';
 
-export interface Collection {
-  id: string;
-  title: string;
-  handle: string;
-  description?: string;
-  descriptionHtml?: string;
-  image?: CollectionImage;
-}
-
-export interface CollectionWithProducts extends Collection {
-  products: Product[];
-}
-
-export type CollectionSortKey = 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
-
-export interface ProductFilter {
-  available?: boolean;
-  price?: { min?: number; max?: number };
-  productType?: string;
-  productVendor?: string;
-  tag?: string;
-  variantOption?: { name: string; value: string };
-  productMetafield?: { namespace: string; key: string; value: string };
-}
+import type {
+  Collection,
+  CollectionWithProducts,
+  CollectionSortKey,
+} from '@/services/shopify/catalog';
 
 interface UseCollectionProductsOptions {
   first?: number;
+  after?: string | null;
   sortKey?: CollectionSortKey;
   reverse?: boolean;
-  filters?: ProductFilter[];
-}
-
-// Fetch all collections
-export async function getCollections(first = 50): Promise<Collection[]> {
-  const response = await shopifyFetch({
-    query: GET_COLLECTIONS_QUERY,
-    variables: { first },
-  });
-
-  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
-}
-
-// Fetch products in a collection by handle
-export async function getCollectionProducts(
-  handle: string,
-  { first = 50, sortKey = 'BEST_SELLING', reverse = false, filters }: UseCollectionProductsOptions = {},
-  after?: string | null,
-): Promise<{ collection: CollectionWithProducts; hasNextPage: boolean; endCursor: string | null } | null> {
-  const response = await shopifyFetch({
-    query: GET_COLLECTION_PRODUCTS_QUERY,
-    variables: { handle, first, sortKey, reverse, filters: filters?.length ? filters : undefined, after: after ?? null },
-  });
-
-  const collection = response.data.collection;
-  if (!collection) return null;
-
-  return {
-    collection: {
-      ...collection,
-      products: collection.products.edges.map((edge: { node: Product }) => edge.node),
-    },
-    hasNextPage: collection.products.pageInfo.hasNextPage,
-    endCursor: collection.products.pageInfo.endCursor,
-  };
+  filterInputs?: string[];
 }
 
 // Hook for fetching all collections
@@ -106,6 +60,36 @@ export function useCollections(first = 50) {
   return { collections, loading, error, refetch: fetchCollections };
 }
 
+// Deferred variant of useCollections: nothing is requested until `load` runs,
+// so a menu can hold off until it's actually opened. The fetch happens once —
+// re-opening reuses what's already in state.
+export function useCollectionsOnDemand(first = 50) {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const requested = useRef(false);
+
+  const load = useCallback(async () => {
+    if (requested.current) return;
+    requested.current = true;
+
+    try {
+      setLoading(true);
+      setError(null);
+      setCollections(await getCollections(first));
+    } catch (err) {
+      console.error('Error fetching collections:', err);
+      // Let the next open (or a retry) try again.
+      requested.current = false;
+      setError(err instanceof Error ? err.message : 'Failed to load collections');
+    } finally {
+      setLoading(false);
+    }
+  }, [first]);
+
+  return { collections, loading, error, load };
+}
+
 // Hook for fetching products in a collection
 export function useCollectionProducts(
   handle: string | null,
@@ -114,10 +98,6 @@ export function useCollectionProducts(
   const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [hasNextPage, setHasNextPage] = useState(false);
-  const [cursor, setCursor] = useState<string | null>(null);
-
-  const filtersKey = JSON.stringify(options.filters ?? []);
 
   const fetchCollection = useCallback(async () => {
     if (!handle) {
@@ -128,14 +108,10 @@ export function useCollectionProducts(
     try {
       setLoading(true);
       setError(null);
-      const result = await getCollectionProducts(handle, options);
-      if (!result) {
-        setCollection(null);
+      const data = await getCollectionProducts(handle, options);
+      setCollection(data);
+      if (!data) {
         setError('Collection not found');
-      } else {
-        setCollection(result.collection);
-        setHasNextPage(result.hasNextPage);
-        setCursor(result.endCursor);
       }
     } catch (err) {
       console.error('Error fetching collection products:', err);
@@ -143,32 +119,11 @@ export function useCollectionProducts(
     } finally {
       setLoading(false);
     }
-  }, [handle, options.first, options.sortKey, options.reverse, filtersKey]);
+  }, [handle, options.first, options.sortKey, options.reverse]);
 
   useEffect(() => {
     fetchCollection();
   }, [fetchCollection]);
 
-  const fetchMore = useCallback(async () => {
-    if (!handle || !cursor || !hasNextPage || loading) return;
-    setLoading(true);
-    try {
-      const result = await getCollectionProducts(handle, options, cursor);
-      if (result) {
-        setCollection((prev) =>
-          prev
-            ? { ...prev, products: [...prev.products, ...result.collection.products] }
-            : result.collection
-        );
-        setHasNextPage(result.hasNextPage);
-        setCursor(result.endCursor);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Load more failed');
-    } finally {
-      setLoading(false);
-    }
-  }, [handle, cursor, hasNextPage, loading, options.first, options.sortKey, options.reverse, filtersKey]);
-
-  return { collection, loading, error, hasNextPage, fetchMore, refetch: fetchCollection };
+  return { collection, loading, error, refetch: fetchCollection };
 }