shoc-frontend-new/src/app/v/_components/vendor-portal-provider.tsx

import { useEffect, useMemo, useState, type ReactNode } from "react";
import { useParams } from "react-router";
import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
import type { VendorPortalSession } from "@/domain/vendor-portal/types/vendor-portal";
import {
  VendorPortalContext,
  type VendorPortalContextValue,
  type VendorPortalStatus,
} from "@/app/v/_components/vendor-portal-context";

function VendorPortalSessionLoader({ token, children }: { token: string; children: ReactNode }) {
  const [vendor, setVendor] = useState<VendorPortalSession | null>(null);
  const [status, setStatus] = useState<VendorPortalStatus>("loading");
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let cancelled = false;

    vendorPortalApi
      .session(token)
      .then((data) => {
        if (cancelled) return;
        setVendor(data);
        setStatus("ready");
      })
      .catch((err: Error) => {
        if (cancelled) return;
        setError(err);
        setStatus("error");
      });

    return () => {
      cancelled = true;
    };
  }, [token]);

  const value = useMemo<VendorPortalContextValue>(
    () => ({ token, vendor, status, error }),
    [token, vendor, status, error],
  );

  return <VendorPortalContext.Provider value={value}>{children}</VendorPortalContext.Provider>;
}

export function VendorPortalProvider({ children }: { children: ReactNode }) {
  const { token = "" } = useParams();

  return (
    <VendorPortalSessionLoader key={token} token={token}>
      {children}
    </VendorPortalSessionLoader>
  );
}