React-Pond Updates

React-Pond

Use the Actyx Pond framework fully integrated into React. Expand your toolchain with <Pond>, useFish, useFishFn, useRegistryFish, and usePond to speed up your UI projects and write distributed apps in a couple of hours.

TL;DR;

:package: Installation

React-Pond is available as a npm package.

npm install @actyx-contrib/react-pond

:open_book: Documentation and detailed examples

You can access the full API documentation and related examples by visiting: https://actyx-contrib.github.io/react-pond

You will find detailed examples here. They can be executed running e.g. `npm run example:chatRoom’.

:nerd_face: Quick start

:ocean: <Pond>...</Pond>

Wrap your application with the <Pond> to use you fish everywhere in the code.

Example

ReactDOM.render(
  <Pond
    onError={() => {
      setTimeout(() => location.reload(), 5000)
      return <div>Connection to Actyx rejected: {JSON.stringify(e)}. Next reconnect in 5 seconds.</div>
    }}
  >
    <AmazingDistributedApp />
  </Pond>,
  document.getElementById('root')!,
)

:fish: useFish and useFishFn

Write your distributed logic with the well-known fish and get the state as easily as possible.

  • useFish(fish): Hydrate one explicit fish without a factory
  • useFishFn(fishFactory, properties): Use a factory function to hydrate fish with properties

:open_book: Example

const MaterialRequest = ({ id }: Props) => {
  const allOpenMatReq = useFish(MatRequest.allOpen)
  const matReq = useFishFn(MatRequest.of, id)

  return (
    <div>
      <div>Open Material Requests: {allOpenMatReq.ids.length}</div>
      <div>
        Material Request ({id}): {matReq.state.status}
      </div>
      <button
        onClick={() =>
          matReq.run((_state, enqueue) => enqueue(Tag('material').withId(id), EventType.Done))
        }
      >
        Done
      </button>
    </div>
  )
}

:flags: useRegistryFish

Map your registry fish to the entities and create tables, lists, complex autocomplete fields, …

:open_book: Example

const MaterialRequests = () => {
  const allOpenMatReq = useRegistryFish(MatRequest.allOpen, reg => reg.ids, MatRequestFish.of)

  const done = (matReq: ReactFish<State, Events, string>) => {
    matReq.run((_state, enqueue) => enqueue(Tag('material').withId(matReq.props), EventType.Done))
  }

  return (
    <div>
      <div>Open Material Requests: {allOpenMatReq.length}</div>
      {allOpenMatReq.map(matReq => (
        <div key={matReq.props}>
          <div>
            {matReq.props}: {matReq.state.status}
          </div>
          <button onClick={() => done(matReq)}>Done</button>
        </div>
      ))}
    </div>
  )
}

:ocean: usePond

The pond is not hidden from you. Use it as usual with const pond = usePond().

:open_book: Example

const Example = () => {
  const pond = usePond()
  const [nodeConnectivity, setNodeConnectivity] = React.useState<ConnectivityStatus>()
  React.useEffect(() => {
    pond.getNodeConnectivity({ callback: setNodeConnectivity })
  }, [])

  return <div>
    <div>{JSON.stringify(nodeConnectivity)}</div>
  </div>
}
1 Like

Today we also like to announce the new update to version 2.1.0

Changelog:

  • Add PondOptions to <Pond> HTML-Tag.
  • Pond logs a warning if Pond.onError-handler is missing.
  • Pond.onError-handler optional returns an JSX.Element for visual feedback.

Details:

PondOptions

After adding the PondOptions, you can configure the underlying pond exactly as you can do without the ‘React wrapper’. Check out the pond documentation to get an overview of all available options.

Pond.onError

It appears that users ignore the onError-handler in here applications.
During the development phase on the local machine, most of us do not face any issue with actyx. Actyx is up and running the whole day. But it could be essential if your app gets installed at a factory and it turns out that the startup process takes longer than expected or failed for some reasons.

With this update, you will see a warning if the integration of an onError-Handler is missing, and you can return a JSX.Element in your handler. Still, you cloud do this manually, but it should be much easier now.


Questions / Improvement:

If you have any suggestions to improve this community package, please feel free to contribute to GitHub - actyx-contrib/react-pond: Intuitive integration of Actyx Pond into React or open an issue.

Happy hacking and feedback is very welcome