diff --git a/client/src/components/ElementEditor/AddElementPopover.js b/client/src/components/ElementEditor/AddElementPopover.js index c0950a73..f9e6a6ef 100644 --- a/client/src/components/ElementEditor/AddElementPopover.js +++ b/client/src/components/ElementEditor/AddElementPopover.js @@ -78,8 +78,8 @@ class AddElementPopover extends Component { extraClass ); - const globalUseGraphqQL = false; - const buttonOnClickHandler = globalUseGraphqQL ? this.getElementButtonClickHandler : this.handleButtonOnClick; + const globalUseGraphQL = false; + const buttonOnClickHandler = globalUseGraphQL ? this.getElementButtonClickHandler : this.handleButtonOnClick; const buttons = elementTypes.map((elementType) => ({ content: elementType.title, diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js index 51865602..2f481b64 100644 --- a/client/src/components/ElementEditor/ElementList.js +++ b/client/src/components/ElementEditor/ElementList.js @@ -11,6 +11,27 @@ import { getDragIndicatorIndex } from 'lib/dragHelpers'; import { getElementTypeConfig } from 'state/editor/elementConfig'; class ElementList extends Component { + constructor(props) { + super(props); + this.state = { + isLoading: true, + contentBlocks: [], + }; + } + + // #RPC + // it should make an ajax call to the server and do the equivalent of readBlocksForAreaQuery + // it should the call this.setState `contentBlocks` with the result + // this will cause a re-render of the component + // this callback should be passed to other components via context and get called after doing mutations + fetchContentBlocks() { + const globalUseGraphQL = false; + if (globalUseGraphQL) { + return; + } + // TODO: implement + } + getDragIndicatorIndex() { const { dragTargetElementId, draggedItem, blocks, dragSpot } = this.props; return getDragIndicatorIndex( @@ -31,7 +52,7 @@ class ElementList extends Component { ElementComponent, HoverBarComponent, DragIndicatorComponent, - blocks, + blocks, // graphql - comes from readBlocksForAreaQuery allowedElementTypes, elementTypes, areaId, @@ -41,16 +62,19 @@ class ElementList extends Component { isDraggingOver, } = this.props; + const globalUseGraphQL = false; + const contentBlocks = globalUseGraphQL ? blocks : this.state.contentBlocks; + // Blocks can be either null or an empty array - if (!blocks) { + if (!contentBlocks) { return null; } - if (blocks && !blocks.length) { + if (contentBlocks && !contentBlocks.length) { return
{i18n._t('ElementList.ADD_BLOCKS', 'Add blocks to place your content')}
; } - let output = blocks.map((element) => ( + let output = contentBlocks.map((element) => (
; } return null; @@ -106,9 +132,12 @@ class ElementList extends Component { render() { const { blocks } = this.props; + const globalUseGraphQL = false; + const contentBlocks = globalUseGraphQL ? blocks : this.state.contentBlocks; + const listClassNames = classNames( 'elemental-editor-list', - { 'elemental-editor-list--empty': !blocks || !blocks.length } + { 'elemental-editor-list--empty': !contentBlocks || !contentBlocks.length } ); return this.props.connectDropTarget( @@ -121,11 +150,12 @@ class ElementList extends Component { } ElementList.propTypes = { - // @todo support either ElementList or Element children in an array (or both) + // blocks and loading come from readBlocksForAreaQuery blocks: PropTypes.arrayOf(elementType), + loading: PropTypes.bool, + // elementTypes: PropTypes.arrayOf(elementTypeType).isRequired, allowedElementTypes: PropTypes.arrayOf(elementTypeType).isRequired, - loading: PropTypes.bool, areaId: PropTypes.number.isRequired, dragTargetElementId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), onDragOver: PropTypes.func,