From 70df113ee64a5620444e478fc20c84cd40645381 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Sat, 4 Jul 2026 21:48:04 +0200 Subject: [PATCH] =?UTF-8?q?refactor(web):=20finding=209=20=E2=80=94=20publ?= =?UTF-8?q?ic-resume=20reuses=20useResumeExport=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Loosen useResumeExport param to ExportableResume { name, slug, data } so the public resume page (where name may be '' for non-owner viewers) can reuse it. getExportName() falls back to data.basics.name then slug, matching the original inline logic. Claude-Session: https://claude.ai/code/session_012Bnvt1MghwHj4qQRxuQUGa --- .../resume/export/use-resume-export.ts | 19 ++++++++--- .../features/resume/public/public-resume.tsx | 34 ++++--------------- 2 files changed, 20 insertions(+), 33 deletions(-) diff --git a/apps/web/src/features/resume/export/use-resume-export.ts b/apps/web/src/features/resume/export/use-resume-export.ts index 915d26422..0461b4c13 100644 --- a/apps/web/src/features/resume/export/use-resume-export.ts +++ b/apps/web/src/features/resume/export/use-resume-export.ts @@ -1,4 +1,4 @@ -import type { Resume } from "@/features/resume/builder/draft"; +import type { ResumeData } from "@reactive-resume/schema/resume/data"; import { t } from "@lingui/core/macro"; import { useCallback, useState } from "react"; import { toast } from "sonner"; @@ -6,24 +6,33 @@ import { buildDocx } from "@reactive-resume/docx"; import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file"; import { createResumePdfBlob } from "./pdf-document"; +// ponytail: loosened from Resume to Pick so public-resume (where name may be "" for non-owners) can reuse +type ExportableResume = { + name: string; + slug: string; + data: ResumeData; +}; + +const getExportName = (resume: ExportableResume) => resume.name || resume.data.basics.name || resume.slug; + /** * Single source of truth for resume export (PDF / DOCX / JSON / Print). Previously duplicated verbatim * between the builder dock and the right-panel Export section (#17). */ -export function useResumeExport(resume: Resume | undefined) { +export function useResumeExport(resume: ExportableResume | undefined) { const [isExporting, setIsExporting] = useState(false); const onDownloadJSON = useCallback(() => { if (!resume) return; const blob = new Blob([JSON.stringify(resume.data, null, 2)], { type: "application/json" }); - downloadWithAnchor(blob, generateFilename(resume.name, "json")); + downloadWithAnchor(blob, generateFilename(getExportName(resume), "json")); }, [resume]); const onDownloadDOCX = useCallback(async () => { if (!resume) return; try { const blob = await buildDocx(resume.data); - downloadWithAnchor(blob, generateFilename(resume.name, "docx")); + downloadWithAnchor(blob, generateFilename(getExportName(resume), "docx")); } catch { toast.error(t`There was a problem while generating the DOCX, please try again.`); } @@ -35,7 +44,7 @@ export function useResumeExport(resume: Resume | undefined) { setIsExporting(true); try { const blob = await createResumePdfBlob(resume.data); - downloadWithAnchor(blob, generateFilename(resume.name, "pdf")); + downloadWithAnchor(blob, generateFilename(getExportName(resume), "pdf")); } catch { toast.error(t`There was a problem while generating the PDF, please try again.`); } finally { diff --git a/apps/web/src/features/resume/public/public-resume.tsx b/apps/web/src/features/resume/public/public-resume.tsx index e188ac7e6..0318881b2 100644 --- a/apps/web/src/features/resume/public/public-resume.tsx +++ b/apps/web/src/features/resume/public/public-resume.tsx @@ -3,13 +3,10 @@ import { Trans } from "@lingui/react/macro"; import { CircleNotchIcon, DownloadSimpleIcon } from "@phosphor-icons/react"; import { useQuery } from "@tanstack/react-query"; import { getRouteApi } from "@tanstack/react-router"; -import { useCallback, useState } from "react"; -import { toast } from "sonner"; import { BrandIcon } from "@reactive-resume/ui/components/brand-icon"; import { Button } from "@reactive-resume/ui/components/button"; -import { downloadWithAnchor, generateFilename } from "@reactive-resume/utils/file"; import { LoadingScreen } from "@/components/layout/loading-screen"; -import { createResumePdfBlob } from "@/features/resume/export/pdf-document"; +import { useResumeExport } from "@/features/resume/export/use-resume-export"; import { orpc } from "@/libs/orpc/client"; import { PdfViewer } from "./pdf-viewer"; @@ -19,26 +16,7 @@ export function PublicResumeRoute() { const { username, slug } = publicResumeRoute.useParams(); const { data: resume } = useQuery(orpc.resume.getBySlug.queryOptions({ input: { username, slug } })); - const [isPrinting, setIsPrinting] = useState(false); - - const onDownloadPDF = useCallback(async () => { - if (!resume) return; - - const filename = generateFilename(resume.name || resume.data.basics.name || resume.slug, "pdf"); - const toastId = toast.loading(t`Please wait while your PDF is being generated...`); - - setIsPrinting(true); - - try { - const blob = await createResumePdfBlob(resume.data); - downloadWithAnchor(blob, filename); - } catch { - toast.error(t`There was a problem while generating the PDF, please try again.`); - } finally { - setIsPrinting(false); - toast.dismiss(toastId); - } - }, [resume]); + const { onDownloadPDF, isExporting } = useResumeExport(resume); if (!resume) return ; @@ -55,8 +33,8 @@ export function PublicResumeRoute() { {basics.name &&

{basics.name}

} {basics.headline &&

{basics.headline}

} - );