react table corebos question

README.md

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

related to https://gist.github.com/joebordes/7a42f37a26610ab91891c0f3360451e8

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/coreBOSwork';
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: '48x47034', params: [] }, 'GET')
        .then(data => {
          /*
          data.answer array with row values
          data.title
          */
            let response = '<H1>'+data.title+'</H1><table>';
            response += '<tr><th>First Name</th><th>Last Name</th></tr>';
            for (let row=0; row<data.answer.length; row++) {
              response += '<tr><td>'+data.answer[row].firstname+'</td><td>'+data.answer[row].lastname+'</td></tr>';
            }
            response += '</table>';
            output.innerHTML = response;
          //});
        });
    });
  }
  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)