Function useOptimisticResultsWithPending

Returns {
    results: (
        | Product
        | {
            id: number;
            isPending: boolean;
            baseQuantity?: number;
            baseUom?: any;
            usdPrice?: number;
            localPrice?: number;
            sku?: string
            | number;
            uuid?: string | number;
            grade?: string;
            conc?: string;
            status?: string;
            statusTxt?: string;
            shippingInformation?: string;
            availability?: any;
            attributes?: { name: string; value: string }[];
            moles?: number;
            supplier: string;
            title: string;
            url: string;
            price: number;
            currencyCode: valueof;
            currencySymbol: valueof;
            quantity: number;
            uom: valueof<any>;
            description?: string;
            manufacturer?: string;
            cas?: `${string}-${string}-${string}`;
            formula?: string;
            vendor?: string;
            variants?: Variant[];
            docLinks?: string[];
            supplierCountry?: string;
            supplierShipping?: ShippingRange;
            paymentMethods?: PaymentMethod[];
            _fuzz?: { score: number; idx: number };
            matchPercentage?: number;
        }
    )[];
    addPendingResult: (product: Product) => void;
    confirmResult: (product: Product) => void;
    removeFailedResult: (product: Product) => void;
}

An object with results, addPendingResult, confirmResult, and removeFailedResult functions.

• results: (
      | Product
      | {
          id: number;
          isPending: boolean;
          baseQuantity?: number;
          baseUom?: any;
          usdPrice?: number;
          localPrice?: number;
          sku?: string
          | number;
          uuid?: string | number;
          grade?: string;
          conc?: string;
          status?: string;
          statusTxt?: string;
          shippingInformation?: string;
          availability?: any;
          attributes?: { name: string; value: string }[];
          moles?: number;
          supplier: string;
          title: string;
          url: string;
          price: number;
          currencyCode: valueof;
          currencySymbol: valueof;
          quantity: number;
          uom: valueof<any>;
          description?: string;
          manufacturer?: string;
          cas?: `${string}-${string}-${string}`;
          formula?: string;
          vendor?: string;
          variants?: Variant[];
          docLinks?: string[];
          supplierCountry?: string;
          supplierShipping?: ShippingRange;
          paymentMethods?: PaymentMethod[];
          _fuzz?: { score: number; idx: number };
          matchPercentage?: number;
      }
  )[]

• addPendingResult: (product: Product) => void

• confirmResult: (product: Product) => void

• removeFailedResult: (product: Product) => void

const { results, addPendingResult, confirmResult, removeFailedResult } =
  useOptimisticResultsWithPending(searchResults);

addPendingResult(product);   // row appears with isPending: true
confirmResult(product);      // isPending flips to false
removeFailedResult(product); // row is removed from the list
Copy

export function useOptimisticResultsWithPending(confirmedResults: Product[]) {
  const [optimisticResults, addOptimisticResult] = useOptimistic(
    confirmedResults,
    (
      state: Product[],
      action: { type: "add" | "confirm" | "error"; product: Product; tempId?: string },
    ) => {
      switch (action.type) {
        case "add":
          return [...state, { ...action.product, id: state.length, isPending: true }];

        case "confirm":
          return state.map((item) =>
            item.id === action.product.id ? { ...action.product, isPending: false } : item,
          );

        case "error":
          return state.filter((item) => item.id !== action.product.id);

        default:
          return state;
      }
    },
  );

  /**
   * Add a product in the pending state (`isPending: true`).
   * @param product - The product to insert optimistically
   * @source
   */
  const addPendingResult = (product: Product) => {
    addOptimisticResult({ type: "add", product });
  };

  /**
   * Mark a previously pending product as confirmed (`isPending: false`).
   * @param product - The confirmed product (must have a matching `id`)
   * @source
   */
  const confirmResult = (product: Product) => {
    addOptimisticResult({ type: "confirm", product });
  };

  /**
   * Remove a product that failed processing from the optimistic list.
   * @param product - The failed product (must have a matching `id`)
   * @source
   */
  const removeFailedResult = (product: Product) => {
    addOptimisticResult({ type: "error", product });
  };

  return {
    results: optimisticResults,
    addPendingResult,
    confirmResult,
    removeFailedResult,
  };
}
Copy