feat: use filer saver package instead

github-community-projects · Jan 24, 2024 · a315081 · a315081
1 parent 93497f4
commit a315081
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/who-metrics-ui/package-lock.json b/who-metrics-ui/package-lock.json
diff --git a/who-metrics-ui/package.json b/who-metrics-ui/package.json
@@ -22,6 +22,7 @@
     "@vercel/analytics": "^0.1.10",
     "autoprefixer": "^10.4.13",
     "eslint-config-next": "^13.2.0",
+    "file-saver": "^2.0.5",
     "js-cookie": "^3.0.1",
     "json-2-csv": "^5.0.1",
     "kysely": "^0.23.4",
@@ -42,6 +43,7 @@
   },
   "homepage": "https://sbv-world-health-org-metrics.github.io/sbv-world-health-org-metrics/",
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/glob": "^8.1.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",

diff --git a/who-metrics-ui/src/components/RepositoriesTable.tsx b/who-metrics-ui/src/components/RepositoriesTable.tsx
@@ -22,6 +22,7 @@ import DataGrid, {
 } from 'react-data-grid';
 import { Popover } from 'react-tiny-popover';
 
+import { saveAs } from 'file-saver';
 import {
   createContext,
   FC,
@@ -31,6 +32,7 @@ import {
   useState
 } from 'react';
 import Data from '../data/data.json';
+
 const repos = Object.values(Data['repositories']);
 type Repo = (typeof repos)[0];
 
@@ -231,24 +233,6 @@ const generateCSV = (data: Repo[]): Blob => {
   return new Blob([output], { type: 'text/csv' });
 };
 
-// Helper for downloading the csv
-// There are warnings for Opera Mini incompatibility, but only 0.07% of users use that browser
-const saveFile = async (contents: Blob) => {
-  const a = document.createElement('a');
-  a.id = 'downloadCVSAnchor';
-  a.download = 'output.csv';
-  // eslint-disable-next-line compat/compat
-  a.href = URL.createObjectURL(contents);
-  a.addEventListener('click', () => {
-    setTimeout(() => {
-      // eslint-disable-next-line compat/compat
-      URL.revokeObjectURL(a.href);
-      document.getElementById('downloadCVSAnchor')?.remove();
-    }, 30 * 1000);
-  });
-  a.click();
-};
-
 const RepositoriesTable = () => {
   const [globalFilters, setGlobalFilters] = useState<Filter>(defaultFilters);
 
@@ -626,7 +610,7 @@ const RepositoriesTable = () => {
             <Button
               variant="invisible"
               onClick={() => {
-                saveFile(generateCSV(displayRows));
+                saveAs(generateCSV(displayRows), "output.csv");
               }}
             >
               Download CSV