fix: clean the editor store when the moda is close

Author: dcoa

src/editors/containers/EditorContainer/hooks.ts

@@ -40,7 +40,6 @@ export const handleSaveClicked = ({
       destination,
       dispatch,
       returnFunction,
-      validateEntry,
     });
   }
 

src/editors/containers/EditorContainer/index.tsx

@@ -94,6 +94,7 @@ const EditorContainer: React.FC<Props> = ({
   const onSave = () => {
     setSaved(true);
     handleSave();
+    dispatch({ type: 'resetEditor' });
   };
   // Stops user from navigating away if they have unsaved changes.
   usePromptIfDirty(() => {
@@ -109,6 +110,7 @@ const EditorContainer: React.FC<Props> = ({
       openCancelConfirmModal();
     } else {
       handleCancel();
+      dispatch({ type: 'resetEditor' });
     }
   };
   return (
@@ -128,6 +130,7 @@ const EditorContainer: React.FC<Props> = ({
               if (returnFunction) {
                 closeCancelConfirmModal();
               }
+              dispatch({ type: 'resetEditor' });
             }}
           >
             <FormattedMessage {...messages.okButtonLabel} />

src/editors/containers/VideoEditor/index.tsx

@@ -20,10 +20,10 @@ const VideoEditor: React.FC<EditorComponent> = ({
 }) => {
   const intl = useIntl();
   const studioViewFinished = useSelector(
-    (state) => selectors.app.isCreateBlock(state)
-    || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
+    (state) => selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
   );
   const isLibrary = useSelector(selectors.app.isLibrary) as boolean;
+  const isCreateBlock = useSelector(selectors.app.isCreateBlock) as boolean;
   const {
     error,
     validateEntry,
@@ -37,7 +37,7 @@ const VideoEditor: React.FC<EditorComponent> = ({
         returnFunction={returnFunction}
         validateEntry={validateEntry}
       >
-        {studioViewFinished ? (
+        {(isCreateBlock || studioViewFinished) ? (
           <div className="video-editor">
             <VideoEditorModal {...{ isLibrary }} />
           </div>

src/editors/data/redux/app/selectors.test.ts

@@ -98,8 +98,8 @@ describe('app selectors unit tests', () => {
         };
 
         [
-          [[null, truthy.blockValue, true] as [any, any, any], true] as const,
-          [[null, null, true] as [any, any, any], false] as const,
+          [[null, truthy.blockValue, true, false] as [any, any, any, any], true] as const,
+          [[null, null, true, false] as [any, any, any, any], false] as const,
         ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
       });
     });
@@ -112,9 +112,9 @@ describe('app selectors unit tests', () => {
         };
 
         [
-          [[null, truthy.blockValue, false] as [any, any, any], false] as const,
-          [[truthy.unitUrl, null, false] as [any, any, any], false] as const,
-          [[truthy.unitUrl, truthy.blockValue, false] as [any, any, any], true] as const,
+          [[null, truthy.blockValue, false, false] as [any, any, any, any], false] as const,
+          [[truthy.unitUrl, null, false, false] as [any, any, any, any], false] as const,
+          [[truthy.unitUrl, truthy.blockValue, false, false] as [any, any, any, any], true] as const,
         ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
       });
     });

src/editors/data/redux/index.ts

@@ -12,14 +12,22 @@ import { AdvancedProblemType, ProblemType } from '../constants/problem';
 
 export { default as thunkActions } from './thunkActions';
 
-const rootReducer = combineReducers({
+const editorReducer = combineReducers({
   app: app.reducer,
   requests: requests.reducer,
   video: video.reducer,
   problem: problem.reducer,
   game: game.reducer,
 });
 
+const rootReducer = (state: any, action: any) => {
+  if (action.type === 'resetEditor') {
+    return editorReducer(undefined, action);
+  }
+
+  return editorReducer(state, action);
+};
+
 const actions = StrictDict({
   app: app.actions,
   requests: requests.actions,

src/editors/data/redux/thunkActions/problem.ts

@@ -59,7 +59,6 @@ export const getDataFromOlx = ({ rawOLX, rawSettings, defaultSettings }) => {
 };
 
 export const loadProblem = ({ rawOLX, rawSettings, defaultSettings }) => (dispatch) => {
-  console.debug(rawOLX);
   if (isBlankProblem({ rawOLX })) {
     dispatch(actions.problem.setEnableTypeSelection(camelizeKeys(defaultSettings)));
   } else {

src/editors/data/redux/thunkActions/requests.js

@@ -1,11 +1,10 @@
+import { v4 as uuid4 } from 'uuid';
 import { StrictDict, parseLibraryImageData, getLibraryImageAssets } from '../../../utils';
 
 import { RequestKeys } from '../../constants/requests';
 import api, { loadImages } from '../../services/cms/api';
 import { actions as requestsActions } from '../requests';
 import { selectors as appSelectors } from '../app';
-import { v4 as uuid4 } from 'uuid';
-
 
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested

src/editors/hooks.ts

@@ -71,7 +71,6 @@ export const createBlock = ({
   destination,
   dispatch,
   returnFunction,
-  validateEntry,
 }) => {
   if (!content) {
     return;