Skip to main content

​
Marketplace Hooks

The marketplace module provides custom React hooks that handle state management and UI logic. These hooks follow best practices for React state management and provide reusable functionality across components.

​
Core Hooks

​
useBuilderFilter

Manages marketplace filtering state including URL synchronization. 
import { useBuilderFilter } from '@/components/marketplace/hooks';
​
useBuilderFilter
hook
Custom hook for managing marketplace filters with URL synchronization.
function useBuilderFilter(): {
  filters: MarketplaceFilters;
  filterOptions: MarketplaceFilterOptions;
  isLoading: boolean;
  updateFilter: (key: string, value: any) => void;
  resetFilters: () => void;
}

​
useBuilderSearch

Handles search functionality for the marketplace. 
import { useBuilderSearch } from '@/components/marketplace/hooks';
​
useBuilderSearch
hook
Custom hook for searching marketplace builders.
function useBuilderSearch(initialFilters?: MarketplaceFilters): {
  builders: BuilderProfileListing[];
  isLoading: boolean;
  error: Error | null;
  pagination: PaginationInfo;
  search: (filters?: MarketplaceFilters) => Promise<void>;
  loadMore: () => Promise<void>;
}

​
useBuilderAvailability

Manages builder availability status. 
import { useBuilderAvailability } from '@/components/marketplace/hooks';
​
useBuilderAvailability
hook
Custom hook for handling builder availability status.
function useBuilderAvailability(builderId: string): {
  availability: 'available' | 'limited' | 'unavailable';
  isLoading: boolean;
  error: Error | null;
  updateAvailability: (status: 'available' | 'limited' | 'unavailable') => Promise<void>;
}

​
Usage Examples

​
Using Builder Filters

import { useBuilderFilter } from '@/components/marketplace/hooks';
import { FilterPanel } from '@/components/marketplace/components/filter-panel';

function MarketplaceFilters() {
  const { 
    filters, 
    filterOptions, 
    isLoading, 
    updateFilter, 
    resetFilters 
  } = useBuilderFilter();
  
  return (
    <div>
      <FilterPanel
        filters={filters}
        options={filterOptions}
        onFilterChange={updateFilter}
        isLoading={isLoading}
      />
      <button onClick={resetFilters}>Reset Filters</button>
    </div>
  );
}

import { useBuilderSearch } from '@/components/marketplace/hooks';
import { BuilderList } from '@/components/marketplace/components/builder-list';
import { LoadingSpinner } from '@/components/ui/core';

function MarketplaceSearch() {
  const { 
    builders, 
    isLoading, 
    error, 
    pagination, 
    loadMore 
  } = useBuilderSearch();
  
  if (error) {
    return <div>Error loading builders: {error.message}</div>;
  }
  
  return (
    <div>
      <BuilderList 
        builders={builders} 
        isLoading={isLoading} 
      />
      
      {pagination.hasNextPage && (
        <button 
          onClick={loadMore} 
          disabled={isLoading}
        >
          {isLoading ? <LoadingSpinner /> : 'Load More'}
        </button>
      )}
    </div>
  );
}

​
Combined Filter and Search Example

import { useBuilderFilter, useBuilderSearch } from '@/components/marketplace/hooks';
import { useEffect } from 'react';

function MarketplacePage() {
  const { 
    filters, 
    filterOptions, 
    updateFilter 
  } = useBuilderFilter();
  
  const { 
    builders, 
    isLoading, 
    search 
  } = useBuilderSearch();
  
  // Search when filters change
  useEffect(() => {
    search(filters);
  }, [filters, search]);
  
  return (
    <div>
      {/* Filter UI */}
      <FilterPanel 
        filters={filters} 
        options={filterOptions} 
        onFilterChange={updateFilter} 
      />
      
      {/* Results UI */}
      <BuilderList 
        builders={builders} 
        isLoading={isLoading} 
      />
    </div>
  );
}

​
State Management Principles

The marketplace hooks follow these state management principles:
  1. URL Synchronization: Filter state is synchronized with URL parameters for shareable links and back-button support
  2. Optimistic Updates: UI updates immediately while changes are being saved to the server
  3. Error Recovery: Graceful error handling with user-friendly messages and retry mechanisms
  4. Loading States: Clear loading indicators for async operations
  5. Separation of Concerns: Each hook has a single responsibility

​
See Also