feat: improve handling of stays

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

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

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

@@ -5,7 +5,6 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClientPreviousStays from "./Client"
-import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
@@ -14,18 +13,18 @@ export default async function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialPreviousStays = await serverClient().user.stays.previous()
-  if (!initialPreviousStays?.data) {
+  const initialPreviousStays = await serverClient().user.stays.previous({
+    limit: 6,
+  })
+
+  if (!initialPreviousStays?.data.length) {
     return null
   }
+
   return (
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      {initialPreviousStays.data.length ? (
-        <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
-      ) : (
-        <EmptyPreviousStaysBlock />
-      )}
+      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

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

@@ -21,7 +21,6 @@ export default function ShowMoreButton({
         onClick={loadMoreData}
         variant="icon"
         type="button"
-        className={styles.button}
         theme="base"
         intent="text"
       >

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;
+}