chore: add load more functionality, with refactored css

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,26 @@
+.button {
+  background-color: var(--some-red-color, #ed2027);
+}
+
+.link {
+  text-decoration: none;
+}
+
+.grayTitle {
+  color: var(--some-grey-color, #727272);
+  display: block;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 25rem;
+  gap: 2.5rem;
+  background-color: var(--some-grey-color, #f2f2f2);
+  border-radius: 0.8rem;
+  max-width: var(--max-width);
+  margin-bottom: 0.5rem;
+  padding: 0 2rem;
+}

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

@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { _ } from "@/lib/translation"
+
+import Title from "@/components/MyPages/Title"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default function EmptyUpcomingStaysBlock() {
+  return (
+    <section className={styles.container}>
+      <Title level="h3" as="h5" uppercase>
+        {_(" You have no upcoming stays.")}
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
+      </Title>
+      <Button intent={"primary"} bgcolor={"quarternary"} asChild type="button">
+        <Link className={styles.link} href={"#"} key={"getInspired"}>
+          {_("Get inspired")}
+        </Link>
+      </Button>
+    </section>
+  )
+}

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

@@ -1,29 +1,52 @@
-import { serverClient } from "@/lib/trpc/server"
+"use client"
 
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
+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 EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import styles from "./upcoming.module.css"
-
+import type { Page } from "@/types/components/myPages/myStays/page"
 import type { LangParams } from "@/types/params"
 
-export default async function UpcomingStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.upcoming()
+export default function UpcomingStays({ lang }: LangParams) {
+  const { data, hasNextPage, isFetching, fetchNextPage } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage: Page) => lastPage.nextCursor,
+      }
+    )
+
+  function loadMoreData() {
+    fetchNextPage()
+  }
 
   return (
-    <section className={styles.container}>
+    <Container>
       <Header
-        title="Your upcoming stays."
-        subtitle="Excited about your next trip? So are we. Below are your upcoming stays
-          with us, complete with all the details you need to make each visit
-          perfect. Can't wait to welcome you back, friend!"
+        title={_("Upcoming stays")}
+        subtitle={_(
+          "Excited about your next trip? So are we. Below are your upcoming stays with us, complete with all the details you need to make each visit perfect. Can't wait to welcome you back, friend!"
+        )}
       ></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>
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </Container>
   )
 }

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

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