refactor: block creation in libraries v2

src/editors/containers/EditorContainer/hooks.ts

@@ -12,6 +12,7 @@ export const {
   navigateCallback,
   nullMethod,
   saveBlock,
+  createBlock,
 } = appHooks;
 
 export const state = StrictDict({
@@ -27,9 +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,

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/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/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',
+  creaateBlock: 'createBlock',
   saveBlock: 'saveBlock',
   uploadVideo: 'uploadVideo',
   allowThumbnailUpload: 'allowThumbnailUpload',

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/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

@@ -89,6 +89,12 @@ export const fetchCourseDetails = () => (dispatch) => {
 export const initialize = (data) => (dispatch) => {
   const editorType = data.blockType;
   dispatch(actions.app.initialize(data));
+
+  if (data.blockId === '' && data.blockType) {
+    dispatch(actions.app.initializeEditor());
+    return;
+  }
+
   dispatch(module.fetchBlock());
   if (data.blockId?.startsWith('block-v1:')) {
     dispatch(module.fetchUnit());
@@ -125,6 +131,18 @@ 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));
+    },
+  }));
+};
+
 export const uploadAsset = ({ file, setSelection }) => (dispatch) => {
   dispatch(requests.uploadAsset({
     asset: file,
@@ -142,4 +160,5 @@ export default StrictDict({
   saveBlock,
   fetchImages,
   uploadAsset,
+  createBlock,
 });

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

@@ -84,7 +84,7 @@ export const fetchAdvancedSettings = ({ rawOLX, rawSettings }) => (dispatch) =>
 };
 
 export const initializeProblem = (blockValue) => (dispatch, getState) => {
-  const rawOLX = _.get(blockValue, 'data.data', {});
+  const rawOLX = _.get(blockValue, 'data.data', '');
   const rawSettings = _.get(blockValue, 'data.metadata', {});
   const learningContextId = selectors.app.learningContextId(getState());
   if (isLibraryKey(learningContextId)) {

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

@@ -1,3 +1,4 @@
+import { v4 as uuid4 } from 'uuid';
 import { StrictDict, parseLibraryImageData, getLibraryImageAssets } from '../../../utils';
 
 import { RequestKeys } from '../../constants/requests';
@@ -11,6 +12,7 @@ import { selectors as appSelectors } from '../app';
 // eslint-disable-next-line import/no-self-import
 import * as module from './requests';
 import { isLibraryKey } from '../../../../generic/key-utils';
+import { createLibraryBlock } from '../../../../library-authoring/data/api';
 import { acceptedImgKeys } from '../../../sharedComponents/ImageUploadModal/SelectImageModal/utils';
 
 // Similar to `import { actions, selectors } from '..';` but avoid circular imports:
@@ -122,6 +124,29 @@ export const saveBlock = ({ content, ...rest }) => (dispatch, getState) => {
     ...rest,
   }));
 };
+
+/**
+ * Tracked saveBlock api method.  Tracked to the `saveBlock` request key.
+ * @param {string} content
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const createBlock = ({ ...rest }) => (dispatch, getState) => {
+  const definitionId = selectors.app.blockTitle(getState())
+    ? selectors.app.blockTitle(getState()).toLowerCase().replaceAll(' ', '-')
+    : `${uuid4()}`;
+
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.creaateBlock,
+    promise: createLibraryBlock({
+      libraryId: selectors.app.learningContextId(getState()),
+      blockType: selectors.app.blockType(getState()),
+      definitionId,
+    }),
+    ...rest,
+  }));
+};
+
 export const uploadAsset = ({ asset, ...rest }) => (dispatch, getState) => {
   const learningContextId = selectors.app.learningContextId(getState());
   dispatch(module.networkRequest({

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

@@ -17,8 +17,8 @@ const selectors = { app: appSelectors, video: videoSelectors };
 
 export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, getState) => {
   const state = getState();
-  const blockValueData = state.app.blockValue.data;
-  let rawVideoData = blockValueData.metadata ? blockValueData.metadata : {};
+  const blockValueData = state.app?.blockValue?.data;
+  let rawVideoData = blockValueData?.metadata ? blockValueData.metadata : {};
   const rawVideos = Object.values(selectors.app.videos(state));
   if (selectedVideoId !== undefined && selectedVideoId !== null) {
     const selectedVideo = _.find(rawVideos, video => {

src/editors/hooks.ts

@@ -65,7 +65,26 @@ export const saveBlock = ({
     ));
   }
 };
-
+export const createBlock = ({
+  analytics,
+  content,
+  destination,
+  dispatch,
+  returnFunction,
+}) => {
+  if (!content) {
+    return;
+  }
+  dispatch(thunkActions.app.createBlock(
+    content,
+    navigateCallback({
+      destination,
+      analyticsEvent: analyticsEvt.editorSaveClick,
+      analytics,
+      returnFunction,
+    }),
+  ));
+};
 export const clearSaveError = ({
   dispatch,
 }) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.saveBlock }));