Replace local store with gutenberg store

src/app/App.js

@@ -8,7 +8,7 @@ import { Provider } from 'react-redux';
 import { setupStore, html2State } from '../store';
 import AppContainer from './AppContainer';
 import { Store } from 'redux';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { BlockEdit } from '@wordpress/editor';
 

src/app/AppContainer.js

@@ -2,17 +2,6 @@
  * @format */
 
 import { connect } from 'react-redux';
-import {
-	updateBlockAttributes,
-	focusBlockAction,
-	moveBlockUpAction,
-	moveBlockDownAction,
-	deleteBlockAction,
-	createBlockAction,
-	parseBlocksAction,
-	serializeToNativeAction,
-	mergeBlocksAction,
-} from '../store/actions';
 import MainApp from './MainApp';
 
 import { parse, serialize } from '@wordpress/blocks';
@@ -21,49 +10,46 @@ import { compose } from '@wordpress/compose';
 import { BlockEdit } from '@wordpress/editor';
 import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
-const mapStateToProps = ( state ) => ( {
-	...state,
-} );
+const mapStateToProps = ( state, ownProps ) => {
+	return {
+		blocks: ownProps.blocks.map( block => {
+			block.focused = ownProps.isBlockSelected( block.clientId );
+			return block;
+		} ),
+		refresh: ! ownProps.refresh
+	}
+};
 
 const mapDispatchToProps = ( dispatch, ownProps ) => {
 	return {
 		...ownProps,
 		onChange: ( clientId, attributes ) => {
-			dispatch( updateBlockAttributes( clientId, attributes ) );
 			ownProps.onAttributesUpdate( clientId, attributes );
 		},
 		focusBlockAction: ( clientId ) => {
-			dispatch( focusBlockAction( clientId ) );
 			ownProps.onSelect( clientId );
 		},
 		moveBlockUpAction: ( clientId ) => {
-			dispatch( moveBlockUpAction( clientId ) );
 			ownProps.onMoveUp( clientId );
 		},
 		moveBlockDownAction: ( clientId ) => {
-			dispatch( moveBlockDownAction( clientId ) );
 			ownProps.onMoveDown( clientId );
 		},
 		deleteBlockAction: ( clientId ) => {
-			dispatch( deleteBlockAction( clientId ) );
 			ownProps.onRemove( clientId );
 		},
-		createBlockAction: ( clientId, block, clientIdAbove ) => {
-			dispatch( createBlockAction( clientId, block, clientIdAbove ) );
+		createBlockAction: ( clientId, block ) => {
 			ownProps.onInsertBlock( block, ownProps.selectedBlockIndex + 1 );
 		},
 		parseBlocksAction: ( html ) => {
-			dispatch( parseBlocksAction( html ) );
 			const parsed = parse( html );
 			ownProps.onResetBlocks( parsed );
 		},
 		serializeToNativeAction: () => {
-			dispatch( serializeToNativeAction() );
 			const html = serialize( ownProps.blocks );
 			RNReactNativeGutenbergBridge.provideToNative_Html( html );
 		},
-		mergeBlocksAction: ( blockOneClientId, blockTwoClientId, block ) => {
-			dispatch( mergeBlocksAction( blockOneClientId, blockTwoClientId, block ) );
+		mergeBlocksAction: ( blockOneClientId, blockTwoClientId ) => {
 			ownProps.onMerge( blockOneClientId, blockTwoClientId );
 		},
 	};
@@ -77,11 +63,13 @@ export default compose( [
 			getBlockIndex,
 			getBlocks,
 			getSelectedBlockClientId,
+			isBlockSelected,
 		} = select( 'core/editor' );
 		const { rootClientId } = ownProps;
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		return {
+			isBlockSelected,
 			selectedBlockIndex: getBlockIndex( selectedBlockClientId, rootClientId ),
 			blocks: getBlocks(),
 		};
@@ -106,7 +94,7 @@ export default compose( [
 			onRemove: removeBlock,
 			onResetBlocks: resetBlocks,
 			onSelect: selectBlock,
-			onAttributesUpdate: updateBlockAttributes
+			onAttributesUpdate: updateBlockAttributes,
 		};
 	} ),
 ] )( AppContainer );

src/block-management/block-holder.js

@@ -23,20 +23,7 @@ type PropsType = BlockType & {
 	mergeBlocks: ( forward: boolean ) => void,
 };
 
-type StateType = {
-	selected: boolean,
-	focused: boolean,
-};
-
-export default class BlockHolder extends React.Component<PropsType, StateType> {
-	constructor( props: PropsType ) {
-		super( props );
-		this.state = {
-			selected: false,
-			focused: false,
-		};
-	}
-
+export default class BlockHolder extends React.Component<PropsType> {
 	renderToolbarIfBlockFocused() {
 		if ( this.props.focused ) {
 			return (

src/block-management/block-manager.js

@@ -45,7 +45,8 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	constructor( props: PropsType ) {
 		super( props );
 		this.state = {
-			dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
+			blocks: [],
+			dataSource: null,
 			showHtml: false,
 			inspectBlocks: false,
 			blockTypePickerVisible: false,
@@ -115,12 +116,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	static getDerivedStateFromProps( props: PropsType, state: StateType ) {
-		if ( props.fullparse === true ) {
+		if ( state.blocks !== props.blocks ) {
 			return {
 				...state,
+				blocks: props.blocks,
 				dataSource: new DataSource( props.blocks, ( item: BlockType ) => item.clientId ),
 			};
 		}
+
 		// no state change necessary
 		return null;
 	}
@@ -210,24 +213,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			return;
 		}
 
-		// Calling the merge to update the attributes and remove the block to be merged
-		const updatedAttributes = blockType.merge(
-			blockA.attributes,
-			blocksWithTheSameType[ 0 ].attributes
-		);
-
-		const newBlock = {
-			...blockA,
-			attributes: {
-				...blockA.attributes,
-				...updatedAttributes,
-			},
-		};
-		newBlock.focused = true;
-
-		// set it into the datasource, and use the same object instance to send it to props/redux
-		this.state.dataSource.splice( this.getDataSourceIndexFromClientId( blockA.clientId ), 2, newBlock );
-		this.props.mergeBlocksAction( blockA.clientId, blockB.clientId, newBlock );
+		this.props.mergeBlocksAction( blockA.clientId, blockB.clientId );
 	}
 
 	onChange( clientId: string, attributes: mixed ) {
@@ -263,8 +249,8 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			list = (
 				<FlatList
 					style={ styles.list }
-					data={ this.props.blocks }
-					extraData={ this.props.refresh, this.state.inspectBlocks }
+					data={ this.state.blocks }
+					extraData={ { refresh: this.props.refresh, inspectBlocks: this.state.inspectBlocks } }
 					keyExtractor={ ( item ) => item.clientId }
 					renderItem={ this.renderItem.bind( this ) }
 				/>