fix: update title on type select (#196)

* fix: update title on type select

* fix: lint fix

* fix: add test

src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx

@@ -18,6 +18,7 @@ export const SelectTypeFooter = ({
   selected,
   // redux
   updateField,
+  setBlockTitle,
   // injected,
   intl,
 }) => (
@@ -34,7 +35,7 @@ export const SelectTypeFooter = ({
         </Button>
         <Button
           aria-label={intl.formatMessage(messages.selectButtonAriaLabel)}
-          onClick={hooks.onSelect(selected, updateField)}
+          onClick={hooks.onSelect({ selected, updateField, setBlockTitle })}
           disabled={!selected}
         >
           <FormattedMessage {...messages.selectButtonLabel} />
@@ -52,6 +53,7 @@ SelectTypeFooter.propTypes = {
   onCancel: PropTypes.func.isRequired,
   selected: PropTypes.string,
   updateField: PropTypes.func.isRequired,
+  setBlockTitle: PropTypes.func.isRequired,
   // injected
   intl: intlShape.isRequired,
 };
@@ -61,6 +63,7 @@ export const mapStateToProps = () => ({
 
 export const mapDispatchToProps = {
   updateField: actions.problem.updateField,
+  setBlockTitle: actions.app.setBlockTitle,
 };
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SelectTypeFooter));

src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.js

@@ -18,13 +18,15 @@ export const selectHooks = () => {
   };
 };
 
-export const onSelect = (selected, updateField) => () => {
+export const onSelect = ({ selected, updateField, setBlockTitle }) => () => {
   if (Object.values(AdvanceProblemKeys).includes(selected)) {
     updateField({ problemType: ProblemTypeKeys.ADVANCED, rawOLX: AdvanceProblems[selected].template });
+    setBlockTitle(AdvanceProblems[selected].title);
   } else {
     const newOLX = ProblemTypes[selected].template;
     const { settings, ...newState } = getDataFromOlx({ rawOLX: newOLX, rawSettings: {} });
     updateField({ ...newState });
+    setBlockTitle(ProblemTypes[selected].title);
   }
 };
 

src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.test.js

@@ -16,6 +16,7 @@ const mockUpdateField = jest.fn().mockName('updateField');
 const mockSelected = 'multiplechoiceresponse';
 const mockAdvancedSelected = 'circuitschematic';
 const mockSetSelected = jest.fn().mockName('setSelected');
+const mocksetBlockTitle = jest.fn().mockName('setBlockTitle');
 
 let hook;
 
@@ -45,20 +46,26 @@ describe('SelectTypeModal hooks', () => {
 
   describe('onSelect', () => {
     test('updateField is called with selected templated if selected is an Advanced Problem', () => {
-      module.onSelect(mockAdvancedSelected, mockUpdateField)();
+      module.onSelect({
+        selected: mockAdvancedSelected,
+        updateField: mockUpdateField,
+        setBlockTitle: mocksetBlockTitle,
+      })();
       expect(mockUpdateField).toHaveBeenCalledWith({
         problemType: ProblemTypeKeys.ADVANCED,
         rawOLX: AdvanceProblems[mockAdvancedSelected].template,
       });
+      expect(mocksetBlockTitle).toHaveBeenCalledWith(AdvanceProblems[mockAdvancedSelected].title);
     });
     test('updateField is called with selected on visual propblems', () => {
-      module.onSelect(mockSelected, mockUpdateField)();
+      module.onSelect({ selected: mockSelected, updateField: mockUpdateField, setBlockTitle: mocksetBlockTitle })();
       const testOlXParser = new OLXParser(ProblemTypes[mockSelected].template);
       const { settings, ...testState } = testOlXParser.getParsedOLXData();
       expect(mockUpdateField).toHaveBeenCalledWith({
         ...testState,
         rawOLX: ProblemTypes[mockSelected].template,
       });
+      expect(mocksetBlockTitle).toHaveBeenCalledWith(ProblemTypes[mockSelected].title);
     });
   });