in packages/secure-static-site-frontend/src/ResourcesTable.tsx [59:124]
export function ResourcesTable() {
const [state, dispatch] = useReducer(reducer, initState);
function handleDownloadScript(url: string) {
const key = "script";
dispatch({ type: "request", key });
const script = document.createElement("script");
script.onload = () => dispatch({ type: "response", key, status: "200" });
script.onerror = () => dispatch({ type: "response", key, status: "Blocked" });
script.src = url;
document.body.appendChild(script);
}
function handleDownloadStyle(url: string) {
const key = "style";
dispatch({ type: "request", key });
const style = document.createElement("link");
style.rel = "stylesheet";
style.onload = () => dispatch({ type: "response", key, status: "200" });
style.onerror = () => dispatch({ type: "response", key, status: "Blocked" });
style.href = url;
document.body.appendChild(style);
}
async function handleDownloadFont(url: string) {
const key = "font";
dispatch({ type: "request", key });
const fontFace = new FontFace("Roboto", `url(${url})`);
try {
await fontFace.load();
dispatch({ type: "response", key, status: "200" })
} catch (err) {
dispatch({ type: "response", key, status: "Blocked" })
}
}
function handleDownloadImage(url: string) {
const key = "image";
dispatch({ type: "request", key });
const img = document.createElement("img");
img.onload = () => dispatch({ type: "response", key, status: "200" });
img.onerror = () => dispatch({ type: "response", key, status: "Blocked" });
img.src = url;
}
function handleDownloadMedia(url: string) {
const key = "media";
dispatch({ type: "request", key });
const video = document.createElement("video");
video.onloadeddata = () => dispatch({ type: "response", key, status: "200" });
video.onerror = () => dispatch({ type: "response", key, status: "Blocked" });
video.src = url;
video.load();
}
return (
<Table>
<TableHead>
<TableRow>
<TableCell>Content Type</TableCell>
<TableCell>URL</TableCell>
<TableCell>Download</TableCell>
<TableCell sx={{ minWidth: statusMinWidth }}>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Script</TableCell>
<TableCell>{scriptUrl}</TableCell>
<TableCell>
<LoadingButton loading={state.script.loading} variant="contained" onClick={() => handleDownloadScript(scriptUrl)}>