refactor: block creation in libraries v2

src/editors/containers/EditorContainer/hooks.test.jsx

@@ -16,6 +16,7 @@ jest.mock('../../data/redux', () => ({
     app: {
       isInitialized: (state) => ({ isInitialized: state }),
       images: (state) => ({ images: state }),
+      isCreateBlock: (state) => ({ isCreateBlock: state }),
     },
     requests: {
       isFailed: (...args) => ({ requestFailed: args }),
@@ -26,6 +27,7 @@ jest.mock('../../hooks', () => ({
   ...jest.requireActual('../../hooks'),
   navigateCallback: jest.fn((args) => ({ navigateCallback: args })),
   saveBlock: jest.fn((args) => ({ saveBlock: args })),
+  createBlock: jest.fn((args) => ({ createBlock: args })),
 }));
 
 const dispatch = jest.fn();
@@ -53,6 +55,8 @@ describe('EditorContainer hooks', () => {
         const getContent = () => 'myTestContentValue';
         const setAssetToStaticUrl = () => 'myTestContentValue';
         const validateEntry = () => 'vaLIdAteENTry';
+        reactRedux.useSelector.mockReturnValue(false);
+
         const output = hooks.handleSaveClicked({
           getContent,
           images: {
@@ -73,6 +77,31 @@ describe('EditorContainer hooks', () => {
           validateEntry,
         });
       });
+      it('returns callback to createBlock with dispatch and content if isCreateBlock is true', () => {
+        const getContent = () => 'myTestContentValue';
+        const setAssetToStaticUrl = () => 'myTestContentValue';
+        const validateEntry = () => 'vaLIdAteENTry';
+        reactRedux.useSelector.mockReturnValue(true);
+
+        const output = hooks.handleSaveClicked({
+          getContent,
+          images: {
+            portableUrl: '/static/sOmEuiMAge.jpeg',
+            displayName: 'sOmEuiMAge',
+          },
+          destination: 'testDEsTURL',
+          analytics: 'soMEanALytics',
+          dispatch,
+          validateEntry,
+        });
+        output();
+        expect(appHooks.createBlock).toHaveBeenCalledWith({
+          content: setAssetToStaticUrl(reactRedux.useSelector(selectors.app.images), getContent),
+          destination: reactRedux.useSelector(selectors.app.returnUrl),
+          analytics: reactRedux.useSelector(selectors.app.analytics),
+          dispatch,
+        });
+      });
     });
 
     describe('cancelConfirmModalToggle', () => {

src/editors/containers/EditorContainer/hooks.ts

@@ -12,6 +12,7 @@ export const {
   navigateCallback,
   nullMethod,
   saveBlock,
+  createBlock,
 } = appHooks;
 
 export const state = StrictDict({
@@ -27,10 +28,20 @@ export const handleSaveClicked = ({
 }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const returnUrl = useSelector(selectors.app.returnUrl);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isCreateBlock = useSelector(selectors.app.isCreateBlock);
   const destination = returnFunction ? '' : returnUrl;
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const analytics = useSelector(selectors.app.analytics);
-
+  if (isCreateBlock) {
+    return () => createBlock({
+      analytics,
+      content: getContent({ dispatch }),
+      destination,
+      dispatch,
+      returnFunction,
+    });
+  }
   return () => saveBlock({
     analytics,
     content: getContent({ dispatch }),

src/editors/containers/EditorContainer/index.test.tsx

@@ -17,17 +17,6 @@ jest.spyOn(editorCmsApi, 'fetchCourseImages').mockImplementation(async () => ( /
   { data: { assets: [], start: 0, end: 0, page: 0, pageSize: 50, totalCount: 0 } }
 ));
 // Mock out the 'get ancestors' API:
-jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
-  status: 200,
-  data: {
-    ancestors: [{
-      id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
-      display_name: 'You-Knit? The Test Unit',
-      category: 'vertical',
-      has_children: true,
-    }],
-  },
-}));
 
 const isDirtyMock = jest.fn();
 jest.mock('../TextEditor/hooks', () => ({
@@ -60,6 +49,17 @@ describe('EditorContainer', () => {
     jest.spyOn(window, 'removeEventListener');
     jest.spyOn(mockEvent, 'preventDefault');
     Object.defineProperty(mockEvent, 'returnValue', { writable: true });
+    jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
+      status: 200,
+      data: {
+        ancestors: [{
+          id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
+          display_name: 'You-Knit? The Test Unit',
+          category: 'vertical',
+          has_children: true,
+        }],
+      },
+    }));
   });
 
   afterEach(() => {

src/editors/containers/ProblemEditor/index.test.tsx

@@ -27,6 +27,7 @@ jest.mock('../../data/redux', () => ({
   selectors: {
     app: {
       blockValue: jest.fn(state => ({ blockValue: state })),
+      isCreateBlock: jest.fn(state => ({ isCreateBlock: state })),
     },
     problem: {
       problemType: jest.fn(state => ({ problemType: state })),
@@ -104,12 +105,18 @@ describe('ProblemEditor', () => {
     test('blockFinished from requests.isFinished', () => {
       expect(
         mapStateToProps(testState).blockFinished,
-      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
+      ).toEqual(
+        selectors.app.isCreateBlock(testState)
+        || selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }),
+      );
     });
     test('advancedSettingsFinished from requests.isFinished', () => {
       expect(
         mapStateToProps(testState).advancedSettingsFinished,
-      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchAdvancedSettings }));
+      ).toEqual(
+        selectors.app.isCreateBlock(testState)
+        || selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchAdvancedSettings }),
+      );
     });
   });
   describe('mapDispatchToProps', () => {

src/editors/containers/ProblemEditor/index.tsx

@@ -65,11 +65,13 @@ const ProblemEditor: React.FC<Props> = ({
 };
 
 export const mapStateToProps = (state) => ({
-  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+  blockFinished: selectors.app.isCreateBlock(state)
+  || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
   blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
   problemType: selectors.problem.problemType(state),
   blockValue: selectors.app.blockValue(state),
-  advancedSettingsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAdvancedSettings }),
+  advancedSettingsFinished: selectors.app.isCreateBlock(state)
+  || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAdvancedSettings }),
 });
 
 export const mapDispatchToProps = {

src/editors/containers/TextEditor/index.jsx

@@ -132,7 +132,8 @@ export const mapStateToProps = (state) => ({
   blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
   blockId: selectors.app.blockId(state),
   showRawEditor: selectors.app.showRawEditor(state),
-  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+  blockFinished: selectors.app.isCreateBlock(state)
+  || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
   learningContextId: selectors.app.learningContextId(state),
   images: selectors.app.images(state),
   isLibrary: selectors.app.isLibrary(state),

src/editors/containers/TextEditor/index.test.jsx

@@ -55,6 +55,7 @@ jest.mock('../../data/redux', () => ({
   selectors: {
     app: {
       blockValue: jest.fn(state => ({ blockValue: state })),
+      isCreateBlock: jest.fn(state => ({ isCreateBlock: state })),
       lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
       studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
       showRawEditor: jest.fn(state => ({ showRawEditor: state })),
@@ -126,7 +127,8 @@ describe('TextEditor', () => {
     test('blockFinished from requests.isFinished', () => {
       expect(
         mapStateToProps(testState).blockFinished,
-      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
+      ).toEqual(selectors.app.isCreateBlock(testState)
+      || selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
     });
     test('learningContextId from app.learningContextId', () => {
       expect(

src/editors/containers/VideoEditor/index.tsx

@@ -23,6 +23,7 @@ const VideoEditor: React.FC<EditorComponent> = ({
     (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,
@@ -36,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/constants/requests.ts

@@ -13,6 +13,7 @@ export const RequestKeys = StrictDict({
   fetchImages: 'fetchImages',
   fetchUnit: 'fetchUnit',
   fetchStudioView: 'fetchStudioView',
+  createBlock: 'createBlock',
   saveBlock: 'saveBlock',
   uploadVideo: 'uploadVideo',
   allowThumbnailUpload: 'allowThumbnailUpload',

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

@@ -88,6 +88,7 @@ describe('app selectors unit tests', () => {
         simpleSelectors.unitUrl,
         simpleSelectors.blockValue,
         selectors.isLibrary,
+        selectors.isCreateBlock,
       ]);
     });
     describe('for library blocks', () => {
@@ -98,8 +99,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 +113,19 @@ 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));
+      });
+    });
+    describe('component creation workflow', () => {
+      it('returns true if is isCreateBlock is truthy', () => {
+        const { resultFunc: cb } = selectors.isInitialized;
+
+        [
+          [[null, null, true, true] as [any, any, any, any], true] as const,
+          [[null, null, true, true] as [any, any, any, any], true] as const,
         ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
       });
     });
@@ -184,4 +195,9 @@ describe('app selectors unit tests', () => {
       });
     });
   });
+  describe('isCreateBlock', () => {
+    it('should return false if the editor is initialized with a blockId', () => {
+      expect(selectors.isCreateBlock.resultFunc('block-v1:', 'text')).toEqual(false);
+    });
+  });
 });

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

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
 import type { EditorState } from '..';
 import { blockTypes } from '../../constants/app';
-import { isLibraryV1Key } from '../../../../generic/key-utils';
+import { isLibraryKey, isLibraryV1Key } from '../../../../generic/key-utils';
 import * as urls from '../../services/cms/urls';
 
 export const appSelector = (state: EditorState) => state.app;
@@ -47,7 +47,19 @@ export const isLibrary = createSelector(
     if (isLibraryV1Key(learningContextId)) {
       return true;
     }
-    if (blockId && blockId.startsWith('lb:')) {
+    if ((blockId && blockId.startsWith('lb:')) || isLibraryKey(learningContextId)) {
+      return true;
+    }
+    return false;
+  },
+);
+
+export const isCreateBlock = createSelector(
+  [simpleSelectors.blockId,
+    simpleSelectors.blockType,
+  ],
+  (blockId, blockType) => {
+    if (blockId === '' && blockType) {
       return true;
     }
     return false;
@@ -59,8 +71,13 @@ export const isInitialized = createSelector(
     simpleSelectors.unitUrl,
     simpleSelectors.blockValue,
     isLibrary,
+    isCreateBlock,
   ],
-  (unitUrl, blockValue, isLibraryBlock) => {
+  (unitUrl, blockValue, isLibraryBlock, isCreateEditor) => {
+    if (isCreateEditor) {
+      return true;
+    }
+
     if (isLibraryBlock) {
       return !!blockValue;
     }
@@ -105,4 +122,5 @@ export default {
   displayTitle,
   analytics,
   isLibrary,
+  isCreateBlock,
 };

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/app.js

@@ -88,7 +88,13 @@ export const fetchCourseDetails = () => (dispatch) => {
  */
 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;
+  }
+
   dispatch(module.fetchBlock());
   if (data.blockId?.startsWith('block-v1:')) {
     dispatch(module.fetchUnit());
@@ -125,6 +131,22 @@ export const saveBlock = (content, returnToUnit) => (dispatch) => {
   }));
 };
 
+/**
+ * @param {func} onSuccess
+ */
+export const createBlock = (content, returnToUnit) => (dispatch) => {
+  dispatch(requests.createBlock({
+    onSuccess: (response) => {
+      dispatch(actions.app.setBlockId(response.id));
+      dispatch(saveBlock(content, returnToUnit));
+    },
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.createBlock,
+      error,
+    })),
+  }));
+};
+
 export const uploadAsset = ({ file, setSelection }) => (dispatch) => {
   dispatch(requests.uploadAsset({
     asset: file,
@@ -142,4 +164,5 @@ export default StrictDict({
   saveBlock,
   fetchImages,
   uploadAsset,
+  createBlock,
 });