Gutenberg: Make UI more intuitive when a chart is missing

Author: contactashish13

classes/Visualizer/Gutenberg/build/block.js

@@ -78,11 +78,20 @@ class Editor extends Component {
 
 		// Fetch review again if block loaded after saving.
 		if ( this.props.attributes.id ) {
-			let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` });
-
-			this.setState({
-				chart: result['chart_data']
-			});
+			let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` }).catch( function( error ) {
+            });
+
+            if ( result ) {
+                this.setState({
+                    chart: result['chart_data']
+                });
+            } else {
+
+                // if the chart is not found.
+                this.setState({
+                    route: 'error'
+                });
+            }
 		}
 	}
 
@@ -92,6 +101,7 @@ class Editor extends Component {
 		});
 
 		let result = await apiFetch({ path: `wp/v2/visualizer/${id}` });
+        console.log( 'getChart', id, result );
 
 		this.setState({
 			route: 'chartSelect',
@@ -297,6 +307,7 @@ class Editor extends Component {
 		});
 
 		let result = await apiFetch({ path: `wp/v2/visualizer/${id}` });
+            console.log( 'getChartData', id, result );
 
 		let chart = { ...this.state.chart };
 
@@ -406,6 +417,17 @@ class Editor extends Component {
 	}
 
 	render() {
+		if ( 'error' === this.state.route ) {
+			return (
+                <div className="visualizer-settings visualizer-error">
+                    <div className="visualizer-settings__title">
+                        <Dashicon icon="chart-pie" />
+                        { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
+                    </div>
+                </div>
+			);
+		}
+
 		if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
 			return (
 				<ChartRender