30:[] 2e:{"title":"Steps","cells":[{"id":0,"value":"md`# Steps`","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"TYPES = ({\n text: step => {\n return jsx`

${step.title}

`;\n },\n START: () => {},\n END: () => {},\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"suppliers = [\n {\n id: 0,\n title: 'ING',\n steps: [\n { id: 5, type: TYPES.start, next: () => 4 },\n {\n id: 4,\n type: TYPES.text,\n title: 'Something something ING',\n next: () => 8\n },\n { id: 8, type: TYPES.END }\n ]\n },\n {\n id: 1,\n title: 'ABN AMRO',\n steps: [\n { id: 5, type: TYPES.start, next: () => 4 },\n {\n id: 4,\n type: TYPES.text,\n title: 'Something something ABN',\n next: () => 8\n },\n { id: 8, type: TYPES.END }\n ]\n },\n {\n id: 2,\n title: 'BUNQ',\n steps: [\n { id: 5, type: TYPES.start, next: () => 4 },\n {\n id: 4,\n type: TYPES.text,\n title: 'Something something BUNQ',\n next: () => 8\n },\n { id: 8, type: TYPES.END }\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"steps = [\n { id: 10, type: TYPES.START, next: () => 0 },\n { id: 0, title: 'First step', type: TYPES.text, next: () => 1 },\n { id: 1, title: 'Second step', type: TYPES.text, next: () => 2 },\n { id: 2, title: 'Third step', type: TYPES.text, next: () => 3 },\n { id: 3, type: TYPES.END }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"function goto_step(context, id) {\n let step = context.steps.find(x => x.id === id);\n if (step.type === TYPES.START) {\n return goto_step(context, step.next());\n }\n if (step.type === TYPES.END) {\n return null;\n }\n return step;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"mutable current_step = goto_step(\n { steps },\n steps.find(x => x.type === TYPES.START).id\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"mutable log = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"Step = ({ step, onNext }) => {\n let [stepResult, set_stepResult] = React.useState({});\n return jsx`\n

\n ${step.type(step)}\n {\n onNext(stepResult);\n }}\n >Next\n

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"render(\n current_step != null\n ? jsx`\n

\n <${Step}\n step=${current_step}\n onNext=${result => {\n mutable log.push({ step: current_step, result });\n mutable current_step = goto_step(\n { steps },\n current_step.next(result)\n );\n }}\n />\n

\n `\n : jsx`

DONE

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import { React, jsx, render } from \"@dralletje/react-x-observable\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}