From b7df05d94bf5f331616092368bfeae0c2921465b Mon Sep 17 00:00:00 2001
From: Wadjih Bencheikh <jw_bencheikh@esi.dz>
Date: Tue, 18 Oct 2022 11:04:23 +0100
Subject: [PATCH] feat: save as ium (#238)

---
 src/app/App.tsx              | 20 ++++++++++++++++++++
 src/app/context/appState.tsx |  1 +
 src/app/utils.ts             | 13 +++++++++++++
 tests/app/toolbar.test.ts    |  2 +-
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/app/utils.ts

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 8010580d..8497af11 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -5,6 +5,7 @@ import {
   FaCogs,
   FaTabletAlt,
   FaGlasses,
+  FaSave,
 } from 'react-icons/fa';
 
 import { MeasurementExplorer, MeasurementsPanel } from './components';
@@ -15,6 +16,7 @@ import {
 } from './context/appState';
 import { getCurrentMeasurement } from './context/data.helpers';
 import { loadFiles } from './context/load';
+import { download } from './utils';
 
 import {
   Accordion,
@@ -69,6 +71,16 @@ function DropZoneArea() {
     { id: '1h,1h', title: '1H,1H', content: 'Hello, World! [c]' },
     { id: '1h,13c', title: '1H,13C', content: 'Hello, World! [d]' },
   ];
+  function saveHandler(filename = 'file', spaceIndent = 0) {
+    const data = JSON.stringify(
+      { data: appState.data, view: appState.view },
+      (_key, value) =>
+        ArrayBuffer.isView(value) ? Array.from(value as any) : value,
+      spaceIndent,
+    );
+    const blob = new Blob([data], { type: 'text/plain' });
+    download(blob, `${filename}.ium`);
+  }
 
   return (
     <RootLayout>
@@ -99,6 +111,14 @@ function DropZoneArea() {
                 >
                   <FaMeteor />
                 </Toolbar.Item>
+                <Toolbar.Item
+                  titleOrientation="horizontal"
+                  id="save"
+                  title="Save as ium"
+                  onClick={() => saveHandler()}
+                >
+                  <FaSave />
+                </Toolbar.Item>
               </Toolbar>
               <Toolbar orientation="horizontal">
                 <Toolbar.Item id="a" title="User manual">
diff --git a/src/app/context/appState.tsx b/src/app/context/appState.tsx
index c6af7743..8bbb2f95 100644
--- a/src/app/context/appState.tsx
+++ b/src/app/context/appState.tsx
@@ -157,6 +157,7 @@ function actionHandler(draft: Draft<AppState>, action: AppStateAction) {
       draft.isLoading = false;
       return;
     }
+
     default:
       assertUnreachable(type);
   }
diff --git a/src/app/utils.ts b/src/app/utils.ts
new file mode 100644
index 00000000..6f13dd12
--- /dev/null
+++ b/src/app/utils.ts
@@ -0,0 +1,13 @@
+export function download(blob: Blob, name: string) {
+  const link = document.createElement('a');
+
+  const url = URL.createObjectURL(blob);
+
+  link.setAttribute('href', url);
+  link.setAttribute('download', name);
+  link.style.visibility = 'hidden';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
diff --git a/tests/app/toolbar.test.ts b/tests/app/toolbar.test.ts
index a1e92d21..cef44be4 100644
--- a/tests/app/toolbar.test.ts
+++ b/tests/app/toolbar.test.ts
@@ -2,5 +2,5 @@ import { test, expect } from '@playwright/test';
 
 test('toolbar', async ({ page }) => {
   await page.goto('http://localhost:5173');
-  await expect(page.locator('_react=ToolbarItem')).toHaveCount(6);
+  await expect(page.locator('_react=ToolbarItem')).toHaveCount(7);
 });