feat(explorer): tables viewer pagination #3426
Conversation
🦋 Changeset detectedLatest commit: ecb1118 The changes in this PR will be included in the next version bump. This PR includes changesets to release 30 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
karooolis
changed the title
karooolis
force-pushed
the
kumpis/paginate-by-offset-limit
branch
from
8256f6b to
506bbfd
Compare
karooolis
force-pushed
the
kumpis/paginate-by-offset-limit
branch
from
2fd7c66 to
d5e63db
Compare
karooolis
force-pushed
the
kumpis/paginate-by-offset-limit
branch
from
f1d2931 to
c84b9e2
Compare
| const [pagination, setPagination] = useState<PaginationState>({ | ||
| pageIndex: page, | ||
| pageSize, | ||
| }); |
There was a problem hiding this comment.
why the extra state here when the state already lives in the url? why not just use query as source of truth instead of carrying it around twicE?
There was a problem hiding this comment.
Initially I didn't like the URL query string it produced but actually it probably doesn't matter that much, and doing it like that is def nicer code, adjusted.
There was a problem hiding this comment.
share more? what was the before/after? I didn't run this myself so I can't tell (and the URL isn't shown in video)
There was a problem hiding this comment.
Now it looks like this &pagination=%7B%22pageSize%22:10,%22pageIndex%22:4%7D and before it was &page=2&pageSize=10. But I suppose it's a minor difference given most of the rest of the URL query is quite unreadable anyhow.
There was a problem hiding this comment.
ahh okay, I much prefer the nice/user friendly params
| setPage(newPageIndex); | ||
| setPageSize(newPageSize); | ||
|
|
||
| const decodedQuery = decodeURIComponent(query); |
There was a problem hiding this comment.
the thing we use for query params doesn't give it back to use decoded already?
| }; | ||
|
|
||
| export function getLimitOffset(query: string) { | ||
| const decodedQuery = decodeURIComponent(query); |
There was a problem hiding this comment.
same question as above, I am confused why this isn't already decoded
There was a problem hiding this comment.
It is but if we don't decodeURIComponent and encodeURIComponent, it loses new line characters inside the query. Found this to work reliably.
There was a problem hiding this comment.
Actually, a good time to put this into a reusable hook, added useSQLQueryState.ts
| return useQueryState( | ||
| "pagination", | ||
| parseAsJson<PaginationState>().withDefault({ | ||
| pageIndex: 0, | ||
| pageSize: defaultPageSize, | ||
| }), | ||
| ); |
There was a problem hiding this comment.
would this make sense to get nicer query params?
| return useQueryState( | |
| "pagination", | |
| parseAsJson<PaginationState>().withDefault({ | |
| pageIndex: 0, | |
| pageSize: defaultPageSize, | |
| }), | |
| ); | |
| const [page, setPage] = useQueryState("page", parseAsInteger().withDefault(0)); | |
| const [pageSize, setPageSize] = useQueryState("pageSize", parseAsInteger().withDefault(defaultPageSize)); | |
| return { page, setPage, pageSize, setPageSize }; |
Paginate explorer's table by using SQL's offset/limit clauses.
pagination.mov