react mermaid corebos question

README.md

Example and steps to show a coreBOS Business Question of type mermaid in a react application

yarn add mermaid debounce corebos-ws-lib

tested with

 "debounce": "^1.2.0",
 "mermaid": "^8.5.0",

adapt and deploy the code in the file index.js

BusinessQuestion.csv

index.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as cbconn from 'corebos-ws-lib/WSClientm';

import MainLayout from 'Hoc/MainLayout'
import H1 from 'Components/H1'
import mermaid from 'mermaid';
import debounce from 'debounce';

const apiUrl = 'http://localhost/coreBOSTest';
cbconn.setURL(apiUrl);

class Home extends Component {
  static propTypes = {}
  /**
   * Debounce the code first. When the function
   * fires, take the value and attempt to update
   * the Mermaid chart.
   *
   * @memberof App
   */
  handleChange = debounce(
    (value) => {
      console.log(value);
      var output = document.getElementById('output');
      try {
        mermaid.parse(value);

        output.innerHTML = '';

        mermaid.render('theGraph', value, function(svgCode) {
          console.log(svgCode);
          output.innerHTML = svgCode;
        });
      } catch (err) {
        console.error(err);
      }
    },
    600,
    false
  );

  /**
   * Render an initial chart on mount.
   *
   * @memberof App
   */
  componentDidMount() {
    var output = document.getElementById('output');
    mermaid.initialize({ startOnLoad: true });
    cbconn.doLogin('admin', 'admin', true)
    .then(()=> {
      cbconn.doInvoke('cbQuestionAnswer', { qid: '48x44129', params: '{}'}, 'GET')
        .then(data => {
          mermaid.render('theGraph', data.answer, function(svgCode) {
            output.innerHTML = svgCode;
          });
        });
    });
  }
  render() {
    return (
      <MainLayout>
        <H1>This is a secondary page</H1>
        <textarea
          rows="4"
          onChange={(e) => this.handleChange(e.target.value)}
        />
       <div id="output" />
      </MainLayout>
    )
  }
}

const mapStateToProps = state => ({})
const mapDispatchToProps = dispatch => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Home)