feat(ui): migrate public CV entry and recovery
This commit is contained in:
cesnimda
@@ -1,43 +1,78 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Box, Button } from "@mui/material";
|
||||
|
||||
import { api } from "../api";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
import { PageHeader } from "../layout/PageLayout";
|
||||
import ViewStateNotice from "../components/ViewStateNotice";
|
||||
|
||||
const A4_WIDTH_PX = (210 / 25.4) * 96;
|
||||
const A4_HEIGHT_PX = (297 / 25.4) * 96;
|
||||
|
||||
type PublicCvRead = {
|
||||
slug?: string;
|
||||
html?: string;
|
||||
name?: string;
|
||||
error?: "missing" | "transient";
|
||||
loading: boolean;
|
||||
height: number;
|
||||
};
|
||||
|
||||
// Anonymous read-only public CV at /cv/:slug. Renders the server-produced HTML in a sandboxed
|
||||
// iframe. noindex is enforced server-side (X-Robots-Tag) and reinforced with a meta tag here.
|
||||
export default function PublicCvPage() {
|
||||
const { slug } = useParams();
|
||||
const pdfUrl = `${api.defaults.baseURL}/public-cv/${slug}/pdf`;
|
||||
const [html, setHtml] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { t } = useI18n();
|
||||
const pdfUrl = `${api.defaults.baseURL}/public-cv/${encodeURIComponent(slug ?? "")}/pdf`;
|
||||
const [read, setRead] = useState<PublicCvRead>({ slug, loading: true, height: A4_HEIGHT_PX });
|
||||
const [retry, setRetry] = useState(0);
|
||||
const pending = useRef(false);
|
||||
const headingRef = useRef<HTMLHeadingElement>(null);
|
||||
const previousTitle = useRef("");
|
||||
const ownedTitle = useRef<string | null>(null);
|
||||
const [frameScale, setFrameScale] = useState(1);
|
||||
const [frameHeight, setFrameHeight] = useState(A4_HEIGHT_PX);
|
||||
// Hide the old document on the first render of a new route, before its effect runs.
|
||||
const current = read.slug === slug ? read : null;
|
||||
const loading = !current || current.loading;
|
||||
const frameHeight = current?.height ?? A4_HEIGHT_PX;
|
||||
const title = t("publicCvTitle");
|
||||
const unavailable = current?.error === "missing";
|
||||
const errorTitle = t(unavailable ? "publicCvUnavailableTitle" : "publicCvLoadFailedTitle");
|
||||
|
||||
useEffect(() => {
|
||||
const originalTitle = document.title;
|
||||
previousTitle.current = originalTitle;
|
||||
const meta = document.createElement("meta");
|
||||
meta.name = "robots";
|
||||
meta.content = "noindex, nofollow";
|
||||
document.head.appendChild(meta);
|
||||
return () => {
|
||||
meta.remove();
|
||||
if (document.title === ownedTitle.current) document.title = originalTitle;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
api.get<{ html: string; name: string }>(`/public-cv/${slug}`)
|
||||
.then((r) => { if (alive) { setHtml(r.data.html); if (r.data.name) document.title = `${r.data.name} — CV`; } })
|
||||
pending.current = true;
|
||||
setRead({ slug, loading: true, height: A4_HEIGHT_PX });
|
||||
api.get<{ html: string; name: string }>(`/public-cv/${encodeURIComponent(slug ?? "")}`)
|
||||
.then((r) => { if (alive) setRead({ slug, html: r.data.html, name: r.data.name, loading: false, height: A4_HEIGHT_PX }); })
|
||||
.catch((err) => {
|
||||
if (!alive) return;
|
||||
// 404 = unknown slug or the owner made it private again. Anything else is a transient error.
|
||||
setError(err?.response?.status === 404
|
||||
? "This CV isn’t available. The link may be wrong, or the owner has made it private."
|
||||
: "This CV can’t be loaded right now. Please try again in a moment.");
|
||||
});
|
||||
setRead({ slug, error: err?.response?.status === 404 ? "missing" : "transient", loading: false, height: A4_HEIGHT_PX });
|
||||
})
|
||||
.finally(() => { if (alive) pending.current = false; });
|
||||
return () => { alive = false; };
|
||||
}, [slug, retry]);
|
||||
|
||||
return () => {
|
||||
alive = false;
|
||||
document.head.removeChild(meta);
|
||||
};
|
||||
}, [slug]);
|
||||
useEffect(() => {
|
||||
const nextTitle = current?.name ? `${current.name} — CV` : previousTitle.current;
|
||||
document.title = nextTitle;
|
||||
ownedTitle.current = nextTitle;
|
||||
}, [current?.name]);
|
||||
|
||||
useEffect(() => {
|
||||
const updateScale = () => setFrameScale(Math.min(1, Math.max(0.1, (window.innerWidth - 32) / A4_WIDTH_PX)));
|
||||
@@ -46,41 +81,38 @@ export default function PublicCvPage() {
|
||||
return () => window.removeEventListener("resize", updateScale);
|
||||
}, []);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100vh", alignItems: "center", justifyContent: "center", fontFamily: "system-ui", color: "#374151" }}>
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (html === null) {
|
||||
return (
|
||||
<div role="status" style={{ display: "flex", height: "100vh", alignItems: "center", justifyContent: "center", fontFamily: "system-ui", color: "#4b5563" }}>
|
||||
Loading…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: "100vh", background: "#e9edf2", padding: "24px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 16, overflowX: "hidden" }}>
|
||||
<a href={pdfUrl} download style={{ padding: "10px 16px", borderRadius: 8, background: "#1d4ed8", color: "#fff", font: "600 14px system-ui", textDecoration: "none" }}>
|
||||
Download PDF
|
||||
</a>
|
||||
<div
|
||||
<Box component="main" sx={{ minHeight: "100vh", bgcolor: "background.default", color: "text.primary", py: 3, px: "16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 2, minWidth: 0 }}>
|
||||
<Box sx={{ width: "100%", maxWidth: A4_WIDTH_PX, minWidth: 0 }}>
|
||||
<PageHeader title={title} titleRef={headingRef} description={t("publicCvDescription")}
|
||||
actions={current?.html !== undefined ? <Button component="a" variant="contained" href={pdfUrl} download>{t("publicCvDownloadPdf")}</Button> : undefined} />
|
||||
<ViewStateNotice compact loading={loading} title={errorTitle}
|
||||
error={current?.error ? { kind: "unavailable", message: errorTitle, retryable: !unavailable } : null}
|
||||
description={t(unavailable ? "publicCvUnavailableBody" : "publicCvLoadFailedBody")}
|
||||
onRetry={() => {
|
||||
if (pending.current || loading) return;
|
||||
pending.current = true;
|
||||
headingRef.current?.focus();
|
||||
setRead({ slug, loading: true, height: A4_HEIGHT_PX });
|
||||
setRetry((value) => value + 1);
|
||||
}} />
|
||||
</Box>
|
||||
{current?.html !== undefined && <div
|
||||
data-testid="public-cv-frame-container"
|
||||
style={{ width: A4_WIDTH_PX * frameScale, height: frameHeight * frameScale, maxWidth: "100%", overflow: "hidden", boxShadow: "0 8px 30px rgba(0,0,0,0.18)" }}
|
||||
>
|
||||
<iframe
|
||||
title="Public CV"
|
||||
srcDoc={html}
|
||||
title={title}
|
||||
srcDoc={current.html}
|
||||
sandbox="allow-same-origin"
|
||||
onLoad={(event) => {
|
||||
const documentHeight = event.currentTarget.contentDocument?.documentElement.scrollHeight ?? A4_HEIGHT_PX;
|
||||
setFrameHeight(Math.max(A4_HEIGHT_PX, documentHeight));
|
||||
setRead((previous) => previous.slug === slug && previous.html === current.html && !previous.loading
|
||||
? { ...previous, height: Math.max(A4_HEIGHT_PX, documentHeight) } : previous);
|
||||
}}
|
||||
style={{ width: A4_WIDTH_PX, height: frameHeight, transform: `scale(${frameScale})`, transformOrigin: "top left", border: "none", background: "#fff", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user