Closed vgeorge closed 2 months ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
foodtwin-global-app | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 5, 2024 0:28am |
@oliverroick thanks for the review! I agree we need to avoid really big machine objects. Moving actions, selectors and services to separate module files will help. It should be straightforward to do it.
About testing, I believe React Testing Library might provide a good foundation for implementing test workflows. There might be some research we need to do on how to use machine context when running tests. But I'm not sure if it is necessary. Do you think we need to add tests in this PR or can we merge?
@oliverroick I'll go ahead and merge this. I believe we can work on testing separately.
This PR adds XState v5 to the Global View example to demonstrate how to use actor-based state management for a data visualization web app.
Workflow: The page loads with an empty globe view. When the user clicks on a country, a side panel is displayed and arcs to other random countries are rendered. When the user closes the panel, the view returns to the initial state.
Screen capture (low resolution, the real app is sharper):
The app loads static Natural Earth GeoJSON files to render administrative boundaries. We should explore a more efficient approach for the real app.
There is an inspector to see the machine state during app execution. It should open automatically when not in the production environment:
To browse/edit the machine, I recommend adding the XState extension for VSCode and following the instructions to open the diagram for
src/app/sandbox/globe-view/state/machine.ts
:@oliverroick @willemarcel The XState setup introduced some boilerplate code, but it helps to keep the components 'dumb,' as they contain minimal application logic. I tried to cover most of the workflows we would need to implement in XState for this app. There will be a learning curve, but I'm happy to help you through it. Please let me know your thoughts.