feat: save as ium (#238)

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">

src/app/context/appState.tsx

@@ -157,6 +157,7 @@ function actionHandler(draft: Draft<AppState>, action: AppStateAction) {
       draft.isLoading = false;
       return;
     }
+
     default:
       assertUnreachable(type);
   }

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);
+}

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);
 });