From e677ed0f5452378e8d1d87e4a21e035af03c93ec Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Thu, 16 Jan 2025 14:41:15 +1100
Subject: [PATCH] feat: implement fist versioning of image upload for creation
 workflow

---
 src/editors/data/redux/requests/reducer.js    |  1 +
 src/editors/data/redux/thunkActions/app.js    | 42 +++++++++++++++++--
 .../ImageUploadModal/index.jsx                |  2 +-
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/editors/data/redux/requests/reducer.js b/src/editors/data/redux/requests/reducer.js
index 583c390648..4383be7a65 100644
--- a/src/editors/data/redux/requests/reducer.js
+++ b/src/editors/data/redux/requests/reducer.js
@@ -8,6 +8,7 @@ const initialState = {
   [RequestKeys.fetchUnit]: { status: RequestStates.inactive },
   [RequestKeys.fetchBlock]: { status: RequestStates.inactive },
   [RequestKeys.fetchStudioView]: { status: RequestStates.inactive },
+  [RequestKeys.createBlock]: { status: RequestStates.inactive },
   [RequestKeys.saveBlock]: { status: RequestStates.inactive },
   [RequestKeys.uploadAsset]: { status: RequestStates.inactive },
   [RequestKeys.allowThumbnailUpload]: { status: RequestStates.inactive },
diff --git a/src/editors/data/redux/thunkActions/app.js b/src/editors/data/redux/thunkActions/app.js
index f9e8b25610..e995b87069 100644
--- a/src/editors/data/redux/thunkActions/app.js
+++ b/src/editors/data/redux/thunkActions/app.js
@@ -6,7 +6,7 @@ import * as requests from './requests';
 // should be re-thought and cleaned up to avoid this pattern.
 // eslint-disable-next-line import/no-self-import
 import * as module from './app';
-import { actions as appActions } from '../app';
+import { actions as appActions, selectors } from '../app';
 import { actions as requestsActions } from '../requests';
 import { RequestKeys } from '../../constants/requests';
 
@@ -90,6 +90,7 @@ export const initialize = (data) => (dispatch) => {
   const editorType = data.blockType;
   dispatch({ type: 'resetEditor' });
   dispatch(actions.app.initialize(data));
+
   if (data.blockId === '' && editorType) {
     dispatch(actions.app.initializeEditor());
     return;
@@ -109,7 +110,6 @@ export const initialize = (data) => (dispatch) => {
       dispatch(module.fetchCourseDetails());
       break;
     case 'html':
-      if (isLibraryKey(data.learningContextId)) { dispatch(actions.app.resetImages()); }
       dispatch(module.fetchImages({ pageNumber: 0 }));
       break;
     default:
@@ -131,6 +131,8 @@ export const saveBlock = (content, returnToUnit) => (dispatch) => {
   }));
 };
 
+const imagesNewBlock = [];
+
 /**
  * @param {func} onSuccess
  */
@@ -138,7 +140,21 @@ export const createBlock = (content, returnToUnit) => (dispatch) => {
   dispatch(requests.createBlock({
     onSuccess: (response) => {
       dispatch(actions.app.setBlockId(response.id));
-      dispatch(saveBlock(content, returnToUnit));
+      imagesNewBlock.forEach(({ file, url }) => {
+        dispatch(requests.uploadAsset({
+          asset: file,
+          onSuccess: async (resp) => {
+            const imagePath = `/${resp.data.asset.portableUrl}`;
+            const reader = new FileReader();
+            reader.addEventListener('load', () => {
+              const imageBS64 = reader.result.toString();
+              content = content.replace(imageBS64, imagePath);
+              dispatch(saveBlock(content, returnToUnit));
+            });
+            reader.readAsDataURL(file);
+          },
+        }));
+      });
     },
     onFailure: (error) => dispatch(actions.requests.failRequest({
       requestKey: RequestKeys.createBlock,
@@ -147,7 +163,25 @@ export const createBlock = (content, returnToUnit) => (dispatch) => {
   }));
 };
 
-export const uploadAsset = ({ file, setSelection }) => (dispatch) => {
+export const uploadAsset = ({ file, setSelection }) => (dispatch, getState) => {
+  if (selectors.isCreateBlock(getState())) {
+    console.debug(file);
+    const tempFileURL = URL.createObjectURL(file);
+    const tempImage = {
+      displayName: file.name,
+      url: tempFileURL,
+      externalUrl: tempFileURL,
+      portableUrl: tempFileURL,
+      thumbnail: tempFileURL,
+      id: file.name,
+      locked: false,
+    };
+
+    imagesNewBlock.push({ url: tempFileURL, file });
+    setSelection(tempImage);
+    return;
+  }
+
   dispatch(requests.uploadAsset({
     asset: file,
     onSuccess: (response) => setSelection(camelizeKeys(response.data.asset)),
diff --git a/src/editors/sharedComponents/ImageUploadModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/index.jsx
index fea13225c8..e72f4a56d0 100644
--- a/src/editors/sharedComponents/ImageUploadModal/index.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/index.jsx
@@ -200,7 +200,7 @@ ImageUploadModal.propTypes = {
   images: PropTypes.shape({}).isRequired,
   lmsEndpointUrl: PropTypes.string.isRequired,
   editorType: PropTypes.string,
-  isLibrary: PropTypes.string,
+  isLibrary: PropTypes.bool,
 };
 
 export const ImageUploadModalInternal = ImageUploadModal; // For testing only