C-3PFLO / flow-story

0 stars 0 forks source link

State #10

Open C-3PFLO opened 1 year ago

C-3PFLO commented 1 year ago

Client-side state implementation, up to the point of the FCL requests

Review patterns in https://github.com/onflow/kitty-items/tree/master/web/src, but consider keeping Redux for state

C-3PFLO commented 1 year ago

Try doing everything with hooks instead of a separate redux implementation. Maybe more complex apps will still need redux, but use this simpler app to get a feel doing things just with hooks.

most uses of React hooks should be encapsulated in a custom hook

https://kyleshevlin.com/use-encapsulation

how many of the hooks end up being project-agnostic like logging in, checking account info, getting collection info, etc? Can these be bundled into an npm package like fcl-hooks?

Anything in here also needed in our all is a good bet to be commonly needed:

https://github.com/onflow/kitty-items/tree/master/web/src/hooks

C-3PFLO commented 1 year ago

Any state shared across components should follow this useContext pattern with custom hooks

https://youtu.be/5LrDIWkK_Bc

C-3PFLO commented 1 year ago

Looks like someone made it: https://www.npmjs.com/package/@onflow/fcl-react/v/0.0.0

but it’s 0.0.0 and has 0 downloads?

UPDATE: asked in discord and they marked it as deprecated.

but this one was approved for a grant: https://github.com/maggo/use-flow

C-3PFLO commented 1 year ago

If using context (app or account?) need to handle re-rendering of children. See here: https://youtu.be/CDGBTjMBJzg

C-3PFLO commented 1 year ago

https://github.com/testing-library/react-hooks-testing-library

C-3PFLO commented 1 year ago

Use react query: https://github.com/TanStack/query

https://youtu.be/seU46c6Jz7E

https://youtu.be/lVLz_ASqAio

C-3PFLO commented 1 year ago

Error handling: https://tkdodo.eu/blog/react-query-error-handling#putting-it-all-together

C-3PFLO commented 1 year ago

https://martinfowler.com/articles/modularizing-react-apps.html