Fixes #115 : Pagination is added via load more button #211
Conversation
|
@madhav-relish is attempting to deploy a commit to the Inbox Zero Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent updates enhance the Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- apps/web/app/(app)/mail/page.tsx (3 hunks)
- apps/web/components/email-list/EmailList.tsx (4 hunks)
Additional context used
Biome
apps/web/app/(app)/mail/page.tsx
[error] 91-91: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 117-117: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
apps/web/components/email-list/EmailList.tsx
[error] 45-45: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 173-173: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
Additional comments not posted (5)
apps/web/app/(app)/mail/page.tsx (3)
3-3: Imports look good.The new imports for
useCallback,useEffect,useState, anduseSWRare appropriate for managing state and data fetching.
31-34: State management enhancements are appropriate.The new state variables
allThreads,nextPageTokenId, andisLoadMoreLoadingare well-suited for implementing the "load more" feature.
76-81: useEffect implementation is effective.The
useEffecthook correctly updates the state variables whendatachanges, ensuring the component reflects the latest email threads and pagination token.apps/web/components/email-list/EmailList.tsx (2)
36-37: Imports are appropriate.The new imports for
ButtonandButtonLoaderare necessary for implementing the "load more" button functionality.
495-513: Rendering logic for Load More button is effective.The conditional rendering and loading feedback for the "Load More" button are well-implemented, enhancing user interaction.
apps/web/app/(app)/mail/page.tsx
Outdated
| {allThreads && ( | ||
| <List | ||
| emails={data.threads} | ||
| emails={allThreads} | ||
| refetch={refetch} | ||
| type={searchParams.type} | ||
| isLoadMore={nextPageTokenId ? true : false} // If nextPageToken doesn't exist then the button will be hidden | ||
| handleLoadMoreThreads={handleLoadMoreThreads} | ||
| isLoadMoreLoading={isLoadMoreLoading} |
There was a problem hiding this comment.
Simplify the conditional expression for isLoadMore.
The ternary operator is unnecessary here. You can directly use the truthy value of nextPageTokenId.
- isLoadMore={nextPageTokenId ? true : false}
+ isLoadMore={!!nextPageTokenId}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {allThreads && ( | |
| <List | |
| emails={data.threads} | |
| emails={allThreads} | |
| refetch={refetch} | |
| type={searchParams.type} | |
| isLoadMore={nextPageTokenId ? true : false} // If nextPageToken doesn't exist then the button will be hidden | |
| handleLoadMoreThreads={handleLoadMoreThreads} | |
| isLoadMoreLoading={isLoadMoreLoading} | |
| {allThreads && ( | |
| <List | |
| emails={allThreads} | |
| refetch={refetch} | |
| type={searchParams.type} | |
| isLoadMore={!!nextPageTokenId} // If nextPageToken doesn't exist then the button will be hidden | |
| handleLoadMoreThreads={handleLoadMoreThreads} | |
| isLoadMoreLoading={isLoadMoreLoading} |
Tools
Biome
[error] 117-117: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
apps/web/app/(app)/mail/page.tsx
Outdated
| const handleLoadMoreThreads = async () => { | ||
| if (!nextPageTokenId) return; | ||
| setIsLoadMoreLoading(true); | ||
| mutate( | ||
| async (currentData) => { | ||
| const res = await fetch( | ||
| `/api/google/threads?nextPageToken=${nextPageTokenId}&${new URLSearchParams( | ||
| query as any, | ||
| ).toString()}`, | ||
| ); | ||
| const newData: ThreadsResponse = await res.json(); | ||
|
|
||
| // update the threads and nextPageToken | ||
| return { | ||
| threads: [...(currentData?.threads || []), ...newData.threads], | ||
| nextPageToken: newData.nextPageToken, | ||
| }; | ||
| }, | ||
| { revalidate: false }, | ||
| ).finally(() => setIsLoadMoreLoading(false)); | ||
| }; |
There was a problem hiding this comment.
Consider refining the any type usage.
The handleLoadMoreThreads function is well-implemented for fetching additional threads. However, using any for query type should be avoided for better type safety.
- new URLSearchParams(query as any).toString()
+ new URLSearchParams(query as Record<string, string>).toString()Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleLoadMoreThreads = async () => { | |
| if (!nextPageTokenId) return; | |
| setIsLoadMoreLoading(true); | |
| mutate( | |
| async (currentData) => { | |
| const res = await fetch( | |
| `/api/google/threads?nextPageToken=${nextPageTokenId}&${new URLSearchParams( | |
| query as any, | |
| ).toString()}`, | |
| ); | |
| const newData: ThreadsResponse = await res.json(); | |
| // update the threads and nextPageToken | |
| return { | |
| threads: [...(currentData?.threads || []), ...newData.threads], | |
| nextPageToken: newData.nextPageToken, | |
| }; | |
| }, | |
| { revalidate: false }, | |
| ).finally(() => setIsLoadMoreLoading(false)); | |
| }; | |
| const handleLoadMoreThreads = async () => { | |
| if (!nextPageTokenId) return; | |
| setIsLoadMoreLoading(true); | |
| mutate( | |
| async (currentData) => { | |
| const res = await fetch( | |
| `/api/google/threads?nextPageToken=${nextPageTokenId}&${new URLSearchParams( | |
| query as Record<string, string>, | |
| ).toString()}`, | |
| ); | |
| const newData: ThreadsResponse = await res.json(); | |
| // update the threads and nextPageToken | |
| return { | |
| threads: [...(currentData?.threads || []), ...newData.threads], | |
| nextPageToken: newData.nextPageToken, | |
| }; | |
| }, | |
| { revalidate: false }, | |
| ).finally(() => setIsLoadMoreLoading(false)); | |
| }; |
Tools
Biome
[error] 91-91: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
| isLoadMore?: boolean; | ||
| isLoadMoreLoading?: boolean; | ||
| handleLoadMoreThreads?: () => {}; |
There was a problem hiding this comment.
Refine the type for handleLoadMoreThreads.
Avoid using {} as a type. Specify a more precise type for handleLoadMoreThreads.
- handleLoadMoreThreads?: () => {};
+ handleLoadMoreThreads?: () => void;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| isLoadMore?: boolean; | |
| isLoadMoreLoading?: boolean; | |
| handleLoadMoreThreads?: () => {}; | |
| isLoadMore?: boolean; | |
| isLoadMoreLoading?: boolean; | |
| handleLoadMoreThreads?: () => void; |
Tools
Biome
[error] 173-173: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| isLoadMore?: boolean; | ||
| isLoadMoreLoading?: boolean; | ||
| handleLoadMoreThreads?: () => {}; |
There was a problem hiding this comment.
Refine the type for handleLoadMoreThreads.
Avoid using {} as a type. Specify a more precise type for handleLoadMoreThreads.
- handleLoadMoreThreads?: () => {};
+ handleLoadMoreThreads?: () => void;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| isLoadMore?: boolean; | |
| isLoadMoreLoading?: boolean; | |
| handleLoadMoreThreads?: () => {}; | |
| isLoadMore?: boolean; | |
| isLoadMoreLoading?: boolean; | |
| handleLoadMoreThreads?: () => void; |
Tools
Biome
[error] 45-45: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- apps/web/app/(app)/mail/page.tsx (3 hunks)
- apps/web/components/email-list/EmailList.tsx (4 hunks)
Files skipped from review as they are similar to previous changes (2)
- apps/web/app/(app)/mail/page.tsx
- apps/web/components/email-list/EmailList.tsx
- changed the refetch logic - Replaced useSwr with useSWRInfinite for pagination - Changed the variable names - All the features, delete, archieve, bulk delete etc works fine now - On performing any action the page doesn't move back to the 1st page - On delete now refetch happens properly
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/web/app/(app)/mail/page.tsx (2 hunks)
- apps/web/components/ActionButtons.tsx (2 hunks)
- apps/web/components/email-list/EmailList.tsx (4 hunks)
Additional context used
Biome
apps/web/app/(app)/mail/page.tsx
[error] 30-30: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
[error] 32-32: Unexpected any. Specify a different type.
any disables many type checking rules. Its use should be avoided.
(lint/suspicious/noExplicitAny)
Additional comments not posted (10)
apps/web/components/ActionButtons.tsx (2)
23-23: LGTM!The updated
refetchfunction signature, which now accepts an optionalthreadIdparameter, aligns well with the PR objectives of implementing pagination functionality. This change enhances the flexibility of therefetchfunction by allowing it to potentially target a specific thread when fetching additional data.
51-51: LGTM!Updating the
onTrashcallback implementation to pass thethreadIdto therefetchfunction is a good change. It ensures that the refetch operation is contextually aware of which thread is being referenced, making it more precise and relevant to the current action being performed. This change aligns well with the PR objectives of implementing pagination functionality.apps/web/app/(app)/mail/page.tsx (6)
4-4: LGTM!The import statement for
useSWRInfiniteis correct and necessary for implementing the pagination feature.
35-40: LGTM!The usage of
useSWRInfinitewith thegetKeyfunction and the provided options is correct and necessary for implementing the pagination feature.
42-45: LGTM!The logic for defining
allThreads,isLoadingMore, andshowLoadMoreis correct and necessary for rendering the email threads and handling the loading state.
47-70: LGTM!The implementation of the
refetchfunction for refreshing the email list upon archive is correct and necessary. The optimistic update of the cached data by filtering out removed thread IDs is a good approach. The usage of themutatefunction with a simpler structure improves clarity and efficiency.
79-81: LGTM!The implementation of the
handleLoadMorefunction for incrementing thesizestate by 1 is correct and necessary for loading more email threads when the "load more" button is clicked.
88-96: LGTM!The usage of the
LoadingContentcomponent for handling the loading and error states is correct. The rendering of theListcomponent with the flattened array of all threads and additional props for pagination is also correct and necessary for displaying the email threads.apps/web/components/email-list/EmailList.tsx (2)
36-49: LGTM!The changes to the
Listfunction look good. The new props are correctly added to support the load more feature, and the destructuring is updated accordingly. The prop names are descriptive and follow the naming conventions.
Line range hint
167-512: LGTM!The changes to the
EmailListfunction look good. The new props are correctly added to support the load more feature, and the destructuring is updated accordingly. The prop names are descriptive and follow the naming conventions.The load more button is correctly implemented with the following observations:
- The button is conditionally rendered based on the
showLoadMoreprop.- The button is disabled when the
isLoadingMoreprop is true.- The button displays a loading indicator when the
isLoadingMoreprop is true.- The button text is clear and concise.
- The button styling is consistent with the rest of the UI.
Great work on implementing the load more feature!
| const refetch = useCallback( | ||
| (removedThreadIds?: string[]) => { | ||
| mutate(undefined, { | ||
| rollbackOnError: true, | ||
| optimisticData: (currentData) => { | ||
| if (!removedThreadIds) | ||
| return { | ||
| threads: currentData?.threads || [], | ||
| nextPageToken: undefined, | ||
| }; | ||
| const threads = | ||
| currentData?.threads.filter( | ||
| mutate( | ||
| (currentData) => { | ||
| if (!currentData) return currentData; | ||
| if (!removedThreadIds) return currentData; | ||
|
|
||
| return currentData.map((page) => ({ | ||
| ...page, | ||
| threads: page.threads.filter( | ||
| (t) => !removedThreadIds.includes(t.id), | ||
| ) || []; | ||
| return { threads, nextPageToken: undefined }; | ||
| ), | ||
| })); | ||
| }, |
There was a problem hiding this comment.
Hey, I realise this was messy code before. But what's the reason the optimistic update was removed?
There was a problem hiding this comment.
But also if it works from your video, then maybe it's fine.
There was a problem hiding this comment.
Just for the simplicity of the logic and code.
apps/web/app/(app)/mail/page.tsx
Outdated
| const setRefetchEmailList = useSetAtom(refetchEmailListAtom); | ||
| useEffect(() => { | ||
| setRefetchEmailList({ refetch }); | ||
| }, [refetch, setRefetchEmailList]); | ||
|
|
||
| const handleLoadMore = () => { |
There was a problem hiding this comment.
Minor, but you can do useCallback here.
| @@ -472,6 +488,28 @@ export function EmailList(props: { | |||
| /> | |||
| ); | |||
| })} | |||
| {/* Load more button to fetch more data */} | |||
| @@ -472,6 +488,28 @@ export function EmailList(props: { | |||
| /> | |||
| ); | |||
| })} | |||
| {/* Load more button to fetch more data */} | |||
| {showLoadMore && ( | |||
| <div className="pb-2"> | |||
There was a problem hiding this comment.
styling for this button is off in your video. adding px-4 may fix this. you could also drop the wrapper div, and just do mb-2 mx-4 on the button
There was a problem hiding this comment.
Removed the wrapper div and added mb-2 for the button, mx-4 was creating overflow
| <div className="pb-2"> | ||
| <Button | ||
| variant="outline" | ||
| className="w-full py-4" |
There was a problem hiding this comment.
is py-4 needed? there's button size prop if you want to adjust sizing but not sure that's needed here
There was a problem hiding this comment.
Added size prop and removed py-4
apps/web/app/(app)/mail/page.tsx
Outdated
| if (previousPageData && !previousPageData.nextPageToken) return null; | ||
| // For the first page, use the base query | ||
| if (pageIndex === 0) | ||
| return `/api/google/threads?${new URLSearchParams(query as Record<string, string>).toString()}`; | ||
| // For subsequent pages, append the nextPageToken | ||
| return `/api/google/threads?nextPageToken=${previousPageData?.nextPageToken}&${new URLSearchParams(query as any).toString()}`; | ||
| }; |
There was a problem hiding this comment.
cleaner way to do this is without the if/else around the whole row as most of it is duplicated.
something like this:
const getKey = (pageIndex: number, previousPageData: ThreadsResponse | null) => {
if (previousPageData && !previousPageData.nextPageToken) return null;
const queryParams = new URLSearchParams(query as Record<string, string>);
if (previousPageData?.nextPageToken) {
queryParams.set('nextPageToken', previousPageData.nextPageToken);
}
return `/api/google/threads?${queryParams.toString()}`;
};…ue-115-mail-pagination
…-relish/inbox-zero into issue-115-mail-pagination
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (4)
apps/web/components/email-list/EmailList.tsx (3)
44-46: LGTM: New props for "Load More" functionality.The new props (
showLoadMore,isLoadingMore, andhandleLoadMore) are correctly added and align with the PR objectives. They provide the necessary controls for implementing the "Load More" feature.Consider grouping these related props into a single object for better maintainability:
- showLoadMore?: boolean; - isLoadingMore?: boolean; - handleLoadMore?: () => void; + loadMore?: { + show: boolean; + isLoading: boolean; + handle: () => void; + };This change would make it easier to add or modify load more related props in the future.
167-169: LGTM: Consistent prop additions to EmailList component.The new props for the "Load More" functionality are correctly added to the
EmailListcomponent, maintaining consistency with theListcomponent.For consistency with the suggested change in the
Listcomponent, consider grouping these related props:- showLoadMore?: boolean; - isLoadingMore?: boolean; - handleLoadMore?: () => void; + loadMore?: { + show: boolean; + isLoading: boolean; + handle: () => void; + };This change would improve maintainability and keep the components consistent.
491-512: LGTM: Well-implemented "Load More" button.The "Load More" button is correctly implemented with appropriate conditional rendering, loading state handling, and user feedback. This aligns well with the PR objectives.
Consider adding an
aria-labelto the button for improved accessibility:<Button variant="outline" className="mb-2 w-full" size={"sm"} disabled={isLoadingMore} + aria-label="Load more emails" > {/* ... */} </Button>This change would provide better context for screen reader users.
apps/web/app/(app)/mail/page.tsx (1)
49-50: Address the TODO comment regardingrefetchfunctionThere's a TODO comment questioning if storing
refetchin the atom is the best approach. If you'd like assistance exploring alternative solutions or improving this implementation, I can help.Would you like me to suggest alternative methods or open a new GitHub issue to track this task?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- apps/web/app/(app)/mail/page.tsx (2 hunks)
- apps/web/components/email-list/EmailList.tsx (4 hunks)
🧰 Additional context used
🪛 Biome
apps/web/app/(app)/mail/page.tsx
[error] 80-80: This hook does not specify all of its dependencies: setSize
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
(lint/correctness/useExhaustiveDependencies)
🔇 Additional comments (4)
apps/web/components/email-list/EmailList.tsx (3)
36-38: LGTM: New imports for "Load More" functionality.The new imports (
Button,ChevronsDownIcon, andButtonLoader) are correctly added and necessary for implementing the "Load More" feature.
48-49: LGTM: Correct usage and propagation of new props.The new props are correctly destructured and passed down to the
EmailListcomponent, ensuring proper propagation of the "Load More" functionality.Also applies to: 116-118
Line range hint
1-562: Overall: Excellent implementation of the "Load More" functionality.The changes in this file successfully implement the pagination feature via a "Load More" button, as described in the PR objectives. The code is well-structured, consistent, and aligns with the existing codebase. The new functionality is properly integrated into both the
ListandEmailListcomponents.A few minor suggestions were made to further improve the code:
- Grouping the new props into a single object for better maintainability.
- Adding an
aria-labelto the "Load More" button for improved accessibility.These suggestions are optional and do not detract from the overall quality of the implementation. Great job on this feature!
apps/web/app/(app)/mail/page.tsx (1)
23-34: Duplicate Comment: Consider wrappinggetKeyfunction withuseCallbackThe suggestion to wrap the
getKeyfunction withuseCallbackto memoize it and prevent unnecessary re-renders is still valid.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
@elie222 Any more changes required here? |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
apps/web/components/email-list/EmailList.tsx (1)
166-181: LGTM: "Load More" functionality implemented correctly.The
EmailListcomponent has been updated with new props and a "Load More" button, implementing the pagination feature as requested. The button is conditionally rendered and properly manages loading state.Consider adding an
aria-labelto the "Load More" button for improved accessibility:<Button variant="outline" className="mb-2 w-full" size={"sm"} disabled={isLoadingMore} + aria-label="Load more emails" > {/* ... */} </Button>Also applies to: 495-516
apps/web/app/(app)/mail/page.tsx (1)
49-52: Address the TODO: Evaluate the approach for storingrefetchin the atomThe TODO comment indicates uncertainty about using an atom to store the
refetchfunction. Storing functions in atoms can lead to potential issues such as unnecessary re-renders or stale closures.Consider alternative approaches:
- Use Context API: Utilize React's Context API to provide the
refetchfunction to components that require it without prop drilling.- Custom Hook: Create a custom hook that encapsulates the
refetchlogic, allowing components to access it as needed.- Event Emitter: Implement an event emitter or a Pub/Sub pattern to trigger refetch operations across components.
Would you like assistance in refactoring this implementation to enhance maintainability and adhere to best practices?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- apps/web/app/(app)/mail/page.tsx (2 hunks)
- apps/web/components/email-list/EmailList.tsx (7 hunks)
🧰 Additional context used
🔇 Additional comments (4)
apps/web/components/email-list/EmailList.tsx (4)
36-38: LGTM: New imports for "Load More" functionality.The added imports for Button, ChevronsDownIcon, and ButtonLoader are appropriate for implementing the new "Load More" feature.
40-53: LGTM: New props for "Load More" functionality.The
Listcomponent has been updated with new props (showLoadMore, isLoadingMore, handleLoadMore) to support the "Load More" feature. These props are correctly passed down to theEmailListcomponent.
542-545: LGTM: Improved prop handling inResizeGroup.The
ResizeGroupcomponent has been refactored to use object destructuring for its props, which enhances code readability and follows modern JavaScript best practices.
Line range hint
1-566: Overall: Excellent implementation of pagination via "Load More" functionality.The changes in this file successfully implement the pagination feature using a "Load More" button, addressing the objectives outlined in the PR. The implementation allows users to incrementally load more emails, improving the performance and user experience of the mail interface. The code is well-structured, and the new functionality is seamlessly integrated into the existing components.
A few key points:
- New props are correctly added and passed down through components.
- The "Load More" button is implemented with proper conditional rendering and state management.
- The
ResizeGroupcomponent has been refactored for improved readability.Great job on this implementation!
|
Seems to be working great on the Mail page. Wondering if we can also get it to work on the view when a user views emails on other pages. eg Probably need to extract this into its own hook: const query: ThreadsQuery = searchParams.type
? { type: searchParams.type }
: {};
const getKey = (
pageIndex: number,
previousPageData: ThreadsResponse | null,
) => {
if (previousPageData && !previousPageData.nextPageToken) return null;
const queryParams = new URLSearchParams(query as Record<string, string>);
// Append nextPageToken for subsequent pages
if (pageIndex > 0 && previousPageData?.nextPageToken) {
queryParams.set("nextPageToken", previousPageData.nextPageToken);
}
return `/api/google/threads?${queryParams.toString()}`;
};
const { data, size, setSize, isLoading, error, mutate } =
useSWRInfinite<ThreadsResponse>(getKey, {
keepPreviousData: true,
dedupingInterval: 1_000,
revalidateOnFocus: false,
});
const allThreads = data ? data.flatMap((page) => page.threads) : [];
const isLoadingMore =
isLoading || (size > 0 && data && typeof data[size - 1] === "undefined");
const showLoadMore = data ? !!data[data.length - 1]?.nextPageToken : false;e.g. for usage in |
Description
This PR fixes the pagination issue in mail
Changes
Note: Is there a better way of doing this? any suggestions?
email_pagination_fix.mp4
Related Issue
Fixes #115
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes