Designer Component - Saving Reports

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

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [selectedReport, setSelectedReport] = useState(null);
  const [reportPromise, setReportPromise] = useState(null);
  const counter = React.useRef(0);
  const [reportStorage, setReportStorage] = React.useState(new Map());

  function onSelectReport(reportId) {
    setSelectedReport(reportId);
    setModalOpen(false);
  }
  function onCreateReport(){
    const CPLReport = {
      Name: "Report",
      Body: {
        Width: "8.5in",
        Height: "11in",
      },
    };     
    const reportId = `NewReport${++counter.current}`;
    return Promise.resolve({
      definition: CPLReport,
      id: reportId,
      displayName: reportId,
    });   
  }
  function onCloseDialog() {
    setModalOpen(false);
    if (reportPromise) {
      reportPromise.resolve(null);
      setReportPromise(null);
    }
  }
  function onOpenReport(){
    setModalOpen(true);
    return new Promise((resolve, reject) => {
      setReportPromise({ resolve, reject });
    });
  }
  function onSaveReport(info){
    const reportId = info.id || `NewReport${++counter.current}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ displayName: reportId });    
  }
  function onSaveAsReport(info){
    const reportId = `NewReport${++counter.current}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ id: reportId, displayName: reportId });    
  }
  React.useEffect(() => {
    if (selectedReport && reportPromise) {
      reportPromise.resolve({
        definition: reportStorage.get(selectedReport),
        id: selectedReport,
        displayName: selectedReport,
      });
      setReportPromise(null);
      setSelectedReport(null);
    }
  }, [selectedReport, reportPromise]);
  return (
    <Fragment>
      <div id="designer-host"><Designer onCreate={onCreateReport} onSave={onSaveReport} onSaveAs={onSaveAsReport} onOpen={onOpenReport} /></div>
      {modalOpen && (
      <div class="modal" id="dlgOpen" tabindex="-1" aria-hidden="true">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">
                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>
              <div class="list-group">
                {[...reportStorage.keys()].map((reportId) => (
                  <button
                    type="button"
                    class="list-group-item list-group-item-action"
                    onClick={() => onSelectReport(reportId)}
                  >
                    {reportId}
                  </button>
                ))}
              </div>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-outline-secondary"
                onClick={()=>onCloseDialog()}
              >
                Close
              </button>
            </div>
        </div>
      </div>)}
    </Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));