Merge pull request #2267 from automatisch/export-flow

feat: Implement initial logic of exporting flow

packages/web/src/hooks/useDeleteFlow.js

@@ -2,11 +2,11 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useDeleteFlow() {
+export default function useDeleteFlow(flowId) {
   const queryClient = useQueryClient();
 
   const query = useMutation({
-    mutationFn: async (flowId) => {
+    mutationFn: async () => {
       const { data } = await api.delete(`/v1/flows/${flowId}`);
 
       return data;

packages/web/src/hooks/useDownloadJsonAsFile.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import slugify from 'slugify';
+
+export default function useDownloadJsonAsFile() {
+  const handleDownloadJsonAsFile = React.useCallback(
+    function handleDownloadJsonAsFile({ contents, name }) {
+      const stringifiedContents = JSON.stringify(contents, null, 2);
+
+      const slugifiedName = slugify(name, {
+        lower: true,
+        strict: true,
+        replacement: '-',
+      });
+
+      const fileBlob = new Blob([stringifiedContents], {
+        type: 'application/json',
+      });
+
+      const fileObjectUrl = URL.createObjectURL(fileBlob);
+
+      const temporaryDownloadLink = document.createElement('a');
+      temporaryDownloadLink.href = fileObjectUrl;
+      temporaryDownloadLink.download = slugifiedName;
+
+      temporaryDownloadLink.click();
+    },
+    [],
+  );
+
+  return handleDownloadJsonAsFile;
+}

packages/web/src/hooks/useExportFlow.js

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useExportFlow(flowId) {
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post(`/v1/flows/${flowId}/export`);
+
+      return data;
+    },
+  });
+
+  return mutation;
+}