From 61d884665af8a6ee2648846f7cb31126280f2fe7 Mon Sep 17 00:00:00 2001 From: Chris Laplante Date: Sat, 11 May 2024 18:56:18 -0400 Subject: [PATCH] try using axios for downloading zip --- package-lock.json | 56 +++++++++++++++++++++++-- package.json | 1 + src/components/FetchWithProgress.tsx | 61 ++++++---------------------- 3 files changed, 67 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 631b5b6..acb4e57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "@types/react": "^18.2.77", "@types/react-dom": "^18.2.25", "ace-builds": "^1.33.1", + "axios": "^1.6.8", "classnames": "^2.5.1", "immer": "^10.1.1", "pyodide": "^0.25.1", @@ -3355,6 +3356,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/autoprefixer": { "version": "10.4.19", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", @@ -3407,6 +3413,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-loader": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz", @@ -3822,6 +3838,17 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", @@ -4315,6 +4342,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -5472,7 +5507,6 @@ "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", - "dev": true, "funding": [ { "type": "individual", @@ -5497,6 +5531,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -7193,7 +7240,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -7202,7 +7248,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -8167,6 +8212,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 789e737..593ae2c 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@types/react": "^18.2.77", "@types/react-dom": "^18.2.25", "ace-builds": "^1.33.1", + "axios": "^1.6.8", "classnames": "^2.5.1", "immer": "^10.1.1", "pyodide": "^0.25.1", diff --git a/src/components/FetchWithProgress.tsx b/src/components/FetchWithProgress.tsx index 23cdc14..c15700e 100644 --- a/src/components/FetchWithProgress.tsx +++ b/src/components/FetchWithProgress.tsx @@ -1,4 +1,5 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; +import axios from "axios"; interface FetchProgressProps { @@ -13,55 +14,19 @@ const FetchWithProgress: React.FC = (props: FetchProgressPro const [error, setError] = useState(null); const fetchData = () => { - setLoading(true); - setError(null); - fetch(props.url) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const contentLength = response.headers.get('Content-Length'); - if (!contentLength) { - throw new Error("Missing Content-Length header."); - } - const total = parseInt(contentLength, 10); - let loaded = 0; + async function work() { + const ret = await axios.get(props.url, { + onDownloadProgress: progressEvent => { + const percentage = Math.round(progressEvent.loaded * 100) / progressEvent.total; + setProgress(percentage); + }, + responseType: "arraybuffer" + }); - const reader = response.body!.getReader(); - const stream = new ReadableStream({ - start(controller) { - function push() { - reader.read().then(({ done, value }) => { - if (done) { - controller.close(); - return; - } - loaded += value!.length; - setProgress(Math.round((loaded / total) * 100)); - controller.enqueue(value); - push(); - }).catch(err => { - setError(`Error reading data: ${err.message}`); - controller.error(err); - }); - } - push(); - } - }); + props.setData(ret.data); + } - return new Response(stream, { headers: { "Content-Type": "application/octet-stream" } }); - }) - .then(response => response.arrayBuffer()) - .then(async buffer => { - console.log("set buffer"); - props.setData(buffer); - setLoading(false); - }) - .catch(err => { - setError(err.message); - console.error(err); - setLoading(false); - }); + work(); }; return (