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

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

@@ -0,0 +1,67 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Grids from "@/components/TempDesignSystem/Grids"
+
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
+import StayCard from "../StayCard"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import type {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+export default function ClientUpcomingStays({
+  initialUpcomingStays,
+  lang,
+}: UpcomingStaysClientProps) {
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialUpcomingStays],
+        },
+      }
+    )
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  // TS having a hard time with the filtered type.
+  // This is only temporary as we will not return null
+  // later on when we handle errors appropriately.
+  const filteredStays = (data?.pages.filter((page) => page && page.data) ??
+    []) as unknown as UpcomingStaysNonNullResponseObject[]
+  const stays = filteredStays.flatMap((page) => page.data)
+
+  return 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 />
+  )
+}