1.js

// @flow

import {
  type Store,
  type Effect,
  type Event,
  sample,
  guard,
  combine,
  restore,
  forward,
} from "effector"
import { debugDomain } from "@lib/effector-extend"
import type { AuthEmailResultPayload } from "@lib/ws"
import { wsEmailSend } from "@features/auth"

const { createEffect, createEvent, createStore } = debugDomain

export const changeField: Event<string> = createEvent()
export const sendCode: Event<void> = createEvent()
export const resetStores: Event<void> = createEvent()
export const resultForSendCode: Event<[number, string]> = createEvent()

export const $currentField: Store<string> = restore(changeField, "")

export const $previosField: Store<string> = restore(
  resultForSendCode.map(([timer, field]) => field),
  "",
).reset(resetStores)

export const $isValidField: Store<boolean> = $currentField.map(
  (e) => e.trim().length > 0,
)

export const sendCodeFx: Effect<
  string,
  AuthEmailResultPayload,
> = createEffect().use(wsEmailSend)

export const decrementTimerFx: Effect<void, void> = createEffect().use(() => {
  return new Promise((res, rej) => {
    const unbind = resetStores.watch(() => {
      rej()
      unbind()
    })

    setTimeout(() => {
      res()
      unbind()
    }, 1000)
  })
})

export const $expiredTimer: Store<number> = createStore(0)
  .on(resultForSendCode, (prev, [timer]) => timer)
  .on(decrementTimerFx.done, (timer) => timer - 1)
  .reset(resetStores)

export const $expiredTimerIsEmpty: Store<boolean> = $expiredTimer.map(
  (t) => t === 0,
)

export const $expiredTimerIsNotEmpty: Store<boolean> = $expiredTimerIsEmpty.map(
  (t) => !t,
)

export const $nextAndPrevFieldsAreEquals: Store<boolean> = combine([
  $currentField,
  $previosField,
]).map(([x, y]) => x === y)

export const $canSedCode: Store<boolean> = combine([
  $nextAndPrevFieldsAreEquals,
  $expiredTimerIsEmpty,
  $isValidField,
]).map(([nextAndPrevFieldsAreEquals, expiredTimerIsEmpty, isValidField]) => {
  if (nextAndPrevFieldsAreEquals) {
    return isValidField && expiredTimerIsEmpty
  }

  return isValidField
})

guard({
  source: sample($currentField, sendCode),
  filter: $canSedCode,
  target: sendCodeFx,
})

guard({
  source: decrementTimerFx.done.map(() => undefined),
  filter: $expiredTimerIsNotEmpty,
  target: decrementTimerFx,
})

forward({ from: resultForSendCode.map(() => undefined), to: decrementTimerFx })

guard({
  source: sample(
    $currentField,
    sendCodeFx.done,
    (field, { params, result }) => ({
      timeout: result.payload.timeout,
      areEqual: params === field,
      field,
    }),
  ),
  filter: ({ areEqual }) => areEqual,
  target: resultForSendCode.prepend(({ timeout, field }) => [timeout, field]),
})

forward({ from: sendCodeFx.map(() => undefined), to: resetStores })