partial synch with ph2 updates
This commit is contained in:
@@ -0,0 +1,325 @@
|
||||
// // import { useState } from "react";
|
||||
|
||||
// // export default function DocumentLink({ detailsObj, caseReference }) {
|
||||
// // const [downloadStatus, setDownloadStatus] = useState("");
|
||||
// // const [progress, setProgress] = useState(null);
|
||||
|
||||
// // const handleDownload = async () => {
|
||||
// // setDownloadStatus("Downloading");
|
||||
// // setProgress(0);
|
||||
|
||||
// // try {
|
||||
// // const res = await fetch(detailsObj.pinswg_hashlink);
|
||||
// // if (!res.ok) throw new Error("Download failed");
|
||||
|
||||
// // const contentDisposition = res.headers.get("content-disposition");
|
||||
// // const filename = contentDisposition
|
||||
// // ? contentDisposition.split("filename=")[1]
|
||||
// // : detailsObj.pinswg_name || "document";
|
||||
|
||||
// // const contentLength = res.headers.get("content-length");
|
||||
// // const totalBytes = contentLength
|
||||
// // ? parseInt(contentLength, 10)
|
||||
// // : null;
|
||||
|
||||
// // const reader = res.body.getReader();
|
||||
// // let receivedBytes = 0;
|
||||
// // const chunks = [];
|
||||
|
||||
// // while (true) {
|
||||
// // const { done, value } = await reader.read();
|
||||
// // if (done) break;
|
||||
|
||||
// // chunks.push(value);
|
||||
// // receivedBytes += value.length;
|
||||
|
||||
// // if (totalBytes) {
|
||||
// // const percent = Math.round(
|
||||
// // (receivedBytes / totalBytes) * 100
|
||||
// // );
|
||||
// // setProgress(percent);
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // // Combine chunks into one blob
|
||||
// // const blob = new Blob(chunks);
|
||||
// // const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// // const link = document.createElement("a");
|
||||
// // link.href = url;
|
||||
// // link.download = filename;
|
||||
// // document.body.appendChild(link);
|
||||
// // link.click();
|
||||
// // document.body.removeChild(link);
|
||||
|
||||
// // setDownloadStatus("Download complete!");
|
||||
// // setProgress(100);
|
||||
|
||||
// // // Fire GA event
|
||||
// // window.gtag?.("event", "DownloadedFile", {
|
||||
// // caseReference,
|
||||
// // filename,
|
||||
// // });
|
||||
// // } catch (err) {
|
||||
// // console.error(err);
|
||||
// // setDownloadStatus("Download failed");
|
||||
// // setProgress(null);
|
||||
// // }
|
||||
// // };
|
||||
|
||||
// // return (
|
||||
// // <>
|
||||
// // {detailsObj.pinswg_publishtoweb ? (
|
||||
// // <button className="documentLink" onClick={handleDownload}>
|
||||
// // <span className="results-visually-hidden">
|
||||
// // Document name:
|
||||
// // </span>
|
||||
// // {detailsObj.pinswg_name || ""}
|
||||
// // </button>
|
||||
// // ) : (
|
||||
// // <>
|
||||
// // <span className="results-visually-hidden">
|
||||
// // Document name:
|
||||
// // </span>
|
||||
// // {detailsObj.pinswg_name || ""}
|
||||
// // </>
|
||||
// // )}
|
||||
|
||||
// // {downloadStatus && (
|
||||
// // <p
|
||||
// // className={
|
||||
// // downloadStatus == "Downloading"
|
||||
// // ? "govuk-!-font-size-14 govuk-!-margin-left-0 textloading"
|
||||
// // : "govuk-!-font-size-14 govuk-!-margin-left-0 "
|
||||
// // }
|
||||
// // >
|
||||
// // {downloadStatus}
|
||||
// // {/* {progress !== null && ` (${progress}%)`} */}
|
||||
// // </p>
|
||||
// // )}
|
||||
// // </>
|
||||
// // );
|
||||
// // }
|
||||
// import { useState } from "react";
|
||||
|
||||
// export default function DocumentLink({
|
||||
// id,
|
||||
// detailsObj,
|
||||
// caseReference,
|
||||
// startDownload,
|
||||
// getStatus,
|
||||
// }) {
|
||||
// const [downloadStatus, setDownloadStatus] = useState("");
|
||||
// const [progress, setProgress] = useState(null);
|
||||
|
||||
// const downloadFile = async () => {
|
||||
// setDownloadStatus("Downloading");
|
||||
// setProgress(0);
|
||||
|
||||
// try {
|
||||
// const res = await fetch(detailsObj.pinswg_hashlink);
|
||||
// if (!res.ok) throw new Error("Download failed");
|
||||
|
||||
// const contentDisposition = res.headers.get("content-disposition");
|
||||
// const filename = contentDisposition
|
||||
// ? contentDisposition.split("filename=")[1]
|
||||
// : detailsObj.pinswg_name || "document";
|
||||
|
||||
// const contentLength = res.headers.get("content-length");
|
||||
// const totalBytes = contentLength
|
||||
// ? parseInt(contentLength, 10)
|
||||
// : null;
|
||||
|
||||
// const reader = res.body.getReader();
|
||||
// let receivedBytes = 0;
|
||||
// const chunks = [];
|
||||
|
||||
// while (true) {
|
||||
// const { done, value } = await reader.read();
|
||||
// if (done) break;
|
||||
|
||||
// chunks.push(value);
|
||||
// receivedBytes += value.length;
|
||||
|
||||
// if (totalBytes) {
|
||||
// const percent = Math.round(
|
||||
// (receivedBytes / totalBytes) * 100
|
||||
// );
|
||||
// setProgress(percent);
|
||||
// }
|
||||
// }
|
||||
|
||||
// const blob = new Blob(chunks);
|
||||
// const url = window.URL.createObjectURL(blob);
|
||||
|
||||
// const link = document.createElement("a");
|
||||
// link.href = url;
|
||||
// link.download = filename;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
|
||||
// setDownloadStatus("Download complete!");
|
||||
// setProgress(100);
|
||||
|
||||
// window.gtag?.("event", "DownloadedFile", {
|
||||
// caseReference,
|
||||
// filename,
|
||||
// });
|
||||
// } catch (err) {
|
||||
// console.error(err);
|
||||
// setDownloadStatus("Download failed");
|
||||
// setProgress(null);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const handleClick = () => {
|
||||
// if (getStatus(id) !== "idle") return; // don't double enqueue
|
||||
// startDownload(id, downloadFile);
|
||||
// };
|
||||
|
||||
// const status = getStatus(id);
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// {detailsObj.pinswg_publishtoweb ? (
|
||||
// <button className="documentLink" onClick={handleClick}>
|
||||
// <span className="results-visually-hidden">
|
||||
// Document name:
|
||||
// </span>
|
||||
// {detailsObj.pinswg_name || ""}
|
||||
// </button>
|
||||
// ) : (
|
||||
// <>
|
||||
// <span className="results-visually-hidden">
|
||||
// Document name:
|
||||
// </span>
|
||||
// {detailsObj.pinswg_name || ""}
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {status !== "idle" && (
|
||||
// <p
|
||||
// className={
|
||||
// status === "downloading"
|
||||
// ? "govuk-!-font-size-14 govuk-!-margin-left-0 textloading"
|
||||
// : "govuk-!-font-size-14 govuk-!-margin-left-0"
|
||||
// }
|
||||
// >
|
||||
// {status === "downloading" && progress !== null
|
||||
// ? `Downloading (${progress}%)`
|
||||
// : status === "queued"
|
||||
// ? "Queued"
|
||||
// : status === "done"
|
||||
// ? "Download complete!"
|
||||
// : status === "failed"
|
||||
// ? "Download failed"
|
||||
// : ""}
|
||||
// </p>
|
||||
// )}
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
import { useState } from "react";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
export default function DocumentLink({
|
||||
id,
|
||||
detailsObj,
|
||||
caseReference,
|
||||
startDownload,
|
||||
getStatus,
|
||||
}) {
|
||||
const [progress, setProgress] = useState(null);
|
||||
let { t } = useTranslation();
|
||||
const downloadFile = async () => {
|
||||
setProgress(0);
|
||||
|
||||
const res = await fetch(detailsObj.pinswg_hashlink);
|
||||
if (!res.ok) throw new Error("Download failed");
|
||||
|
||||
const contentDisposition = res.headers.get("content-disposition");
|
||||
const filename = contentDisposition
|
||||
? contentDisposition.split("filename=")[1]
|
||||
: detailsObj.pinswg_name || "document";
|
||||
|
||||
const contentLength = res.headers.get("content-length");
|
||||
const totalBytes = contentLength ? parseInt(contentLength, 10) : null;
|
||||
|
||||
const reader = res.body.getReader();
|
||||
let receivedBytes = 0;
|
||||
const chunks = [];
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
chunks.push(value);
|
||||
receivedBytes += value.length;
|
||||
|
||||
if (totalBytes) {
|
||||
const percent = Math.round((receivedBytes / totalBytes) * 100);
|
||||
setProgress(percent);
|
||||
}
|
||||
}
|
||||
|
||||
const blob = new Blob(chunks);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
setProgress(100);
|
||||
window.gtag?.("event", "DownloadedFile", { caseReference, filename });
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (getStatus(id) !== "idle") return; // avoid double enqueue
|
||||
startDownload(id, downloadFile);
|
||||
};
|
||||
|
||||
const status = getStatus(id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{detailsObj.pinswg_publishtoweb ? (
|
||||
<button className="documentLink" onClick={handleClick}>
|
||||
<span className="results-visually-hidden">
|
||||
Document name:
|
||||
</span>
|
||||
{detailsObj.pinswg_name || ""}
|
||||
</button>
|
||||
) : (
|
||||
<span className="results-visually-hidden">
|
||||
{detailsObj.pinswg_name || ""}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{status !== "idle" && (
|
||||
<p
|
||||
className={
|
||||
status === "downloading"
|
||||
? "govuk-!-font-size-14 govuk-!-margin-left-0 textloading"
|
||||
: "govuk-!-font-size-14 govuk-!-margin-left-0"
|
||||
}
|
||||
>
|
||||
{status === "downloading" && progress !== null
|
||||
? t("case:downloading-label")
|
||||
: status === "queued"
|
||||
? t("case:download-queued-label")
|
||||
: status === "done"
|
||||
? t("case:download-complete-label")
|
||||
: status === "failed"
|
||||
? t("case:download-failed-label")
|
||||
: ""}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user