Designer Component - Loading Reports

import React, { Fragment, useState } from "react";
import ReactDOM from "react-dom";
import { Designer } from "@mescius/activereportsjs-react";
import { FontStore } from "@mescius/activereportsjs/core";

var CPLReport = {
  Name: "Report",
  Body: {
    Width: "8.5in",
    Height: "11in",
  },
};

var FPLReport = {
  Name: "Report",
  Page: {
    PageWidth: "8.5in",
    PageHeight: "11in",
  },
  FixedPage: { Pages: [{}] },
};

function App() {
const designer = React.useRef();
  const [modalOpen, setModalOpen] = useState(false);
  const [selectedReport, setSelectedReport] = useState(null);
  const [reportPromise, setReportPromise] = useState(null);

  function onLoadBlank(fpl) {
    designer.current.setReport({
      definition: fpl ? FPLReport : CPLReport,
    });
  }

  function onSelectReport(report) {
    setSelectedReport({ id: report });
    setModalOpen(false);
  }

  function onCreateReport() {
    return Promise.resolve({ id: "reports/company-template.rdlx-json" });
  }
  
  function onCloseDialog() {
    setModalOpen(false);
    if (reportPromise) {
      reportPromise.resolve(null);
      setReportPromise(null);
    }
  }
  
  function onOpenReport() {
    setModalOpen(true);
    return new Promise((resolve, reject) => {
      setReportPromise({ resolve, reject });
    });
  }

  React.useEffect(() => {
    if (selectedReport && reportPromise) {
      reportPromise.resolve(selectedReport);
      setReportPromise(null);
      setSelectedReport(null);
    }
  }, [selectedReport, reportPromise]);

  return (
    <Fragment>
      <div id="designer-toolbar" className="container-fluid">
        <div className="row mt-3 mb-3">
          <button
            type="button"
            className="btn btn-outline-primary btn-sm col-sm-2 ml-1"
            onClick={() => onLoadBlank(false)}
          >
            Load Blank Report
          </button>
        </div>
      </div>
      <div id="designer-host">
        <Designer
          ref={designer}
          report={{ id: "reports/company-template.rdlx-json" }}
          onOpen={onOpenReport}
          onCreate={onCreateReport}
        />
      </div>
      {modalOpen && (
        <div className="modal">
          <div
            className="modal-content"
            
          >
            <div class="modal-header">
              <h5 className="modal-title">Open Report</h5>
              <button
                type="button"
                class="close"
                onClick={()=>onCloseDialog()}
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>  
            <div class="modal-body">
              <strong>Select Report:</strong>
              <button
                type="button"
                className="list-group-item list-group-item-action"
                onClick={() =>
                  onSelectReport("reports/CustomersTable.rdlx-json")
                }
              >
                Customers Report
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
                onClick={() => onSelectReport("reports/TaxiDrives.rdlx-json")}
              >
                Taxi Drives Report
              </button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" onClick={()=>onCloseDialog()} >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </Fragment>
  );
}

FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
ReactDOM.render(<App />, document.getElementById("root"));