Fix bug with multiple table instances

This makes sure all blocks have different IDs so they don't conflict.

Author: HardeepAsrani

classes/Visualizer/Gutenberg/build/block.css

@@ -17,7 +17,8 @@
 		"merge": "^1.2.1",
 		"react": "16.4.1",
 		"react-google-charts": "^3.0.8",
-		"react-json-editor-ajrm": "^2.5.8"
+		"react-json-editor-ajrm": "^2.5.8",
+		"uuid": "^3.3.3"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.1.6",

classes/Visualizer/Gutenberg/build/block.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import uuidv4 from 'uuid';
+
 /**
  * WordPress dependencies
  */
@@ -14,6 +19,7 @@ class DataTables extends Component {
 		this.dataRenderer = this.dataRenderer.bind( this );
 
 		this.table;
+		this.uniqueId = uuidv4();
 	}
 
 	componentDidMount() {
@@ -28,12 +34,12 @@ class DataTables extends Component {
 		if ( this.props !== prevProps ) {
 			if ( this.props.options.responsive_bool !== prevProps.options.responsive_bool ) {
 				if ( 'true' === prevProps.options.responsive_bool ) {
-					document.getElementById( `dataTable-instances-${ this.props.id }` ).classList.remove( 'collapsed' );
+					document.getElementById( `dataTable-instances-${ this.props.id }-${ this.uniqueId }` ).classList.remove( 'collapsed' );
 				}
 			}
 
 			this.table.destroy();
-			document.getElementById( `dataTable-instances-${ this.props.id }` ).innerHTML = '';
+			document.getElementById( `dataTable-instances-${ this.props.id }-${ this.uniqueId }` ).innerHTML = '';
 			this.initDataTable( this.props.columns, this.props.rows );
 		}
 	}
@@ -73,7 +79,7 @@ class DataTables extends Component {
 			return row;
 		});
 
-		this.table = jQuery( `#dataTable-instances-${ this.props.id }` ).DataTable({
+		this.table = jQuery( `#dataTable-instances-${ this.props.id }-${ this.uniqueId }` ).DataTable({
 			destroy: true,
 			data: data,
 			columns: columns,
@@ -145,24 +151,24 @@ class DataTables extends Component {
 				{ settings.customcss && (
 					<style>
 						{ settings.customcss.oddTableRow && (
-							`#dataTable-instances-${ this.props.id } tr.odd {
+							`#dataTable-instances-${ this.props.id }-${ this.uniqueId } tr.odd {
 								${ settings.customcss.oddTableRow.color ?  `color: ${ settings.customcss.oddTableRow.color } !important;` : '' }
 								${ settings.customcss.oddTableRow['background-color'] ?  `background-color: ${ settings.customcss.oddTableRow['background-color'] } !important;` : '' }
 								${ settings.customcss.oddTableRow.transform ?  `transform: rotate( ${ settings.customcss.oddTableRow.transform }deg ) !important;` : '' }
 							}`
 						)}
 
 						{ settings.customcss.evenTableRow && (
-							`#dataTable-instances-${ this.props.id } tr.even {
+							`#dataTable-instances-${ this.props.id }-${ this.uniqueId } tr.even {
 								${ settings.customcss.evenTableRow.color ?  `color: ${ settings.customcss.evenTableRow.color } !important;` : '' }
 								${ settings.customcss.evenTableRow['background-color'] ?  `background-color: ${ settings.customcss.evenTableRow['background-color'] } !important;` : '' }
 								${ settings.customcss.evenTableRow.transform ?  `transform: rotate( ${ settings.customcss.evenTableRow.transform }deg ) !important;` : '' }
 							}`
 						)}
 
 						{ settings.customcss.tableCell && (
-							`#dataTable-instances-${ this.props.id } tr td,
-							#dataTable-instances-${ this.props.id }_wrapper tr th {
+							`#dataTable-instances-${ this.props.id }-${ this.uniqueId } tr td,
+							#dataTable-instances-${ this.props.id }-${ this.uniqueId }_wrapper tr th {
 								${ settings.customcss.tableCell.color ?  `color: ${ settings.customcss.tableCell.color } !important;` : '' }
 								${ settings.customcss.tableCell['background-color'] ?  `background-color: ${ settings.customcss.tableCell['background-color'] } !important;` : '' }
 								${ settings.customcss.tableCell.transform ?  `transform: rotate( ${ settings.customcss.tableCell.transform }deg ) !important;` : '' }
@@ -171,7 +177,7 @@ class DataTables extends Component {
 					</style>
 				) }
 
-				<table id={ `dataTable-instances-${ this.props.id }` }></table>
+				<table id={ `dataTable-instances-${ this.props.id }-${ this.uniqueId }` }></table>
 			</Fragment>
 		);
 	}

classes/Visualizer/Gutenberg/build/handsontable.js

@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-import CreateCharts from './Components/CreateCharts.js';
-
 import Charts from './Components/Charts.js';
 
 import ChartSelect from './Components/ChartSelect.js';
@@ -56,7 +54,6 @@ class Editor extends Component {
 			 * Block Route Status
 			 *
 			 * home - Initial screen.
-			 * createChart - Option to create new charts.
 			 * showCharts - Display list of charts to pick.
 			 * chartSelect - Chart selected.
 			 * renderChart - Chart render.
@@ -402,8 +399,6 @@ class Editor extends Component {
 					</Placeholder>
 				) }
 
-				{ ( 'createChart' === this.state.route && false === this.state.isLoading ) && <CreateCharts/> }
-
 				{ ( 'showCharts' === this.state.route && false === this.state.isLoading ) && <Charts getChart={ this.getChart }/> }
 
 				{ ( 'chartSelect' === this.state.route && null !== this.state.chart ) &&
@@ -425,15 +420,15 @@ class Editor extends Component {
 
 				<div className="visualizer-settings__controls">
 
-					{ ( 'createChart' === this.state.route || 'showCharts' === this.state.route || 'chartSelect' === this.state.route ) &&
+					{ ( 'showCharts' === this.state.route || 'chartSelect' === this.state.route ) &&
 						<ButtonGroup>
 
 							<Button
 								isDefault
 								isLarge
 								onClick={ () => {
 									let route;
-									if ( 'createChart' === this.state.route || 'showCharts' === this.state.route ) {
+									if ( 'showCharts' === this.state.route ) {
 										route = 'home';
 									} else if ( 'chartSelect' === this.state.route ) {
 										route = 'showCharts';

classes/Visualizer/Gutenberg/chart_types_june2019_g.png

@@ -106,18 +106,6 @@
 					cursor: pointer;
 				}
 			}
-
-			.visualizer-settings__create-charts {
-				display: block;
-				width: 270px;
-				height: 205px;
-				padding: 15px;
-				border: 1px solid #e0e0e0;
-				background-color: white;
-				background-image: url(../../../../images/chart_types_june2019_g.png);
-				background-repeat: no-repeat;
-				background-position: center center;
-			}
 		}
 
 		.dataTables_wrapper {