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

components/MyPages/Blocks/Stays/Previous/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 EmptyPreviousStaysBlock from "./EmptyPreviousStays"
+
+import type {
+  PreviousStaysClientProps,
+  PreviousStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/previous"
+
+export default function ClientPreviousStays({
+  initialPreviousStays,
+  lang,
+}: PreviousStaysClientProps) {
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {},
+      {
+        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialPreviousStays],
+        },
+      }
+    )
+
+  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 PreviousStaysNonNullResponseObject[]
+  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>
+  ) : (
+    <EmptyPreviousStaysBlock />
+  )
+}

components/MyPages/Blocks/Stays/Previous/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 EmptyPreviousStaysBlock from "./EmptyPreviousStays"
+import ClientPreviousStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
-export default function PreviousStays({
+export default async function PreviousStays({
   lang,
   title,
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.user.stays.previous.useInfiniteQuery(
-      {},
-      {
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
-      }
-    )
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
+  const initialPreviousStays = await serverClient().user.stays.previous()
+  if (!initialPreviousStays?.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>
-      ) : (
-        <EmptyPreviousStaysBlock />
-      )}
+      <SectionHeader title={title} subtitle={subtitle} link={link} />
+      <ClientPreviousStays
+        initialPreviousStays={initialPreviousStays}
+        lang={lang}
+      />
     </Container>
   )
 }

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

@@ -16,14 +16,17 @@ export default async function SoonestStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data: stays } = await serverClient().user.stays.upcoming({ limit: 3 })
+  const response = await serverClient().user.stays.upcoming({ limit: 3 })
+  if (!response?.data) {
+    return null
+  }
 
   return (
     <section className={styles.container}>
       <Header title={title} subtitle={subtitle} link={link} />
-      {stays.length ? (
+      {response.data.length ? (
         <Grids.Stackable>
-          {stays.map((stay) => (
+          {response.data.map((stay) => (
             <StayCard
               key={stay.attributes.confirmationNumber}
               lang={lang}

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

@@ -1,8 +1,8 @@
-import { Calendar } from "react-feather"
-
 import { dt } from "@/lib/dt"
 
+import { CalendarIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./stay.module.css"
@@ -33,14 +33,14 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           {hotelInformation.hotelName}
         </Title>
         <div className={styles.date}>
-          <Calendar
-            height={20}
-            width={20}
-            color="var(--Scandic-Brand-Burgundy)"
-          />
-          <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+          <CalendarIcon color="burgundy" />
+          <Caption asChild>
+            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+          </Caption>
           {" - "}
-          <time dateTime={departDateTime}>{departDate}</time>
+          <Caption asChild>
+            <time dateTime={departDateTime}>{departDate}</time>
+          </Caption>
         </div>
       </footer>
     </article>

components/MyPages/Blocks/Stays/StayCard/stay.module.css

@@ -36,8 +36,4 @@
   align-items: center;
   display: flex;
   gap: var(--Spacing-x-half);
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
-  line-height: var(--typography-Caption-Regular-lineHeight);
 }

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

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