ApeWorX / ApePay

A smart contract payment system built for automated service management
https://apeworx.io/apepay
Apache License 2.0
18 stars 5 forks source link

feat: implement routing in the demo app [SBK-362] #75

Closed alexisnsns closed 8 months ago

alexisnsns commented 8 months ago

Following @fubuloubu suggestion:

/{StreamManager-address} - display all streams for a particular stream manager address (and load new ones as created), add filter params to filter down streams

/{StreamManager-address}/{creator-address} - display all streams for a particular stream manager, by a particular creator (same as above, load new ones as they come in and add filter params)

/{StreamManager-address}/create - Create a new Stream, re-route to detail view once created (using registerStream prop)

/{StreamManager-address}/{creator-address}/{stream-id} - display the details of a particular stream

Implemented these routes so that there is now a separation of concerns, not everything is done on the main page; an outsider can understand the streamManager/creator/stream logic more easily now; React components are used in only one file now so that it is easier to make sense of their logic.

linear[bot] commented 8 months ago
SBK-362 "Feat: implement routing in the demo app" (ApeWorX/ApePay #75)

Following fubuloubu suggestion: ``` /{StreamManager-address} - display all streams for a particular stream manager address (and load new ones as created), add filter params to filter down streams /{StreamManager-address}/{creator-address} - display all streams for a particular stream manager, by a particular creator (same as above, load new ones as they come in and add filter params) /{StreamManager-address}/create - Create a new Stream, re-route to detail view once created (using registerStream prop) /{StreamManager-address}/{creator-address}/{stream-id} - display the details of a particular stream ``` --- [ApeWorX/ApePay #75](https://github.com/ApeWorX/ApePay/pull/75) by [alexisnsns](https://github.com/alexisnsns) on GitHub *via LinearSync*

alexisnsns commented 8 months ago

@fubuloubu as this PR is mostly about routing and UI, here is a quick overview if you don't want to test it locally:

on /{StreamManager-address}, you can see all the streams of a specific streamManager, filtered by creator; you can then click on a creator to see its streams, or directly on a stream if you know what you're looking for, or click on a button to create a new stream with this streamManager:

Screenshot 2023-11-17 at 18 34 59

Then if you click on a creator you'll see all his streams on a given streamManager; also I added their status so that we can find more easily the active streams ( /{StreamManager-address}/{creator-address}:

Screenshot 2023-11-17 at 18 39 00

Then you can display the details of a particular stream (/{StreamManager-address}/{creator-address}/{stream-id})

Screenshot 2023-11-17 at 18 34 47

otherwise from the streamManager page you have a button to create a stream (/{StreamManager-address}/create):

Screenshot 2023-11-17 at 18 44 21

As mentioned in the PR comment, this makes the code more readable as there is now a clearer separation of concerns in the demo app. It's much easier to maintain and build on top of it now.