yarigpopov

<Example::RadioInputForm
  as |rif|
>
  <div>
    Parent Value:
    <span class="font-semibold text-white">
      {{rif.currentValue}}
    </span>
  </div>
  <div class="flex flex-wrap">

yarigpopov

<form>
  {{yield (hash
    RadioInput=(component
      'example/radio-input-form/radio-input'
      currentValue=this.currentValue
      onChange=this.onChange
    )
    Submit=(component
      'example/radio-input-form/button'
      disabled=(not this.currentValue)

yarigpopov

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class DogDataService extends Service {
  @tracked data: IDog = null;
  @tracked status: Status = Status.loading;
  @tracked error: Error = null;

  constructor() {
    super(...arguments);

yarigpopov

import { Machine } from "xstate";

function noop() {}

const async = Machine(
  {
    initial: "idle",
    context: {
      trigger: noop,
      onSuccess: noop,

yarigpopov

import React from "react";
import async from "./async-machine";
import { interpret } from "xstate";

function noop() {}

// create a Provider/Consumer pair
const AsyncContext = React.createContext({});
AsyncContext.displayName = "Async";

yarigpopov

import { useMachine } from "@xstate/react";
import async from "./async-machine";

function noop() {}

function useAsync({ trigger, onSuccess, onError } = {}) {
  const [current, send] = useMachine(
    async.withContext({
      trigger: trigger || noop,
      onSuccess: onSuccess || noop,

yarigpopov

<Async @trigger={{this.asyncThing}} as |async|>
  <div>{{async.current.value}}</div>
  <button
    type="button"
    class="
      p-2 bg-gray-200 cursor-pointer rounded-md focus:outline-none
      {{if async.isBusy "cursor-not-allowed"}}
    "
    {{on "click" async.trigger}}
  >