9s3x8v.js

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      // We initialise this here since we need a sensible default
      viewModel: new SchedulerData("2018-12-18", ViewTypes.Week)
      // the resources key is removed because it is never accessed directly.
      // test key is also removed because it's useless
    }
  }

  componentDidMount() {
    this.loadData()
  }

  loadData() {
    return axios.get("/api/getModules").then(res => {
      // This is terrible - we are modifying what is in state because viewModel is mutable
      // This is ultimately on the library author, as they designed their viewModel in this way.
      // What this means is that the state in the component and what is rendered in the view may become out of sync
      // This is because setState() is asynchronous and react can decide when it is going to actually update the state
      // This is mostly a theoretical issue than a practical one but you should be aware of it because it may bite you in unexpected ways
      const { viewModel } = this.state
      viewModel.setResources(res.data)
      // this is from a closure in the original source code
      viewModel.setEvents(events)
      this.setState({ viewModel })
    })
  }

  render() {
    return (
      <Scheduler
        schedulerData={this.state.viewModel}
        prevClick={this.prevClick}
        nextClick={this.nextClick}
        onSelectDate={this.onSelectDate}
        onViewChange={this.onViewChange}
        eventItemClick={this.eventClicked}
        viewEventClick={this.ops1}
        viewEventText="Ops 1"
        viewEvent2Text="Ops 2"
        viewEvent2Click={this.ops2}
        updateEventStart={this.updateEventStart}
        updateEventEnd={this.updateEventEnd}
        moveEvent={this.moveEvent}
        newEvent={this.newEvent}
      />
    )
  }

  prevClick = schedulerData => {
    schedulerData.prev()
    schedulerData.setEvents(events)
    this.setState({
      viewModel: schedulerData
    })
  }

  nextClick = schedulerData => {
    schedulerData.next()
    schedulerData.setEvents(events)
    this.setState({
      viewModel: schedulerData
    })
  }

  onViewChange = (schedulerData, view) => {
    schedulerData.setViewType(
      view.viewType,
      view.showAgenda,
      view.isEventPerspective
    )
    schedulerData.setEvents(events)
    this.setState({
      viewModel: schedulerData
    })
  }

  onSelectDate = (schedulerData, date) => {
    schedulerData.setDate(date)
    schedulerData.setEvents(events)
    this.setState({
      viewModel: schedulerData
    })
  }

  eventClicked = (schedulerData, event) => {
    alert(`You just clicked an event: {id: ${event.id}, title: ${event.title}}`)
  }

  ops1 = (schedulerData, event) => {
    alert(
      `You just executed ops1 to event: {id: ${event.id}, title: ${
        event.title
      }}`
    )
  }

  ops2 = (schedulerData, event) => {
    alert(
      `You just executed ops2 to event: {id: ${event.id}, title: ${
        event.title
      }}`
    )
  }

  newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {
    let newFreshId = 0
    schedulerData.events.forEach(item => {
      if (item.id >= newFreshId) newFreshId = item.id + 1
    })

    let newEvent = {
      id: newFreshId,
      title: "New event you just created",
      start: start,
      end: end,
      resourceId: slotId,
      bgColor: "purple"
    }
    schedulerData.addEvent(newEvent)
    this.setState({
      viewModel: schedulerData
    })
  }

  updateEventStart = (schedulerData, event, newStart) => {
    schedulerData.updateEventStart(event, newStart)
    this.setState({
      viewModel: schedulerData
    })
  }

  updateEventEnd = (schedulerData, event, newEnd) => {
    schedulerData.updateEventEnd(event, newEnd)
    this.setState({
      viewModel: schedulerData
    })
  }

  moveEvent = (schedulerData, event, slotId, slotName, start, end) => {
    schedulerData.moveEvent(event, slotId, slotName, start, end)
    this.setState({
      viewModel: schedulerData
    })
  }
}