App

App is the top level component of Cloe UI. It is defined in src/App.js and has the following tasks:

  • Check the connection to a Cloe Host

  • Fetch data from Cloe in a specified interval

  • Store all data of Cloe UI

  • Render all subcomponents and pass them the needed data

Check Connection To Cloe Host

During App’s lifecycle method componentDidMount, an interval connectionCheck is registered which checks once a second for the connection to the specified Cloe Host. If the connection state changes, the boolean value of this.state.connected gets updated accordingly. this.state..connected is used by App’s subcomponents to decide if being rendered or not.

Fetch Data From Cloe

The method renewFetchInterval registers an data fetch interval with a given interval duration. The data fetch method which will get called in the interval is fetchData. Previous registered intervals will be cleared.

renewFetchInterval is called in three different cases: once during the start of Cloe UI in the componentDidMount method, every time the update interval gets changed via the setUpdateInterval method and if a new cloe host is specified with the updateHost method.

Store Cloe UI Data

App stores all the data fetched from the Cloe API in this.state.cloeData. This includes the following properties:

  • controllers

  • simulation

  • sensors

  • binding

  • vehicles

  • events

  • simTime

Render Subcomponents

The render method of App creates an array components which includes all subcomponents to render. The data for each component is passed with React Props.

 1const components = [
 2  {
 3    id: 0,
 4    component: controllers
 5      ? controllers.map(singleController => (
 6          <Controller
 7            key={singleController.endpointBase}
 8            host={host}
 9            controller={singleController}
10            connected={connected}
11            updateInterval={updateInterval}
12            simTime={simTime}
13          />
14        ))
15      : ""
16  },
17  { id: 1, component: <Rendering sensors={sensors} /> },
18  { id: 2, component: <Simulation simulation={simulation} host={host} /> },
19  { id: 3, component: <Binding binding={binding} /> },
20  {
21    id: 4,
22    component: <VehicleList vehicles={vehicles} simTime={simTime} />
23  },
24  { id: 5, component: <EventListWrapper events={events} /> }
25];

The returned JSX of render assigns the single components in the components array into two bootstrap columns. The assignment is made with the two arrays this.itemsOnLeftSide and this.itemsOnRightSide in the constructor of App.

1this.itemsOnLeftSide = cookies.get("firstColumn") || [0];
2this.itemsOnRightSide = cookies.get("secondColumn") || [1, 2, 3, 4, 5];

The returned JSX wraps each component in a DndWrapper component which enables Drag&Drop functionality.