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}}
  >

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

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 { Machine } from "xstate";

function noop() {}

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

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

<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

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

yarigpopov

function App() {
  return (
    <Router>
      <div className="App">
        {/* The data provider component responsible
        for fetching and managing the data for the child components.
        This needs to be at the top level of our component tree.*/}
        <DogDataProvider>
          <Nav />
          <main className="w-full py-5 mx-auto text-center text-white md:py-20 max-w-screen-xl">

yarigpopov

export function useDogProviderState() {
  const context = React.useContext(DogDataProviderContext);

  if (context === undefined) {
    throw new Error('useDogProviderState must be used within DogDataProvider.');
  }

  return context;
}

yarigpopov

interface State {
  data: IDog;
  status: Status;
  error: Error;
}

const initState: State = { status: Status.loading, data: null, error: null };

const DogDataProviderContext = React.createContext(undefined);
DogDataProviderContext.displayName = 'DogDataProvider';