breakpoint in listeners

[lucaleoni73]

I'm using kea-forms to handle a form. In particular within this form I have a quantity picker, with buttons to increase and decrease the quantity. In the listeners section I added some instructions to perform after the actions.setFormValue is called. In particular, these are api call, so I do not want to make multiple calls that could provoke side-effects. On the documentation I read about breakpoint and the possibility to use the async breakpoint with a specific amount of ms.

I tried to do as you are suggesting, but it does not seem to work as it should.

Here a piece of my code:

listeners(({ actions, values }) => ({
        setFormValue: async (payload, breakpoint) => {
            if (
                payload.name == 'participants' &&
                payload.value.find((p: INewBookingParticipant) => p.quantity > 0)
            ) {
                await breakpoint(1000)
                // Check if the quantities are compliant
                const allocation_compliance = validateAllocations(payload.value, values.availableRules)
                if (!allocation_compliance) {
                    actions.allocationsInvalid()
                } else {
                    actions.allocationsValid()
                }
                const filter: IGetMonthlyAvailabilityParams = {
                    date_from: dayjs().format('YYYY-MM-DD'),
                    date_to: dayjs().add(1, 'month').format('YYYY-MM-DD'),
                    skip_notice_period: true,
                    allocations: values.addBookingForm.participants
                        .filter((p) => p.quantity > 0)
                        .map((p) => ({
                            type_id: p.id,
                            name: p.name!,
                            quantity: p.quantity,
                        })),
                }
                try {
                    const response: IGetMonthlyAvailabilityResponse = await api.new_booking.getMonthlyAvailability(
                        values.addBookingForm.variant,
                        filter
                    )
                    actions.setAvailableDays(response.available_days)
                } catch (e: any) {
                    debugLog('[addBookingFormLogic][listeners][setAddBookingForm][getMonthlyAvailability]Error:', e)
                }
            }
            },
    })),

[mariusandra]

Hey @lucaleoni73 , when you say it doesn't work as it should, what happens? The code looks fine to me as it is. I'd still add one more breakpoint() (no await) right after the const response = await ... line, to get rid of "out of order" results, however what you have now should work as a simple 1sec debounce before making the call.

Thais aid, form values can be set with setFormValue, and also with setFormValues, and perhaps even by other actions if they're set up so. If you want to be sure you're not missing anything, I'd suggest using subscriptions to capture all changes to all form values, and then trigger a custom "quantityChanged" action. Then have a listener that listens to it, making various breakpoints even easier to follow.

[lucaleoni73]

Hey @mariusandra, thank you for your help. Now it works. Actually, I don't know exactly why it wasn't, cause I follow the docs as it is.
Why should I add the breakpoint() after the await? Shouldn't it be enough?