jku-ba-react/src/test/Mapboxes.js

import React, {Profiler} from "react";
import Mapbox from "./../maps/Mapbox";
import {measureTime} from './../helpers/measureTime';
import {CustomInput, Input} from "reactstrap";
import {mapTestState} from "./../config/variables"
import {
  createRandomMarkers,
  calcMarkerPosition,
  changeSwitch,
  setNoOfMarkers
} from "./../helpers/randomMarkers";
import {
  didMountSwitchLatLng,
  componentDidUpdate,
  componentWillUnmount
} from "./../helpers/testLifecycle"


export default class MapGLs extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      ...mapTestState,
      markerType: "feature"
    }

    this.measurementsDiv = React.createRef()
    this.markerInfoDiv = React.createRef()

    this.createRandomMarkers = createRandomMarkers.bind(this)
    this.calcMarkerPosition = calcMarkerPosition.bind(this)
    this.changeSwitch = changeSwitch.bind(this)
    this.setNoOfMarkers = setNoOfMarkers.bind(this)

    this.componentDidUpdate = componentDidUpdate.bind(this)
    this.componentWillUnmount = componentWillUnmount.bind(this)
  }

  componentDidMount() {
    didMountSwitchLatLng(this, true)
  }

  handleRadioChange = (event) => {
    this.setState({
      markerType: event.target.value
    })
    this.measurementsDiv.current.innerHTML = ""
  }

  render(){
    return (
      <div className="mapTestContainer">

        <div className="mapTime">
          <CustomInput type="switch" onChange={this.changeSwitch} id="moveSwitch" name="moveSwitch" label="Move markers" />
          <div ref={this.markerInfoDiv}>
            <span>{this.state.currStep} steps</span>
          </div>

          <input type="radio" value="feature" id="feature" onChange={this.handleRadioChange} name="markerType" defaultChecked/>
          <label htmlFor="feature" className="ml-2 mr-2">feature</label>
          <input type="radio" value="marker" id="marker" onChange={this.handleRadioChange} name="markerType"/>
          <label htmlFor="marker"className="ml-2">marker</label><br/>

          <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
          <Input type="text" onChange={(e) => this.setNoOfMarkers(e, true)} value={this.state.noOfMarkers}/>

          <div ref={this.measurementsDiv}>
          </div>
        </div>

        <div className="mapTest">
          <Profiler id="mapbox" onRender={measureTime(this, this.state.noOfMarkers, this.state.markerType)}>
            <Mapbox markers={this.state.markers} markerType={this.state.markerType}/>
          </Profiler>
        </div>

      </div>
    );
  }
}