Skip to content

Instantly share code, notes, and snippets.

@jamestharpe
Last active December 28, 2020 19:22
Show Gist options
  • Save jamestharpe/ca85b3f84563965a9f83c172ed1a07e6 to your computer and use it in GitHub Desktop.
Save jamestharpe/ca85b3f84563965a9f83c172ed1a07e6 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const GradeTransitions = {
REGULAR: "regular",
PLUS: "plus",
PREMIUM: "premium"
};
const fetchMachine =Machine({
id: "grade",
initial: "none",
states: {
none: {
on: GradeTransitions
},
regular: {
on: GradeTransitions
},
plus: {
on: GradeTransitions
},
premium: {
on: GradeTransitions
}
}
});
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const context = {
credit: 0,
costPerGallon: 0
};
const fetchMachine = Machine({
id: "pump",
initial: "notReady",
context,
states: {
notReady: {
type: "parallel",
states: {
credit: {
initial: "waiting",
states: {
waiting: {
on: {
APPLY_CREDIT: "received"
}
},
received: {
type: "final"
}
}
},
cost: {
initial: "waiting",
states: {
waiting: {
on: {
SET_COST: "received"
}
},
received: {
type: "final"
}
}
},
docked: {
initial: "inCar",
states: {
inPump: {
on: {
INSERT: "inCar"
}
},
inCar: {
type: "final",
on: {
RETRACT: "inPump"
}
}
}
}
},
onDone: "ready"
},
ready: {
on: {
PUMP: "pumping"
}
},
pumping: {
on: { STOP: "done" }
},
done: {
type: "final"
}
}
});
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const context = {
amount: 0,
err: ""
};
const fetchMachine = Machine(
{
id: "payment",
initial: "idle",
context,
states: {
idle: {
on: { SUBMIT: "processing" }
},
processing: {
invoke: {
id: "process",
src: (context, event) => {
return new Promise((resolve, reject) => {
console.log("payment => processing", context, event);
if (!context) return reject("No context provided");
const { amount } = event;
if (amount <= 0) {
return reject("Cannot charge less than $0");
}
if (amount <= 10) {
return resolve(event.amount);
}
resolve(0);
});
},
onDone: {
target: "processed",
actions: assign({
amount: (context, event) => {
console.log("payment => processing, done", context, event);
return event.data;
}
})
},
onError: {
target: "error",
actions: assign({
err: (context, event) => {
console.log("payment => processing, err", context, event);
return event.data;
}
})
}
}
},
processed: {
on: { "": [
{
target: "accepted",
cond: "amountIsOver0"
},
{
target: "rejected"
}
] }
},
accepted: {
type: "final"
},
rejected: {
type: "final"
},
error: {
on: {
RETRY: "idle",
CANCEL: "rejected"
}
}
}
},
{
guards: {
amountIsOver0: (context, event) => {
console.log("payment => amountIsOver0", context, event);
return context.amount > 0;
},
amountIs0: (context, event) => {
console.log("payment => amountIs0", context, event);
return context.amount === 0;
}
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment