quick export with snackbar info, allows canceling process

packages/web/src/utility/exportElectronFile.ts

@@ -1,6 +1,8 @@
 import ScriptWriter from '../impexp/ScriptWriter';
 import getElectron from './getElectron';
 import axiosInstance from '../utility/axiosInstance';
+import socket from '../utility/socket';
+import { showSnackbar, showSnackbarInfo, showSnackbarError, closeSnackbar } from '../utility/snackbar';
 
 export async function exportElectronFile(dataName, reader, format) {
   const electron = getElectron();
@@ -18,8 +20,6 @@ export async function exportElectronFile(dataName, reader, format) {
   const sourceVar = script.allocVariable();
   script.assign(sourceVar, reader.functionName, reader.props);
 
-  console.log('format.createWriter(filePath, dataName)', format.createWriter(filePath, dataName));
-
   const targetVar = script.allocVariable();
   const writer = format.createWriter(filePath, dataName);
   script.assign(targetVar, writer.functionName, writer.props);
@@ -27,8 +27,30 @@ export async function exportElectronFile(dataName, reader, format) {
   script.copyStream(sourceVar, targetVar);
   script.put();
 
-  console.log('script.getScript()', script.getScript());
-
   const resp = await axiosInstance.post('runners/start', { script: script.getScript() });
   const runid = resp.data.runid;
+  let isCanceled = false;
+
+  const snackId = showSnackbar({
+    message: `Exporting ${dataName}`,
+    icon: 'icon loading',
+    buttons: [
+      {
+        label: 'Cancel',
+        onClick: () => {
+          isCanceled = true;
+          axiosInstance.post('runners/cancel', { runid });
+        },
+      },
+    ],
+  });
+
+  function handleRunnerDone() {
+    closeSnackbar(snackId);
+    socket.off(`runner-done-${runid}`, handleRunnerDone);
+    if (isCanceled) showSnackbarError(`Export ${dataName} canceled`);
+    else showSnackbarInfo(`Export ${dataName} finished`);
+  }
+
+  socket.on(`runner-done-${runid}`, handleRunnerDone);
 }

packages/web/src/utility/snackbar.ts

@@ -0,0 +1,75 @@
+import { openedSnackbars } from '../stores';
+
+export interface SnackbarButton {
+  label: string;
+  onClick: Function;
+}
+
+export interface SnackbarInfo {
+  message: string;
+  icon?: string;
+  autoClose?: boolean;
+  allowClose?: boolean;
+  buttons?: SnackbarButton[];
+}
+
+let lastSnackbarId = 0;
+
+export function showSnackbar(snackbar: SnackbarInfo): string {
+  lastSnackbarId += 1;
+  const id = lastSnackbarId.toString();
+  openedSnackbars.update(x => [
+    ...x,
+    {
+      ...snackbar,
+      id,
+    },
+  ]);
+  return id;
+}
+
+export function showSnackbarSuccess(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img ok',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function showSnackbarInfo(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img info',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function showSnackbarError(message: string) {
+  showSnackbar({
+    message,
+    icon: 'img error',
+    allowClose: true,
+    autoClose: true,
+  });
+}
+
+export function closeSnackbar(snackId: string) {
+  openedSnackbars.update(x => x.filter(x => x.id != snackId));
+}
+//   showSnackbar({
+//     icon: 'img ok',
+//     message: 'Test snackbar',
+//     allowClose: true,
+//   });
+showSnackbar({
+  icon: 'img ok',
+  message: 'Auto close',
+  autoClose: true,
+});
+//   showSnackbar({
+//     icon: 'img warn',
+//     message: 'Buttons',
+//     buttons: [{ label: 'OK', onClick: () => console.log('OK') }],
+//   });