adilallo
125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import type { CreateFlowState } from "./types";
|
|
import { createFlowStateHasKeys } from "../../../lib/create/draftHydrationUtils";
|
|
import {
|
|
clearAnonymousCreateFlowStorage,
|
|
hasTransferPendingFlag,
|
|
readAnonymousCreateFlowState,
|
|
} from "./utils/anonymousDraftStorage";
|
|
import { useCreateFlow } from "./context/CreateFlowContext";
|
|
import { fetchDraftFromServer } from "../../../lib/create/api";
|
|
import messages from "../../../messages/en/index";
|
|
|
|
const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
|
|
|
|
/**
|
|
* When sync is on and the user is signed in, fetch `GET /api/drafts/me` once and merge into context.
|
|
* Skips when `?syncDraft=1` or transfer-pending — {@link PostLoginDraftTransfer} owns that path.
|
|
*
|
|
* **Conflict:** If both server draft and `create-flow-anonymous` are non-empty, `window.confirm`
|
|
* chooses account draft (OK) vs browser copy (Cancel); browser storage is cleared after resolution.
|
|
*/
|
|
export function SignedInDraftHydration({
|
|
sessionUser,
|
|
sessionResolved,
|
|
}: {
|
|
sessionUser: { id: string; email: string } | null | undefined;
|
|
sessionResolved: boolean;
|
|
}) {
|
|
const searchParams = useSearchParams();
|
|
const syncDraftParam = searchParams.get("syncDraft");
|
|
const { replaceState, interactionTouched } = useCreateFlow();
|
|
const touchedRef = useRef(interactionTouched);
|
|
touchedRef.current = interactionTouched;
|
|
|
|
const [loadingHydration, setLoadingHydration] = useState(false);
|
|
const finishedUserIdRef = useRef<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!SYNC_ENABLED) return;
|
|
if (!sessionResolved) return;
|
|
if (sessionUser == null || sessionUser === undefined) {
|
|
finishedUserIdRef.current = null;
|
|
return;
|
|
}
|
|
|
|
const userId = sessionUser.id;
|
|
if (finishedUserIdRef.current === userId) return;
|
|
|
|
if (syncDraftParam === "1" || hasTransferPendingFlag()) {
|
|
finishedUserIdRef.current = userId;
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
setLoadingHydration(true);
|
|
|
|
void (async () => {
|
|
try {
|
|
const serverDraft = await fetchDraftFromServer();
|
|
if (cancelled) return;
|
|
|
|
const localDraft = readAnonymousCreateFlowState();
|
|
const hasServer =
|
|
serverDraft != null && createFlowStateHasKeys(serverDraft);
|
|
const hasLocal = createFlowStateHasKeys(localDraft);
|
|
|
|
if (touchedRef.current) {
|
|
finishedUserIdRef.current = userId;
|
|
return;
|
|
}
|
|
|
|
if (hasServer && hasLocal) {
|
|
const useAccount =
|
|
typeof window !== "undefined" &&
|
|
window.confirm(messages.create.draftHydration.conflictPrompt);
|
|
if (cancelled) return;
|
|
if (useAccount) {
|
|
replaceState(serverDraft as CreateFlowState);
|
|
} else {
|
|
replaceState(localDraft);
|
|
}
|
|
clearAnonymousCreateFlowStorage();
|
|
finishedUserIdRef.current = userId;
|
|
return;
|
|
}
|
|
|
|
if (hasServer) {
|
|
replaceState(serverDraft as CreateFlowState);
|
|
clearAnonymousCreateFlowStorage();
|
|
finishedUserIdRef.current = userId;
|
|
return;
|
|
}
|
|
|
|
if (hasLocal) {
|
|
replaceState(localDraft);
|
|
clearAnonymousCreateFlowStorage();
|
|
}
|
|
|
|
finishedUserIdRef.current = userId;
|
|
} finally {
|
|
if (!cancelled) setLoadingHydration(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [sessionResolved, sessionUser, syncDraftParam, replaceState]);
|
|
|
|
if (!loadingHydration) return null;
|
|
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className="w-full shrink-0 px-[var(--spacing-measures-spacing-500,20px)] py-[var(--spacing-measures-spacing-200,8px)] md:px-[var(--measures-spacing-1800,64px)] text-center font-inter text-sm text-[var(--color-text-default-secondary,#a3a3a3)]"
|
|
>
|
|
{messages.create.draftHydration.loadingSavedProgress}
|
|
</div>
|
|
);
|
|
}
|