Merge pull request #9138 from Couchers-org/na/web/my-comm-query

Switch upcoming stays and my communities to useInfiniteQuery

Author: nabramow

app/web/features/communities/hooks.ts

@@ -194,9 +194,14 @@ export interface CreateDiscussionInput {
 }
 
 export const useListUserCommunities = () =>
-  useQuery<ListUserCommunitiesRes.AsObject, RpcError>({
+  useInfiniteQuery<ListUserCommunitiesRes.AsObject, RpcError>({
     queryKey: [userCommunitiesListKey],
-    queryFn: () => service.communities.listUserCommunities(),
+    queryFn: ({ pageParam }) =>
+      service.communities.listUserCommunities(pageParam as string | undefined),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.nextPageToken ? lastPage.nextPageToken : undefined,
+    staleTime: 10 * 60 * 1000,
   });
 
 export const useNewDiscussionMutation = (onSuccess?: () => void) => {

app/web/features/dashboard/CommunitiesList.tsx

@@ -67,7 +67,9 @@ export default function CommunitiesList() {
 
   const { data, isPending, error } = useListUserCommunities();
 
-  const communities = data?.communitiesList ?? [];
+  const communities = (data?.pages ?? []).flatMap(
+    (page) => page.communitiesList,
+  );
 
   const updateScrollState = () => {
     const el = scrollerRef.current;

app/web/features/dashboard/UpcomingStays.tsx

@@ -5,7 +5,7 @@ import {
   MeetingRoom,
 } from "@mui/icons-material";
 import { Box, IconButton, styled, Typography } from "@mui/material";
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import Alert from "components/Alert";
 import FadingScrollTrack from "components/FadingScrollTrack";
 import { hostRequestsListKey } from "features/queryKeys";
@@ -217,34 +217,46 @@ export default function UpcomingStays() {
     data: tripsData,
     isLoading: tripsLoading,
     error: tripsError,
-  } = useQuery<ListHostRequestsRes.AsObject, RpcError>({
-    queryKey: hostRequestsListKey({ type: "surfing" }),
-    queryFn: () =>
+  } = useInfiniteQuery<ListHostRequestsRes.AsObject, RpcError>({
+    queryKey: hostRequestsListKey({ type: "surfing", onlyActive: true }),
+    queryFn: ({ pageParam }) =>
       service.requests.listHostRequests({
+        pageToken: pageParam as string | undefined,
         type: "surfing",
         onlyActive: true,
         statusIn: UPCOMING_STATUSES,
         sortBy: HostRequestSortBy.HOST_REQUEST_SORT_BY_FROM_DATE,
       }),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.noMore ? undefined : lastPage.nextPageToken,
   });
 
   const {
     data: guestsData,
     isLoading: guestsLoading,
     error: guestsError,
-  } = useQuery<ListHostRequestsRes.AsObject, RpcError>({
-    queryKey: hostRequestsListKey({ type: "hosting" }),
-    queryFn: () =>
+  } = useInfiniteQuery<ListHostRequestsRes.AsObject, RpcError>({
+    queryKey: hostRequestsListKey({ type: "hosting", onlyActive: true }),
+    queryFn: ({ pageParam }) =>
       service.requests.listHostRequests({
+        pageToken: pageParam as string | undefined,
         type: "hosting",
         onlyActive: true,
         statusIn: UPCOMING_STATUSES,
         sortBy: HostRequestSortBy.HOST_REQUEST_SORT_BY_FROM_DATE,
       }),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.noMore ? undefined : lastPage.nextPageToken,
   });
 
-  const upcomingTrips = tripsData?.hostRequestsList ?? [];
-  const upcomingGuests = guestsData?.hostRequestsList ?? [];
+  const upcomingTrips = (tripsData?.pages ?? []).flatMap(
+    (page) => page.hostRequestsList,
+  );
+  const upcomingGuests = (guestsData?.pages ?? []).flatMap(
+    (page) => page.hostRequestsList,
+  );
 
   const error = tripsError ?? guestsError;
 

app/web/features/queryKeys.ts

@@ -139,7 +139,7 @@ export const hostRequestMessagesKey = (id?: number) => [
 
 // User
 export const userCommunitiesKey = "userCommunities";
-export const userCommunitiesListKey = "userCommunitiesList";
+export const userCommunitiesListKey = "userCommunitiesListV2";
 export const myEventsKey = (type: EventsType) => ["myEvents", { type }];
 export const myCommunityEventsKey = (type: EventsType) => [
   "myCommunityEvents",