116. Implement application overview card and table #125
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
dandheedge
force-pushed
the
feature/116-implement-application-overview-card-and-table
branch
from
05f95d8
to
a399d1e
Compare
| variables: { | ||
| orderBy: ApplicationOrderByInput.IdAsc, | ||
| limit: 20, | ||
| after: "1", |
There was a problem hiding this comment.
Do we need the after variable here? This will get applications after the first one. Also, I see that on sepolia, certain owners (like 0xf05d57a5bed2d1b529c56001fc5810cc9afc0335) have more than 20 applications:
I think we'll need pagination for the UserApplicationsTable component.
There was a problem hiding this comment.
Another thing that I noticed but I'm not sure if it's something we should address is that on sunodo-generated dapp, the explorer api graphql (at http://localhost:8080/explorer-api/graphql) and ApplicationsConnection query doesn't support the timestamp field. So, in this case I'm getting a 400 error with message:
"Cannot query field \"timestamp\" on type \"Application\"."
Here's a screenshot:
And here's the same but on sepolia:
There was a problem hiding this comment.
Do we need the
aftervariable here? This will get applications after the first one. Also, I see that on sepolia, certain owners (like0xf05d57a5bed2d1b529c56001fc5810cc9afc0335) have more than20applications:
I think we'll need pagination for the
UserApplicationsTablecomponent.
@nevendyulgerov, initially, I want to keep it simple just to display the 20 applications a user has. Do you think we need another pagination component for UserApplicationsTable, or can we display all the data at once? My concern with adding another pagination component is that the query parameters might become bloated.
There was a problem hiding this comment.
Another thing that I noticed but I'm not sure if it's something we should address is that on sunodo-generated dapp, the explorer api graphql (at http://localhost:8080/explorer-api/graphql) and ApplicationsConnection query doesn't support the timestamp field. So, in this case I'm getting a 400 error with message:
The rollups-explorer (UI and API) docker images available are probably old, but they work together. The latest ones (0.9.0 and 0.4.0) are merged on Sunodo's base code, but I am not sure if they have already released the new version, 0.11.0. So using a local dev rollups-explorer running in parallel with sunodo-cli (i.e. sunodo run) you may have expected troubles. Here is what I do, if you are on a Mac and installed Sunodo-cli using homebrew you can go to /opt/homebrew/Cellar/sunodo/SUNODO_VERSION_HERE/libexec/lib/node_modules/@sunodo/cli/dist/node/docker-compose-explorer.yaml and replace the tags for API and UI. In the rollups-explorer project's root you can do a docker buildx bake that will build a cartesi/rollups-explorer tag devel so you can add that tag in the Sunodo docker-compose file I mentioned and you have the "dev" version running if that is necessary.
@nevendyulgerov, initially, I want to keep it simple just to display the 20 applications a user has. Do you think we need another pagination component for UserApplicationsTable, or can we display all the data at once? My concern with adding another pagination component is that the query parameters might become bloated.
@dandheedge, Let me add two cents here. This is a list displayed "temporarily" i.e. only related to the account address of the connected wallet, so without a connected wallet it should not have a list to show. Nevertheless, pagination is important.
that said:
- What would be the pros/cons of having the pagination tracked by the query-params?
- What would be the pros/cons of having the pagination not tracked on the query-params but only in its own local component/hook?
- Why would you choose one over another?
There was a problem hiding this comment.
The rollups-explorer (UI and API) docker images available are probably old, but they work together. The latest ones (0.9.0 and 0.4.0) are merged on Sunodo's base code, but I am not sure if they have already released the new version,
0.11.0. So using a local dev rollups-explorer running in parallel with sunodo-cli (i.e. sunodo run) you may have expected troubles. Here is what I do, if you are on a Mac and installed Sunodo-cli usinghomebrewyou can go to/opt/homebrew/Cellar/sunodo/SUNODO_VERSION_HERE/libexec/lib/node_modules/@sunodo/cli/dist/node/docker-compose-explorer.yamland replace the tags for API and UI. In the rollups-explorer project's root you can do adocker buildx bakethat will build acartesi/rollups-explorertagdevelso you can add that tag in the Sunodo docker-compose file I mentioned and you have the "dev" version running if that is necessary.
@brunomenezes here are my thoughts on your question:
Pagination Tracked by Query-Params
Pros
- Users can bookmark or share URLs that maintain the state of the application.
Cons
- In the
/applicationspage, the page already have the query-params for All Applications table. Adding more pagination with tracked query-params will increase the complexity on the url and the state handling as well.
Pagination With Local Hook
Pros
- Simplifies state management within the component and results in a cleaner URL.
- Stake Application has already implemented this method, suggesting it is a reliable approach.
Cons
- Users cannot bookmark or share URLs that preserve the application's state.
I prefer using a local hook for pagination since the table only displays data related to the user's connected address, avoiding unnecessary complexity.
There was a problem hiding this comment.
Nice work so far on this task, @dandheedge . I think we need to address some issues with the data for user-owned applications.
| <Table.Td> | ||
| <Tooltip label="Inputs"> | ||
| <Link | ||
| href={`/applications/${appId}`} |
There was a problem hiding this comment.
@dandheedge, I saw you rebase and have Neven's latest code changes related to the App's inputs. This link needs to be updated accordingly.
dandheedge
force-pushed
the
feature/116-implement-application-overview-card-and-table
branch
from
1a28b8e
to
6881488
Compare
brunomenezes
deleted the
feature/116-implement-application-overview-card-and-table
branch
Close #116