feat: loosen up the zod validations and return null instead of throwing

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

@@ -1,64 +1,29 @@
-"use client"
+import { serverClient } from "@/lib/trpc/server"
 
-import { trpc } from "@/lib/trpc/client"
-
-import LoadingSpinner from "@/components/LoadingSpinner"
-import Header from "@/components/SectionHeader"
-import Grids from "@/components/TempDesignSystem/Grids"
+import SectionHeader from "@/components/SectionHeader"
 
 import Container from "../Container"
-import ListContainer from "../ListContainer"
-import ShowMoreButton from "../ShowMoreButton"
-import StayCard from "../StayCard"
-import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+import ClientUpcomingStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
-export default function UpcomingStays({
+export default async function UpcomingStays({
   lang,
   title,
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data, hasNextPage, isFetching, fetchNextPage, isLoading } =
-    trpc.user.stays.upcoming.useInfiniteQuery(
-      { limit: 6 },
-      {
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
-      }
-    )
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
+  const initialUpcomingStays = await serverClient().user.stays.upcoming()
+  if (!initialUpcomingStays?.data) {
+    return null
   }
-
-  const stays = data?.pages.flatMap((page) => page.data) ?? []
-
   return (
     <Container>
-      <Header title={title} subtitle={subtitle} link={link} />
-      {isLoading ? (
-        <LoadingSpinner />
-      ) : stays.length ? (
-        <ListContainer>
-          <Grids.Stackable>
-            {stays.map((stay) => (
-              <StayCard
-                key={stay.attributes.confirmationNumber}
-                lang={lang}
-                stay={stay}
-              />
-            ))}
-          </Grids.Stackable>
-          {hasNextPage ? (
-            <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
-          ) : null}
-        </ListContainer>
-      ) : (
-        <EmptyUpcomingStaysBlock />
-      )}
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <ClientUpcomingStays
+        initialUpcomingStays={initialUpcomingStays}
+        lang={lang}
+      />
     </Container>
   )
 }