Downloadable GeoJSON Files with Edits + Improved GeoJSON Editor

package.json

@@ -15,6 +15,8 @@
     "file-saver": "^2.0.5",
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
+    "json-edit-react": "^1.15.4",
+    "jszip": "^3.10.1",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
     "react-azure-maps": "^1.0.0",

src/pages/conversion/download-imdf.js

@@ -1,11 +1,44 @@
-import { cx } from '@emotion/css';
-import { PrimaryButton } from '@fluentui/react';
-import { failedLogsButton, logsButton } from './style';
+import { cx } from '@emotion/css'; 
+import { PrimaryButton } from '@fluentui/react'; 
+import { logsButton } from './style'; 
+import React, { useState } from 'react';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+
+// This component downloads the updated IMDF zip file and is triggered by users clicking "Download IMDF" button
+export const DownloadIMDF = ({ imdfPackageLocation, units, levels, footprint, building }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Fetches current zip file, updates the geojson files and downloads the updated zip
+  const handleUpdateZip = () => {
+    setIsLoading(true);
+    fetch(imdfPackageLocation)
+      .then(response => response.arrayBuffer())
+      .then(data => {
+        const zip = new JSZip();
+        return zip.loadAsync(data);
+      })
+      .then(zip => {
+        zip.file('unit.geojson', JSON.stringify(units, null, 2));
+        zip.file('level.geojson', JSON.stringify(levels, null, 2));
+        zip.file('footprint.geojson', JSON.stringify(footprint, null, 2));
+        zip.file('building.geojson', JSON.stringify(building, null, 2));
+        return zip.generateAsync({ type: 'blob' });
+      })
+      .then(updatedZip => {
+        saveAs(updatedZip, 'updated_imdf_package.zip');
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setIsLoading(false);
+      });
+  };
 
-export const DownloadIMDF = ({ isFailed, link }) => {
   return (
-    <a href={link} download target="_blank" rel="noreferrer">
-      <PrimaryButton className={cx(logsButton, { [failedLogsButton]: isFailed })}>Download IMDF</PrimaryButton>
-    </a>
+    <div style={{ cursor: isLoading ? 'wait' : 'default' }}>
+      <PrimaryButton onClick={handleUpdateZip} disabled={isLoading} className={cx(logsButton)}>
+        {isLoading ? 'Downloading..' : 'Download IMDF'}
+      </PrimaryButton>
+    </div>
   );
 };