export function ResourcesTable()

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)}>