shoc-frontend-new/src/app/v/_components/vendor-portal-provider.tsx
npal a93747f119 refactor(vendor-portal,settings): move state and fetch logic into hooks (SH-378)
vendor-portal-provider.tsx and task-templates.tsx mixed data-fetching,
state, and rendering in one file, with no caching and hand-rolled form
state. This is a pure refactor with no behavior change.

- vendor-portal-provider.tsx: replace manual useEffect/useState fetch
  with useVendorPortalSession (useQuery), closing the token race
  condition the old key={token} remount was working around
- task-templates.tsx: split into useTaskTemplateEditor hook plus 4
  presentational components; replace hand-rolled form state with
  react-hook-form + zod validation; replace the "new" string sentinel
  with a NEW_TEMPLATE_ID constant
- add 29 tests (hook, component, and full-page integration) confirming
  identical behavior to the original code
2026-09-17 18:05:06 -05:00

28 lines
957 B
TypeScript

import { useMemo, type ReactNode } from "react";
import { useParams } from "react-router";
import { useVendorPortalSession } from "@/domain/vendor-portal/use-cases/use-vendor-portal-session";
import {
VendorPortalContext,
type VendorPortalContextValue,
} from "@/app/v/_components/vendor-portal-context";
function VendorPortalSessionLoader({ token, children }: { token: string; children: ReactNode }) {
const { vendor, status, error } = useVendorPortalSession(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>
);
}