feat: improve handling of stays

components/MyPages/Blocks/Stays/Upcoming/Client.tsx

@@ -19,9 +19,13 @@ export default function ClientUpcomingStays({
 }: UpcomingStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
-      {},
       {
-        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        limit: 6,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
         initialData: {
           pageParams: [undefined, 1],
           pages: [initialUpcomingStays],

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -7,6 +7,8 @@ import SectionLink from "@/components/Section/Link"
 import ClientUpcomingStays from "./Client"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
+import styles from "./upcoming.module.css"
+
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function UpcomingStays({
@@ -14,14 +16,14 @@ export default async function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialUpcomingStays = await serverClient().user.stays.upcoming()
-  if (!initialUpcomingStays?.data) {
-    return null
-  }
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+    limit: 6,
+  })
+
   return (
-    <SectionContainer>
+    <SectionContainer className={styles.container}>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      {initialUpcomingStays.data.length ? (
+      {initialUpcomingStays?.data.length ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
         <EmptyUpcomingStaysBlock />

components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: inline-grid;
+}