middleware to save preview image

package.json

@@ -24,7 +24,8 @@
   "dependencies": {
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-object-widget": "*",
-    "@eeacms/volto-resize-helper": "*"
+    "@eeacms/volto-resize-helper": "*",
+    "@stoddabr/react-tableau-embed-live": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

src/Tableau/Tableau.jsx

@@ -38,7 +38,12 @@ import {
 import { useTableau } from '@eeacms/volto-tableau/hooks';
 import { JsonCodeSnippet, Download } from '@eeacms/volto-tableau/Utils';
 
-import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
+import {
+  getSheetnames,
+  getActiveSheetname,
+  getDevice,
+  blobToBase64,
+} from './helpers';
 
 import resetSVG from '@plone/volto/icons/reset.svg';
 

src/Widgets/VisualizationWidget.jsx

@@ -16,6 +16,18 @@ import {
 } from '@eeacms/volto-tableau/Tableau/helpers';
 
 import '@eeacms/volto-tableau/less/tableau.less';
+import { getBaseUrl } from '@plone/volto/helpers';
+
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
 
 const VisualizationWidget = (props) => {
   const { location, content } = props;
@@ -120,6 +132,30 @@ const VisualizationWidget = (props) => {
     );
   }, [vizState, value]);
 
+  React.useEffect(() => {
+    console.log(value);
+    if (value.url) {
+      fetch(
+        `${getBaseUrl(
+          '',
+        )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
+          value.url,
+        )}&w=1920&h=1000&waitfor=4000`,
+      )
+        .then((e) => e.blob())
+        .then((myBlob) => {
+          console.log(myBlob);
+          blobToBase64(myBlob).then((base64String) => {
+            props.onChange(props.id, {
+              ...value,
+              preview: base64String,
+            });
+          });
+        })
+        .catch(() => {});
+    }
+  }, [value]);
+
   return (
     <FormFieldWrapper {...props}>
       <Modal id="tableau-editor-modal" open={open}>

src/index.js

@@ -5,14 +5,18 @@ import {
   VisualizationViewWidget,
   CreatableSelectWidget,
 } from './Widgets';
+import { preview_image } from './middlewares/preview_image';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),
     'public.tableau.com',
   ];
 
-  config.settings.storeExtenders = [...(config.settings.storeExtenders || [])];
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    preview_image,
+  ];
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
   config.widgets.id.tableau_visualization = VisualizationWidget;

src/middlewares/preview_image.js

@@ -0,0 +1,63 @@
+import {
+  CREATE_CONTENT,
+  UPDATE_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+export const preview_image = (middlewares) => [
+  (store) => (next) => async (action) => {
+    if (![CREATE_CONTENT, UPDATE_CONTENT].includes(action.type)) {
+      return next(action);
+    }
+    const state = store.getState();
+    const contentData = state.content.data;
+    console.log(action?.request?.data);
+    if (
+      !contentData ||
+      contentData['@type'] !== 'tableau_visualization' ||
+      contentData.preview_image_saved ||
+      !action?.request?.data?.tableau_visualization?.preview
+    ) {
+      return next(action);
+    }
+
+    if (
+      contentData?.preview_image &&
+      contentData?.preview_image?.filename !==
+        'preview_image_generated_map_simple.png'
+    ) {
+      return next(action);
+    }
+
+    try {
+      const previewImage = {
+        preview_image: {
+          data: action.request.data.tableau_visualization.preview.split(',')[1],
+          encoding: 'base64',
+          'content-type': 'image/png',
+          filename: 'preview_image_generated_map_simple.png',
+        },
+        preview_image_saved: true,
+      };
+
+      const tableauVisualizationData = {
+        ...action.request.data.tableau_visualization,
+      };
+      delete tableauVisualizationData.preview;
+
+      return next({
+        ...action,
+        request: {
+          ...action.request,
+          data: {
+            ...action.request.data,
+            ...previewImage,
+            tableau_visualization: tableauVisualizationData,
+          },
+        },
+      });
+    } catch (error) {
+      return next(action);
+    }
+  },
+  ...middlewares,
+];