ENH Refactor Element to use mutation hook

client/src/components/ElementActions/PublishAction.js

@@ -1,31 +1,19 @@
 /* global window */
-import React, { useContext, useEffect } from 'react';
-import { compose } from 'redux';
+import React, { useContext } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
-import publishBlockMutation from 'state/editor/publishBlockMutation';
 import i18n from 'i18n';
-import { ElementContext } from 'components/ElementEditor/Element';
+import { ElementContext } from 'components/ElementEditor/ElementContext';
 
 /**
  * Adds the elemental menu action to publish a draft/modified block
  */
 const PublishAction = (MenuComponent) => (props) => {
  const {
- doPublishElement,
  formDirty,
- formHasRendered,
- onAfterPublish,
  onPublishButtonClick,
  } = useContext(ElementContext);
 
- const { element, actions } = props;
-
- const publishElement = () => {
- // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js
- actions.handlePublishBlock(element.id)
- .then(() => onAfterPublish(false))
- .catch(() => onAfterPublish(true));
- };
+ const { element } = props;
 
  const handleClick = (event) => {
  event.stopPropagation();
@@ -46,12 +34,6 @@ const PublishAction = (MenuComponent) => (props) => {
  toggle: props.toggle,
  };
 
- useEffect(() => {
- if (formHasRendered && doPublishElement) {
- publishElement();
- }
- }, [formHasRendered, doPublishElement]);
-
  if (props.type.broken) {
  // Don't allow this action for a broken element.
  return (
@@ -69,7 +51,4 @@ const PublishAction = (MenuComponent) => (props) => {
 
 export { PublishAction as Component };
 
-export default compose(
- publishBlockMutation,
- PublishAction
-);
+export default PublishAction;

client/src/components/ElementActions/SaveAction.js

@@ -1,15 +1,11 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import i18n from 'i18n';
-import { ElementContext } from 'components/ElementEditor/Element';
+import { ElementContext } from 'components/ElementEditor/ElementContext';
 
 const SaveAction = (MenuComponent) => (props) => {
  const {
- doSaveElement,
  onSaveButtonClick,
- onAfterSave,
- submitForm,
- formHasRendered,
  formDirty,
  } = useContext(ElementContext);
 
@@ -18,24 +14,13 @@ const SaveAction = (MenuComponent) => (props) => {
  onSaveButtonClick();
  };
 
- const saveElement = () => {
- submitForm();
- onAfterSave();
- };
-
  const newProps = {
  title: i18n._t('ElementSaveAction.SAVE', 'Save'),
  className: 'element-editor__actions-save',
  onClick: handleClick,
  toggle: props.toggle,
  };
 
- useEffect(() => {
- if (formHasRendered && doSaveElement) {
- saveElement();
- }
- }, [formHasRendered, doSaveElement]);
-
  if (!props.expandable || props.type.broken) {
  // Some elemental blocks can not be edited inline (e.g. User form blocks)
  // We don't want to add a "Save" action for those blocks.

client/src/components/ElementActions/tests/PublishAction-test.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { Component as PublishAction } from '../PublishAction';
-import { ElementContext } from '../../ElementEditor/Element';
+import { ElementContext } from '../../ElementEditor/ElementContext';
 
 window.jQuery = {
  noticeAdd: () => null
@@ -101,22 +101,7 @@ test('Clicking button calls onPublishButtonClick', () => {
  expect(onPublishButtonClick).toHaveBeenCalled();
 });
 
-test('Do trigger graphql mutation if doPublishElement is true and formHasRendered is true', () => {
- const handlePublishBlock = jest.fn(() => Promise.resolve());
- render(
- <ElementContext.Provider value={makeProviderValue({
- doPublishElement: true,
- formHasRendered: true,
- })}
- >
- <ActionComponent {...makeProps({ actions: { handlePublishBlock } })}/>
- </ElementContext.Provider>
- );
- expect(handlePublishBlock).toHaveBeenCalledWith(123);
-});
-
 test('Do not trigger graphql mutation if doPublishElement is true and formHasRendered is false', () => {
- // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js
  const handlePublishBlock = jest.fn(() => Promise.resolve());
  render(
  <ElementContext.Provider value={makeProviderValue({
@@ -143,29 +128,3 @@ test('Do not trigger graphql mutation if doPublishElement is false and formHasRe
  );
  expect(handlePublishBlock).not.toHaveBeenCalled();
 });
-
-test('onAfterPublish is called after graphql mutation', async () => {
- let value = 1;
- const handlePublishBlock = jest.fn(() => {
- value = 2;
- return Promise.resolve();
- });
- const onAfterPublish = jest.fn(() => {
- value = 3;
- });
- render(
- <ElementContext.Provider value={makeProviderValue({
- doPublishElement: true,
- formHasRendered: true,
- onAfterPublish,
- })}
- >
- <ActionComponent {...makeProps({ actions: { handlePublishBlock } })}/>
- </ElementContext.Provider>
- );
- // This is required to ensure the resolved promised returned by handlePublishBlock is handled
- await new Promise(resolve => setTimeout(resolve, 0));
- expect(handlePublishBlock).toHaveBeenCalled();
- expect(onAfterPublish).toHaveBeenCalled();
- expect(value).toBe(3);
-});

client/src/components/ElementActions/tests/SaveAction-test.js

@@ -4,7 +4,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { Component as SaveAction } from '../SaveAction';
-import { ElementContext } from '../../ElementEditor/Element';
+import { ElementContext } from '../../ElementEditor/ElementContext';
 
 function makeProps(obj = {}) {
  return {
@@ -28,11 +28,7 @@ function makeProps(obj = {}) {
 
 function makeProviderValue(obj = {}) {
  return {
- formHasRendered: false,
- onAfterSave: () => {},
- doSaveElement: false,
  onSaveButtonClick: () => {},
- submitForm: () => {},
  formDirty: true,
  ...obj,
  };
@@ -98,72 +94,3 @@ test('Clicking button calls onSaveButtonClick', () => {
  fireEvent.click(container.querySelector('button.element-editor__actions-save'));
  expect(onSaveButtonClick).toHaveBeenCalled();
 });
-
-test('submitForm is called if formHasRendered is true and doSaveElement is true', () => {
- const submitForm = jest.fn();
- render(
- <ElementContext.Provider value={makeProviderValue({
- formHasRendered: true,
- doSaveElement: true,
- submitForm,
- })}
- >
- <ActionComponent {...makeProps()} />
- </ElementContext.Provider>
- );
- expect(submitForm).toHaveBeenCalled();
-});
-
-test('submitForm is not called if formHasRendered is false and doSaveElement is true', () => {
- const submitForm = jest.fn();
- render(
- <ElementContext.Provider value={makeProviderValue({
- formHasRendered: false,
- doSaveElement: true,
- submitForm,
- })}
- >
- <ActionComponent {...makeProps()} />
- </ElementContext.Provider>
- );
- expect(submitForm).not.toHaveBeenCalled();
-});
-
-test('submitForm is not called if formHasRendered is true and doSaveElement is false', () => {
- const submitForm = jest.fn();
- render(
- <ElementContext.Provider value={makeProviderValue({
- formHasRendered: true,
- doSaveElement: false,
- submitForm,
- })}
- >
- <ActionComponent {...makeProps()} />
- </ElementContext.Provider>
- );
- expect(submitForm).not.toHaveBeenCalled();
-});
-
-test('onAfterSave is called after submitForm', () => {
- let value = 1;
- const submitForm = jest.fn(() => {
- value = 2;
- });
- const onAfterSave = jest.fn(() => {
- value = 3;
- });
- render(
- <ElementContext.Provider value={makeProviderValue({
- formHasRendered: true,
- doSaveElement: true,
- submitForm,
- onAfterSave,
- })}
- >
- <ActionComponent {...makeProps()}/>
- </ElementContext.Provider>
- );
- expect(submitForm).toHaveBeenCalled();
- expect(onAfterSave).toHaveBeenCalled();
- expect(value).toBe(3);
-});

client/src/components/ElementEditor/Content.js

@@ -25,6 +25,7 @@ class Content extends PureComponent {
  onFormSchemaSubmitResponse,
  ensureFormRendered,
  formHasRendered,
+ innerRef,
  } = this.props;
 
  // The '*-rendered-not-visible` class is used to hide the form when it's not visible
@@ -36,6 +37,19 @@ class Content extends PureComponent {
  'element-editor-editform--rendered-not-visible': notVisible,
  };
 
+ // console.log([
+ // 'notVisible', notVisible,
+ // 'previewExpanded', previewExpanded,
+ // 'ensureFormRendered', ensureFormRendered,
+ // 'formHasRendered', formHasRendered,
+ // 'extraClass', extraClass
+ // ])
+ console.log('&& Content.formDirty', formDirty);
+ console.log('&& Content.ensureFormRendered', ensureFormRendered);
+ console.log('&& Content.formHasRendered', formHasRendered);
+ console.log('&& Content.previewExpanded', previewExpanded);
+ console.log('&& Content.notVisible', notVisible);
+
  return (
  <div className="element-editor-content">
  {!previewExpanded &&
@@ -49,16 +63,19 @@ class Content extends PureComponent {
  }
  {(previewExpanded || ensureFormRendered || formHasRendered) &&
  // Show inline editable fields
- <InlineEditFormComponent
- extraClass={extraClass}
- onClick={(event) => event.stopPropagation()}
- elementId={id}
- activeTab={activeTab}
- onFormInit={onFormInit}
- handleLoadingError={handleLoadingError}
- onFormSchemaSubmitResponse={onFormSchemaSubmitResponse}
- notVisible={notVisible}
- />
+ <>
+ <InlineEditFormComponent
+ extraClass={extraClass}
+ onClick={(event) => event.stopPropagation()}
+ elementId={id}
+ activeTab={activeTab}
+ onFormInit={onFormInit}
+ handleLoadingError={handleLoadingError}
+ onFormSchemaSubmitResponse={onFormSchemaSubmitResponse}
+ notVisible={notVisible}
+ />
+ <div ref={innerRef}></div>
+ </>
  }
  {formDirty &&
  <input
@@ -91,13 +108,13 @@ Content.propTypes = {
 
 Content.defaultProps = {};
 
-function mapStateToProps(state, ownProps) {
- const formName = loadElementFormStateName(ownProps.id);
+// function mapStateToProps(state, ownProps) {
+//  const formName = loadElementFormStateName(ownProps.id);
 
- return {
- formDirty: isDirty(`element.${formName}`, getFormState)(state),
- };
-}
+//  return {
+//  formDirty: isDirty(`element.${formName}`, getFormState)(state),
+//  };
+// }
 
 export { Content as Component };
 
@@ -108,6 +125,7 @@ export default compose(
  SummaryComponent, InlineEditFormComponent,
  }),
  () => 'ElementEditor.ElementList.Element'
- ),
- connect(mapStateToProps)
+ )
+ // ,
+ // connect(mapStateToProps)
 )(Content);