App.jsx

import React, { useState } from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devexpress-richedit/dist/dx.richedit.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css';
import 'devexpress-dashboard/dist/css/dx-dashboard.light.css';
import DashboardControl from 'devexpress-dashboard-react';
import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';
import SelectBox from 'devextreme-react/select-box';
import Button from 'devextreme-react/button';

const store = [
  {"id": "products", "name": "Sample Dashboard"},
  {"id": "support", "name": "Second Dashboard"},
];

function switchMode(props) {
  return props === 'Viewer' ? "Designer" : "Viewer";
}

function onBeforeRender(e) {
  var dashboardControl = e.component;
  dashboardControl.registerExtension(new TextBoxItemEditorExtension(dashboardControl));
}

function App() {
  const [dashboardId, setDashboardId] = useState(store[2]);
  const [workingModeVar, setWorkingMode] = useState("Designer");
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <Button onClick={() => { setWorkingMode(switchMode(workingModeVar)) }}>Switch to {switchMode(workingModeVar)}</Button>
      <SelectBox
        dataSource={store}
        value={ dashboardId }
        valueExpr='id'
        displayExpr='name'
        onValueChanged={ (e) => setDashboardId(e.value) }
      ></SelectBox>
      <DashboardControl style={{ height: '90%' }} 
        endpoint="http://localhost:5000/api/dashboard"
        workingMode={workingModeVar}
        dashboardId = {dashboardId}
        onBeforeRender={onBeforeRender}
        onOptionChanged = { e => { if(e.name === 'dashboardId') { setDashboardId(e.value) } } }
        >
      </DashboardControl>
  </div>
  );
}

export default App;