File uploader: Virtual lists

import type { UploadItem } from "slotsmith/file-uploader";
import { VirtualFileUploader } from "slotsmith/virtual";
import { fakeUpload } from "../shared/fake-upload";

// 300 scans already stored, built from their index so every render gets the same ones.
const scans: UploadItem[] = Array.from({ length: 300 }, (_, index) => {
  const name = `scan-${String(index + 1).padStart(3, "0")}.pdf`;
  return {
    id: name,
    name,
    size: 40_000 + ((index * 7919) % 900_000),
    type: "application/pdf",
    status: "done",
    progress: 100,
    url: `/samples/uploaded/${name}`,
  };
});

export default function Virtual() {
  return (
    <VirtualFileUploader
      multiple
      maxFiles={500}
      defaultValue={scans}
      upload={fakeUpload}
      // A fallback row is 64.5px tall plus the 8px gap; the list scrolls inside 320px and renders only what is in view.
      virtual={{ estimateSize: 72.5, maxHeight: 320 }}
    />
  );
}

/** What the uploader hands an `upload` function, as far as this stand-in reads it. */
export interface FakeUploadContext {
  signal: AbortSignal;
  onProgress(percent: number): void;
}

/** Five steps of 200 ms: the whole upload takes one second. */
const STEPS = 5;
const STEP_MS = 200;

/** Waits `ms`, and rejects with an `AbortError` as soon as the signal aborts. */
function wait(ms: number, signal: AbortSignal): Promise<void> {
  return new Promise((resolve, reject) => {
    let timer: ReturnType<typeof setTimeout> | undefined;
    const abort = () => {
      clearTimeout(timer);
      reject(new DOMException("The upload was cancelled.", "AbortError"));
    };
    if (signal.aborted) return abort();
    timer = setTimeout(() => {
      signal.removeEventListener("abort", abort);
      resolve();
    }, ms);
    signal.addEventListener("abort", abort, { once: true });
  });
}

/**
 * A stand-in for an upload endpoint. Nothing leaves the browser: it reports
 * progress in five steps over one second, stops as soon as `signal` aborts,
 * and resolves with `/samples/uploaded/<name>`. With `fail`, it fails at 60%
 * the way a server error would, so the retry path can be tried.
 */
export async function fakeUpload(
  file: File,
  { signal, onProgress }: FakeUploadContext,
  { fail = false }: { fail?: boolean } = {},
): Promise<{ url: string }> {
  for (let step = 1; step <= STEPS; step += 1) {
    await wait(STEP_MS, signal);
    if (fail && step === 3) throw new Error("The server answered 503. Try again.");
    onProgress((step / STEPS) * 100);
  }
  return { url: `/samples/uploaded/${encodeURIComponent(file.name)}` };
}