Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  
  const todoMachine = Machine({
  id: "todo",
  initial: "reading",
  context: {
    id: undefined,
    title: "",
    prevTitle: ""
  },
  on: {
    TOGGLE_COMPLETE: {
      target: ".reading.completed",
      actions: [
        assign({ completed: true }),
        sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
      ]
    },
    DELETE: "deleted"
  },
  states: {
    reading: {
      initial: "unknown",
      states: {
        unknown: {
          on: {
            "": [
              { target: "completed", cond: ctx => ctx.completed },
              { target: "pending" }
            ]
          }
        },
        pending: {
          on: {
            SET_COMPLETED: {
              target: "completed",
              actions: [
                assign({ completed: true }),
                sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
              ]
            }
          }
        },
        completed: {
          on: {
            TOGGLE_COMPLETE: {
              target: "pending",
              actions: [
                assign({ completed: false }),
                sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
              ]
            },
            SET_ACTIVE: {
              target: "pending",
              actions: [
                assign({ completed: false }),
                sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
              ]
            }
          }
        },
        hist: {
          type: "history"
        }
      },
      on: {
        EDIT: {
          target: "editing",
          actions: "focusInput"
        }
      }
    },
    editing: {
      onEntry: assign({ prevTitle: ctx => ctx.title }),
      on: {
        CHANGE: {
          actions: assign({
            title: (ctx, e) => e.value
          })
        },
        COMMIT: [
          {
            target: "reading.hist",
            actions: sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx })),
            cond: ctx => ctx.title.trim().length > 0
          },
          { target: "deleted" }
        ],
        BLUR: {
          target: "reading",
          actions: sendParent(ctx => ({ type: "TODO.COMMIT", todo: ctx }))
        },
        CANCEL: {
          target: "reading",
          actions: assign({ title: ctx => ctx.prevTitle })
        }
      }
    },
    deleted: {
      onEntry: sendParent(ctx => ({ type: "TODO.DELETE", id: ctx.id }))
    }
  }
});
const createTodo = title => {
  return {
    id: uuid(),
    title: title,
    completed: false
  };
};

const todosMachine = Machine({
  id: "todos",
  context: {
    todo: "", // new todo
    todos: []
  },
  initial: "initializing",
  states: {
    initializing: {
      entry: assign({
        todos: (ctx, e) => {
          return ctx.todos.map(todo => ({
            ...todo,
            ref: spawn(todoMachine.withContext(todo))
          }));
        }
      }),
      on: {
        "": "all"
      }
    },
    all: {},
    active: {},
    completed: {}
  },
  on: {
    "NEWTODO.CHANGE": {
      actions: assign({
        todo: (ctx, e) => e.value
      })
    },
    "NEWTODO.COMMIT": {
      actions: [
        assign({
          todo: "", // clear todo
          todos: (ctx, e) => {
            const newTodo = createTodo(e.value.trim());
            return ctx.todos.concat({
              ...newTodo,
              ref: spawn(todoMachine.withContext(newTodo))
            });
          }
        }),
        "persist"
      ],
      cond: (ctx, e) => e && e.value.trim().length
    },
    "TODO.COMMIT": {
      actions: [
        assign({
          todos: (ctx, e) =>
            ctx.todos.map(todo => {
              return todo.id === e.todo.id
                ? { ...todo, ...e.todo, ref: todo.ref }
                : todo;
            })
        }),
        "persist"
      ]
    },
    "TODO.DELETE": {
      actions: [
        assign({
          todos: (ctx, e) => ctx.todos.filter(todo => todo.id !== e.id)
        }),
        "persist"
      ]
    },
    "SHOW.all": ".all",
    "SHOW.active": ".active",
    "SHOW.completed": ".completed",
    "MARK.completed": {
      actions: ctx => {
        ctx.todos.forEach(todo => todo.ref.send("SET_COMPLETED"));
      }
    },
    "MARK.active": {
      actions: ctx => {
        ctx.todos.forEach(todo => todo.ref.send("SET_ACTIVE"));
      }
    },
    CLEAR_COMPLETED: {
      actions: assign({
        todos: ctx => ctx.todos.filter(todo => !todo.completed)
      })
    }
  }
});

  
  /*const fetchMachine = Machine({
    id: 'presentedLayers',
    initial: 'idle',
    context: {
      presentedLayers: [],
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading'
        }
      },
      loading: {
        on: {
          RESOLVE: 'presented',
          REJECT: 'failure'
        }
      },
      presented: {
      },
      rendered: {
        on: {
          DISCARD_SINGLE: '',
          DISCARD_ALL: '',
          UPDATE_CONTENT: '',
          SET_VISIBILITY: ''
        }
      },
      failure: {
        type: 'final',
      }
    }
  });*/