chore: add load more functionality, with refactored css

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

@@ -1,28 +1,52 @@
-import { serverClient } from "@/lib/trpc/server"
+"use client"
 
-import EmptyPreviousStaysBlock from "../EmptyPreviousStays"
+import { _ } from "@/lib/translation"
+import { trpc } from "@/lib/trpc/client"
+
+import Container from "../Container"
 import Header from "../Header"
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
 import StayList from "../StayList"
+import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
-import styles from "./previous.module.css"
-
+import type { Page } from "@/types/components/myPages/myStays/page"
 import type { LangParams } from "@/types/params"
 
-export default async function PreviousStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.previous()
+export default function PreviousStays({ lang }: LangParams) {
+  const { data, isFetching, fetchNextPage, hasNextPage } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+      }
+    )
+
+  function loadMoreData() {
+    fetchNextPage()
+  }
 
   return (
-    <section className={styles.container}>
+    <Container>
       <Header
-        title="Your previous stays."
-        subtitle="Revisit your stays and rekindle those our moments together, with ease."
+        title={_("Previous stays")}
+        subtitle={_(
+          "Revisit your stays and rekindle those our moments together, with ease."
+        )}
       ></Header>
-
-      {stays.length ? (
-        <StayList lang={lang} stays={stays} />
+      {data?.pages.length ? (
+        <ListContainer>
+          <StayList
+            lang={lang}
+            stays={data?.pages.flatMap((page) => page.data) ?? []}
+          />
+          {hasNextPage ? (
+            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+          ) : null}
+        </ListContainer>
       ) : (
         <EmptyPreviousStaysBlock />
       )}
-    </section>
+    </Container>
   )
 }