fix: load block title (#51)

src/editors/components/EditorHeader/HeaderTitle.jsx

@@ -16,7 +16,7 @@ export const HeaderTitle = ({
   intl,
   isInitialized,
   setBlockTitle,
-  typeHeader,
+  returnTitle,
 }) => {
   if (!isInitialized) { return intl.formatMessage(messages.loading); }
   const {
@@ -30,7 +30,7 @@ export const HeaderTitle = ({
   } = localTitleHooks({
     editorRef,
     setBlockTitle,
-    typeHeader,
+    returnTitle,
   });
 
   if (isEditing) {
@@ -75,11 +75,11 @@ HeaderTitle.propTypes = {
   // redux
   isInitialized: PropTypes.bool.isRequired,
   setBlockTitle: PropTypes.func.isRequired,
-  typeHeader: PropTypes.string.isRequired,
+  returnTitle: PropTypes.string.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
-  typeHeader: selectors.app.typeHeader(state),
+  returnTitle: selectors.app.returnTitle(state),
   isInitialized: selectors.app.isInitialized(state),
 });
 

src/editors/components/EditorHeader/HeaderTitle.test.jsx

@@ -14,7 +14,7 @@ jest.mock('../../data/redux', () => ({
   },
   selectors: {
     app: {
-      typeHeader: jest.fn(state => ({ typeHeader: state })),
+      returnTitle: jest.fn(state => ({ returnTitle: state })),
       isInitialized: jest.fn(state => ({ studioEndpointUrl: state })),
     },
   },
@@ -30,7 +30,7 @@ describe('HeaderTitle', () => {
     editorRef: jest.fn().mockName('args.editorRef'),
     isInitialized: false,
     setBlockTitle: jest.fn().mockName('args.setBlockTitle'),
-    typeHeader: 'html',
+    returnTitle: 'html',
   };
   const localTitleHooksProps = {
     inputRef: jest.fn().mockName('localTitleHooks.inputRef'),
@@ -49,7 +49,7 @@ describe('HeaderTitle', () => {
       expect(localTitleHooks).toHaveBeenCalledWith({
         editorRef: props.editorRef,
         setBlockTitle: props.setBlockTitle,
-        typeHeader: props.typeHeader,
+        returnTitle: props.returnTitle,
       });
     });
   });
@@ -70,9 +70,9 @@ describe('HeaderTitle', () => {
 
   describe('mapStateToProps', () => {
     const testState = { T: 'esting', S: 'tate' };
-    test('typeHeader from app.typeHeader', () => {
-      expect(module.mapStateToProps(testState).typeHeader)
-        .toEqual(selectors.app.typeHeader(testState));
+    test('returnTitle from app.returnTitle', () => {
+      expect(module.mapStateToProps(testState).returnTitle)
+        .toEqual(selectors.app.returnTitle(testState));
     });
     test('isInitialized from app.isInitialized', () => {
       expect(module.mapStateToProps(testState).isInitialized)

src/editors/components/EditorHeader/hooks.js

@@ -13,9 +13,9 @@ export const hooks = {
   localTitle: ({
     setBlockTitle,
     stopEditing,
-    typeHeader,
+    returnTitle,
   }) => {
-    const [localTitle, setLocalTitle] = React.useState(typeHeader);
+    const [localTitle, setLocalTitle] = React.useState(returnTitle);
     return {
       updateTitle: () => {
         setBlockTitle(localTitle);
@@ -40,13 +40,13 @@ export const hooks = {
 export const localTitleHooks = ({
   editorRef,
   setBlockTitle,
-  typeHeader,
+  returnTitle,
 }) => {
   const { isEditing, startEditing, stopEditing } = module.hooks.isEditing();
   const { localTitle, handleChange, updateTitle } = module.hooks.localTitle({
     setBlockTitle,
     stopEditing,
-    typeHeader,
+    returnTitle,
   });
   return {
     isEditing,

src/editors/components/EditorHeader/hooks.test.js

@@ -12,7 +12,7 @@ jest.mock('react', () => {
 
 describe('EditorHeader hooks', () => {
   const editorRef = { current: {} };
-  const typeHeader = 'Type Header';
+  const returnTitle = 'Type Header';
   let setBlockTitle;
   let output;
   beforeEach(() => {
@@ -42,11 +42,11 @@ describe('EditorHeader hooks', () => {
         output = module.hooks.localTitle({
           setBlockTitle,
           stopEditing,
-          typeHeader,
+          returnTitle,
         });
       });
-      test('returns the state value for localTitle, defaulted to typeHeader', () => {
-        expect(output.localTitle).toEqual({ state: typeHeader });
+      test('returns the state value for localTitle, defaulted to returnTitle', () => {
+        expect(output.localTitle).toEqual({ state: returnTitle });
       });
       describe('updateTitle hook', () => {
         it('calls setBlockTitle with localTitle, and stopEditing', () => {
@@ -60,7 +60,7 @@ describe('EditorHeader hooks', () => {
           const value = 'SOME VALUe';
           output.handleChange({ target: { value } });
           expect(React.updateState).toHaveBeenCalledWith({
-            val: typeHeader,
+            val: returnTitle,
             newVal: value,
           });
         });
@@ -122,7 +122,7 @@ describe('EditorHeader hooks', () => {
       module.hooks.isEditing = newHooks.isEditing;
       module.hooks.localTitle = newHooks.localTitle;
       module.hooks.handleKeyDown = newHooks.handleKeyDown;
-      output = module.localTitleHooks({ editorRef, setBlockTitle, typeHeader });
+      output = module.localTitleHooks({ editorRef, setBlockTitle, returnTitle });
     });
     afterEach(() => {
       module.hooks = oldHooks;
@@ -136,7 +136,7 @@ describe('EditorHeader hooks', () => {
       expect(output.updateTitle).toEqual({
         setBlockTitle,
         stopEditing: values.stopEditing,
-        typeHeader,
+        returnTitle,
       });
       expect(output.handleChange).toEqual(values.handleChange);
       expect(output.localTitle).toEqual(values.localTitle);

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

@@ -36,12 +36,18 @@ export const isInitialized = createSelector(
   (unitUrl, editorInitialized, blockValue) => !!(unitUrl && blockValue && editorInitialized),
 );
 
-export const typeHeader = createSelector(
-  [module.simpleSelectors.blockType],
-  (blockType) => {
+export const returnTitle = createSelector(
+  [
+    module.simpleSelectors.blockType,
+    module.simpleSelectors.blockTitle,
+  ],
+  (blockType, blockTitle) => {
     if (blockType === null) {
       return null;
     }
+    if (blockTitle !== null) {
+      return blockTitle;
+    }
     return (blockType === blockTypes.html)
       ? 'Text'
       : blockType[0].toUpperCase() + blockType.substring(1);
@@ -52,5 +58,5 @@ export default {
   ...simpleSelectors,
   isInitialized,
   returnUrl,
-  typeHeader,
+  returnTitle,
 };

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

@@ -44,6 +44,7 @@ describe('app selectors unit tests', () => {
         simpleKeys.saveResponse,
         simpleKeys.studioEndpointUrl,
         simpleKeys.unitUrl,
+        simpleKeys.blockTitle,
       ].map(testSimpleSelector);
     });
   });
@@ -86,19 +87,26 @@ describe('app selectors unit tests', () => {
       ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
     });
   });
-  describe('typeHeader', () => {
-    it('is memoized based on blockType', () => {
-      expect(selectors.typeHeader.preSelectors).toEqual([simpleSelectors.blockType]);
+  describe('returnTitle', () => {
+    const title = 'tItLe';
+    it('is memoized based on blockType and blockTitle', () => {
+      expect(selectors.returnTitle.preSelectors).toEqual([
+        simpleSelectors.blockType,
+        simpleSelectors.blockTitle,
+      ]);
     });
     it('returns null if blockType is null', () => {
-      expect(selectors.typeHeader.cb(null)).toEqual(null);
+      expect(selectors.returnTitle.cb(null, title)).toEqual(null);
+    });
+    it('returns blockTitle if blockTitle is not null', () => {
+      expect(selectors.returnTitle.cb('html', title)).toEqual(title);
     });
     it('returns Text if the blockType is html', () => {
-      expect(selectors.typeHeader.cb('html')).toEqual('Text');
+      expect(selectors.returnTitle.cb('html', null)).toEqual('Text');
     });
     it('returns the blockType capitalized if not html', () => {
-      expect(selectors.typeHeader.cb('video')).toEqual('Video');
-      expect(selectors.typeHeader.cb('random')).toEqual('Random');
+      expect(selectors.returnTitle.cb('video', null)).toEqual('Video');
+      expect(selectors.returnTitle.cb('random', null)).toEqual('Random');
     });
   });
 });