chore: add load more functionality, with refactored css

components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css

@@ -0,0 +1,9 @@
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 25rem;
+  background-color: var(--some-grey-color, #f2f2f2);
+  border-radius: 0.8rem;
+  max-width: var(--max-width);
+}

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

@@ -0,0 +1,15 @@
+import { _ } from "@/lib/translation"
+
+import Title from "@/components/MyPages/Title"
+
+import styles from "./emptyPreviousStays.module.css"
+
+export default function EmptyPreviousStaysBlock() {
+  return (
+    <section className={styles.container}>
+      <Title level="h3" as="h5" uppercase>
+        {_("You have no previous stays.")}{" "}
+      </Title>
+    </section>
+  )
+}

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>
   )
 }

components/MyPages/Blocks/Stays/Previous/previous.module.css

@@ -1,3 +0,0 @@
-.container {
-  max-width: var(--max-width);
-}