we are displaying a diagram again w/ burnettk

src/react_bpmn_editor.js

@@ -7,9 +7,12 @@ import React, { useEffect, useState } from "react";
 import { BACKEND_BASE_URL } from './config';
 import { HOT_AUTH_TOKEN } from './config';
 
+import "bpmn-js/dist/assets/diagram-js.css";
+import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
 import "bpmn-js-properties-panel/dist/assets/properties-panel.css"
 import './bpmn-js-properties-panel.css';
 
+
 // instantiating this here so it doesn't get
 // reinstantiate below when useEffect is called
 // multiple times by react
@@ -53,7 +56,7 @@ export default function ReactBpmnEditor(props) {
 
 
     if (diagramXML) {
-      console.log("diagramXML", diagramXML)
+      // console.log("diagramXML", diagramXML)
       return displayDiagram(bpmnViewer, diagramXML);
     }
 
@@ -66,21 +69,25 @@ export default function ReactBpmnEditor(props) {
     // }
 
     // if (props.url && !diagramXML) {
+    if (!diagramXML) {
       return fetchDiagram(props.process_model_id, props.file_name);
-    // }
+    }
 
     return () => {
       bpmnViewer.destroy();
     }
 
     function fetchDiagram(process_model_id, file_name) {
-      fetch(`${BACKEND_BASE_URL}/process-models/${process_model_id}/file/${file_name}`, {
+      fetch(process.env.PUBLIC_URL + '/sample.bpmn', {
+      // fetch(`${BACKEND_BASE_URL}/process-models/${process_model_id}/file/${file_name}`, {
         headers: new Headers({
           'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
         })
       })
-        .then(response => response.json().file_contents)
+        // .then(response => response.json())
-        .then(text => setDiagramXML(text))
+        // .then(response_json => setDiagramXML(response_json.file_contents))
+        .then(response => response.text())
+        .then(response_json => setDiagramXML(response_json))
         .catch(err => handleError(err));
     }
 
@@ -93,8 +100,8 @@ export default function ReactBpmnEditor(props) {
 
     function displayDiagram(bpmnViewerToUse, diagramXMLToDisplay) {
       setLoaded(true);
-      console.log("WE IMPORT");
+      // console.log("WE IMPORT");
-      console.log("diagramXML", diagramXMLToDisplay)
+      // console.log("diagramXML", diagramXMLToDisplay)
       bpmnViewerToUse.importXML(diagramXMLToDisplay);
     }
   }, [props, diagramXML, loaded]);

src/routes/ProcessModelEditDiagram.js

@@ -35,15 +35,20 @@ export default function ProcessModelEditDiagram() {
       )
   }, []);
 
+  function onError(err) {
+    console.log('ERROR:', err);
+  }
+
       // url={process.env.PUBLIC_URL + '/sample.bpmn'}
       // diagramXML={item.file_contents}
+      // <h2>Process Model File: {item.name}</h2>
   if (item) {
     return (
       <main style={{ padding: "1rem 0" }}>
-      <h2>Process Model File: {item.name}</h2>
       <ReactBpmnEditor
         process_model_id={params.process_model_id}
         file_name={item.name}
+        onError={ onError }
       />
       </main>
     );