App.tsx

import { useFishFn, usePond, useRegistryFish } from '@actyx-contrib/react-pond'
import * as React from 'react'
import { MachineFish } from '../fish'
import { MaterialRequestFish } from '../fish/materialRequestFish'

export const App = (): JSX.Element => {
  const registry = useFishFn(MaterialRequestFish.registry, 1)
  const allActiveMaterialReqs = useRegistryFish(MaterialRequestFish.registry(), Object.keys, MaterialRequestFish.of)
  const pond = usePond()

  const orderCompleted = () => {
    pond.emit(MachineFish.tags.machine, {
      eventType: 'finished',
      machine: 'Machine 42',
      order: {
        duration: 42,
        machine: 'Machine 42',
        name: 'order ' + Math.random().toFixed(4)
      }
    })
  }

  const start = (id: string) => () => {
    pond.emit(MaterialRequestFish.tags.materialReqTag.withId(id)
      .and(MaterialRequestFish.tags.materialReqAssignedTag), {
      eventType: 'forkliftMoveReqAssigned',
      forkliftId: 'foo',
      orderId: id
    })
  }
  const complete = (id: string) => () => {
    pond.emit(MaterialRequestFish.tags.materialReqTag.withId(id), {
      eventType: 'forkliftMoveRequestDone',
      forkliftId: 'foo',
      orderId: id
    })
  }

  return (
    <div style={{ margin: '120px auto', width: 400 }}>
      <button onClick={orderCompleted}>orderCompleted</button>
      {  allActiveMaterialReqs.map(e => {
        return (
          <div key={e.state.orderId}>
            {JSON.stringify(e)}
            {e.state.state === 'open' && <button onClick={start(e.props)}>start</button>}
            {e.state.state === 'assigned' && <button onClick={complete(e.props)}>complete</button>
            }
          </div>)
      })}
    </div>
  )
}

materialRequestFish.ts

import { Fish, FishId, Tag } from '@actyx/pond'
import { MachineFish, Event as MachineFishEvent } from '../fish/machineFish'

// State
type UndefinedState = {
    state: 'undefined'
    orderId: string
}

type OpenState = {
    state: 'open'
    orderId: string
    machineId: string
}

type AssignedState = {
    state: 'assigned'
    orderId: string
    machineId: string
    forkliftId: string
}

type DoneState = {
    state: 'done'
    orderId: string
    machineId: string
    forkliftId: string
}

export type State = UndefinedState | OpenState | AssignedState | DoneState


// Events
type ForkliftMoveReqAssignedEvent = {
    eventType: 'forkliftMoveReqAssigned'
    orderId: string
    forkliftId: string
}

type ForkliftMoveRequestDoneEvent = {
    eventType: 'forkliftMoveRequestDone'
    orderId: string
    forkliftId: string
}

export type Event = ForkliftMoveReqAssignedEvent | ForkliftMoveRequestDoneEvent

type FishEvents = MachineFishEvent | Event

const materialReqTag = Tag<Event>('MaterialReq')
const materialReqAssignedTag = Tag<ForkliftMoveReqAssignedEvent>('MaterialRrq.assigned')

export const MaterialRequestFish = {
    tags: {
        materialReqTag,
        materialReqAssignedTag
    },
    of: (id: string): Fish<State, FishEvents> => ({
        fishId: FishId.of('MaterialRequestFish', id, 0),
        initialState: {
            state: 'undefined',
            orderId: id
        },
        where: materialReqTag.withId(id).or(MachineFish.tags.machine),
        onEvent: (state, event) => {
            switch (event.eventType) {
                case 'finished': {
                    if (event.order.name === id) {
                        return {
                            state: 'open',
                            machineId: event.machine,
                            orderId: state.orderId,
                        }
                    } else {
                        return state
                    }
                }
                case 'forkliftMoveReqAssigned': {
                    if (state.state === 'open') {
                        return {
                            state: 'assigned',
                            machineId: state.machineId,
                            orderId: state.orderId,
                            forkliftId: event.forkliftId
                        }
                    } else {
                        return state
                    }
                }
                case 'forkliftMoveRequestDone': { 
                    if(state.state === 'assigned') {
                        return {
                            state: 'done',
                            machineId: state.machineId,
                            orderId: state.orderId,
                            forkliftId: state.forkliftId
                        }
                    }
                    else {
                        return state
                    }
                }
            }
            return state
        }
    }),
    registry: (): Fish<Record<string,boolean>, ForkliftMoveReqAssignedEvent | MachineFishEvent > => ({
        fishId: FishId.of('MachineFishRegistry','registry',0),
        initialState: {},
        where: materialReqAssignedTag.or(MachineFish.tags.machine),
        onEvent: (state, event) => {
            switch(event.eventType) {
                case 'finished': {
                    state[event.order.name] = true
                    return state
                }
                /*
                case 'forkliftMoveReqAssigned': {
                    delete state[event.orderId]
                    return state
                }
                */
            }
            return state
        }
    })
}