Add pagination to NewChatPage #88452
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import {useState} from 'react'; | ||
|
|
||
| type UsePaginatedDataConfig = { | ||
| /** When this value changes, pagination resets to the first page. */ | ||
| resetKey?: string; | ||
|
|
||
| /** When true, returns `data` as-is with `hasMore: false` and a no-op `loadMore`. */ | ||
| skipPagination?: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * Client-side bounded-slice pagination. | ||
| * | ||
| * Returns the first `pageSize * currentPage` items of `data`, plus `loadMore` to advance a page and | ||
| * `hasMore` to indicate whether more items are available. `currentPage` is reset to 1 whenever | ||
| * `resetKey` changes, so callers can tie the page back to a logical context (e.g. a search query). | ||
| */ | ||
| function usePaginatedData<T>( | ||
| data: T[], | ||
| pageSize: number, | ||
| {resetKey = '', skipPagination = false}: UsePaginatedDataConfig = {}, | ||
| ): { | ||
| paginatedData: T[]; | ||
| loadMore: () => void; | ||
| hasMore: boolean; | ||
| } { | ||
| const [prevResetKey, setPrevResetKey] = useState(resetKey); | ||
| const [currentPage, setCurrentPage] = useState(1); | ||
|
|
||
| if (resetKey !== prevResetKey) { | ||
| setPrevResetKey(resetKey); | ||
| setCurrentPage(1); | ||
| } | ||
|
|
||
| if (skipPagination) { | ||
| return {paginatedData: data, loadMore: () => {}, hasMore: false}; | ||
| } | ||
|
|
||
| if (pageSize < 1) { | ||
| return {paginatedData: [], loadMore: () => {}, hasMore: false}; | ||
| } | ||
|
Comment on lines
+35
to
+41
Contributor
There was a problem hiding this comment. Could these early returns can go above the
Contributor
Author
There was a problem hiding this comment. at first, after reading this question, I though it would be better to move it down. But actually it needs to stay in place. Example: If we move the condition down, the change in resetKey would go unnoticed; the pagination would not reset to the first page. |
||
|
|
||
| const limit = pageSize * currentPage; | ||
| const paginatedData = data.slice(0, limit); | ||
| const hasMore = data.length > limit; | ||
|
sharabai marked this conversation as resolved.
|
||
|
|
||
| const loadMore = () => { | ||
| if (!hasMore) { | ||
| return; | ||
| } | ||
| setCurrentPage((prev) => prev + 1); | ||
| }; | ||
|
|
||
| return {paginatedData, loadMore, hasMore}; | ||
| } | ||
|
|
||
| export default usePaginatedData; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When
resetKeychanges after the user has already loaded multiple pages, this hook queuessetCurrentPage(1)but still computeslimitfrom the previouscurrentPagein the same render. That means one render returns too many rows for the new context (for example, after changing the search term), which can briefly show stale pagination and trigger extraonEndReachedwork before the next render corrects it.Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When you call the set function during render, React will re-render that component immediately after your component exits with a return statement, and before rendering the children.