Issue integrating react-big-schedule

[chavu]

Issue integrating react-big-schedule

[rjaros]

I'm not sure I can help you, because I don't know this react component. But I'm wondering why do you use:

react(data) { getState, changeState ->

form of react function call, because you don't use the reference it returns (and the whole idea of this is to access react component internal state from kvision component, see: https://kvision.gitbook.io/kvision-guide/4.-integrating-with-javascript-libraries/using-react-components#advanced-components). Perhaps simplyfing the code and dropping getState, changeState calls will help you?

[chavu]

When I don't use this form of react the PREV, NEXT and OnslectDate don't work at all even once. That's why I think its to do with the Kvision/KotlinJS side of state management rather than the the library. Let me keep digging. Will update here if I find something.

By the way I was following this example from you. https://slack-chats.kotlinlang.org/t/515741/is-there-any-calendar-widget-i-could-use-that-could-be-prese

[chavu]

I have managed by keeping the schedulerData viewModel inside redux state then refreshing it during the PREV and NEXT schudeler functions. Below is the final code for SchedulerView.kt

SchedulerView.kt

package com.digitres.pmis.modules.scheduling

import com.digitres.pmis.modules.coreProject.activities.redux.ActivitiesActions
import com.digitres.pmis.modules.scheduling.models.SchedulerData
import com.digitres.pmis.redux.appStore
import io.kvision.core.Container
import io.kvision.core.Position
import io.kvision.html.div
import io.kvision.react.react
import io.kvision.require
import io.kvision.state.bind
import io.kvision.utils.px
import react.ComponentClass
import react.PropsWithChildren

external interface BigSchedulerProps : PropsWithChildren {
    var schedulerData: SchedulerData
    var prevClick: (scheduleData: SchedulerData)-> Unit
    var nextClick: (scheduleData: SchedulerData)-> Unit
    var onViewChange: (scheduleData: SchedulerData, view : dynamic) -> Unit
    var onSelectDate: (scheduleData: SchedulerData, date: String) -> Unit
    var eventItemClick: (scheduleData: SchedulerData, event : dynamic) -> Unit
}

val Scheduler: ComponentClass<BigSchedulerProps> = require("react-big-schedule").Scheduler
val ViewType  = require("react-big-schedule").ViewType

fun Container.schedulerView() {

    div().bind(appStore) {appState ->
        position = Position.RELATIVE
        paddingBottom = 100.px

        val data:SchedulerData = appState.activities.schedulerData!!
        val events = data.events

        react {
            Scheduler {
                schedulerData = data
                prevClick = { schedulerData  ->
                    schedulerData.prev()
                    schedulerData.setEvents(events)
                    appStore.dispatch(ActivitiesActions.SetSchedulerData(schedulerData))
                }
                nextClick = { schedulerData  ->
                    schedulerData.next()
                    schedulerData.setEvents(events)
                    appStore.dispatch(ActivitiesActions.SetSchedulerData(schedulerData))
                }
                onSelectDate = { schedulerData, date ->
                    schedulerData.setDate(date)
                    schedulerData.setEvents(events)
                    appStore.dispatch(ActivitiesActions.SetSchedulerData(schedulerData))
                }
                onViewChange = { schedulerData , view ->
                    schedulerData.setViewType(view.viewType, showAgenda = view.showAgenda,  isEventPerspective = view.isEventPerspective)
                    schedulerData.setEvents(events)
                }
                eventItemClick = { _, event ->
                    console.log("Event clicked")
                    console.log(event)
                }

           }
        }
    }
}