Merged in feat/stays-loadMore (pull request #142)

feat/stays loadMore

Approved-by: Simon.Emanuelsson

.gitignore

@@ -38,3 +38,6 @@ next-env.d.ts
 certificates
 # Local Netlify folder
 .netlify
+
+#vscode
+.vscode/

app/[lang]/(live)/(protected)/my-pages/stays/page.module.css

@@ -9,7 +9,7 @@
 
 @media screen and (min-width: 950px) {
   .container {
-    gap: 10rem;
+    gap: 6rem;
     padding-left: 0;
     padding-right: 0;
     margin: 0;

app/[lang]/(live)/(protected)/my-pages/stays/page.tsx

@@ -1,3 +1,4 @@
+import MaxWidth from "@/components/MaxWidth"
 import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
 
@@ -7,9 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyStays({ params }: PageArgs<LangParams>) {
   return (
-    <main className={styles.container}>
+    <MaxWidth className={styles.container} tag="main">
       <UpcomingStays lang={params.lang} />
       <PreviousStays lang={params.lang} />
-    </main>
+    </MaxWidth>
   )
 }

components/MyPages/Blocks/Overview/UpcomingStays/index.tsx

@@ -1,11 +1,11 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
+import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
 import Title from "@/components/MyPages/Title"
 import Link from "@/components/TempDesignSystem/Link"
 
-import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays"
-import StayCard from "../../Stays/StayCard"
-
 import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
@@ -19,15 +19,15 @@ export default async function UpcomingStays({ lang }: LangParams) {
     <section className={styles.container}>
       <header className={styles.header}>
         <Title level="h2" as="h5" uppercase>
-          Your upcoming stays
+          {_("Your upcoming stays")}
         </Title>
         <Link className={styles.link} href="#">
-          See all
+          {_("See all")}
         </Link>
       </header>
-      {stays.length ? (
+      {stays.data.length ? (
         <section className={styles.stays}>
-          {stays.map((stay) => (
+          {stays.data.map((stay) => (
             <StayCard key={stay.uid} stay={stay} lang={lang} />
           ))}
         </section>

components/MyPages/Blocks/Stays/Container/container.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  gap: 2rem;
+}
+@media screen and (min-width: 950px) {
+  .container {
+    gap: 3.5rem;
+  }
+}

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

@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function Container({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}

components/MyPages/Blocks/Stays/Header/header.module.css

@@ -1,13 +1,4 @@
-.subtitle {
+.header {
-  padding-top: 0.5rem;
+  display: grid;
-  padding-bottom: 2.5rem;
+  gap: 0.5rem;
-  margin: 0;
-}
-
-@media screen and (min-width: 950px) {
-  .subtitle {
-    width: 60%;
-    padding-top: 2.5rem;
-    padding-bottom: 5rem;
-  }
 }

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

@@ -2,15 +2,15 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./header.module.css"
 
-import { HeaderProps } from "@/types/components/myPages/stays/title"
+import type { HeaderProps } from "@/types/components/myPages/myStays/title"
 
 export default function Header({ title, subtitle }: HeaderProps) {
   return (
     <header className={styles.header}>
-      <Title as="h3" weight="semiBold" uppercase>
+      <Title as="h3" level="h2" weight="semiBold" uppercase>
         {title}
       </Title>
-      <Title as="h5" weight="regular" className={styles.subtitle}>
+      <Title as="h5" level="h3" weight="regular">
         {subtitle}
       </Title>
     </header>

components/MyPages/Blocks/Stays/ListContainer/container.module.css

@@ -0,0 +1,4 @@
+.container {
+  display: grid;
+  gap: 3rem;
+}

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

@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function ListContainer({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}

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

@@ -5,5 +5,4 @@
   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

@@ -1,3 +1,5 @@
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/MyPages/Title"
 
 import styles from "./emptyPreviousStays.module.css"
@@ -6,7 +8,7 @@ export default function EmptyPreviousStaysBlock() {
   return (
     <section className={styles.container}>
       <Title level="h3" as="h5" uppercase>
-        You have no previous stays.
+        {_("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) {
+export default function PreviousStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.previous()
+  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."
+        title={_("Previous stays")}
-        subtitle="Revisit your stays and rekindle those our moments together, with ease."
+        subtitle={_(
-      ></Header>
+          "Revisit your stays and rekindle those our moments together, with ease."
-
+        )}
-      {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);
-}

components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,24 @@
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./button.module.css"
+
+import type { ShowMoreButtonParams } from "@/types/components/myPages/myStays/button"
+
+export default function ShowMoreButton({
+  disabled,
+  loadMoreData,
+}: ShowMoreButtonParams) {
+  return (
+    <div className={styles.container}>
+      <Button
+        disabled={disabled}
+        intent="primary"
+        bgcolor="white"
+        type="button"
+        onClick={loadMoreData}
+      >
+        Show more
+      </Button>
+    </div>
+  )
+}

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

@@ -5,16 +5,11 @@ import Title from "@/components/MyPages/Title"
 
 import styles from "./stay.module.css"
 
-import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+import type { StayCardProps } from "@/types/components/myPages/myStays/stayCard"
 
-export default function StayCard({
+export default function StayCard({ stay, lang }: StayCardProps) {
-  stay,
-  lang,
-  showDayCount = false,
-}: StayCardProps) {
   const { dateArrive, dateDepart, guests, hotel } = stay
 
-  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
   const arrival = dt(dateArrive).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
   const arrivalDateTime = arrival.format("YYYY-MM-DD")
@@ -24,21 +19,14 @@ export default function StayCard({
 
   return (
     <article className={styles.stay}>
-      <div className={styles.imageContainer}>
-        {showDayCount ? (
-          <div className={styles.badge}>
-            <time className={styles.time}>In {daysUntilArrival} days</time>
-          </div>
-        ) : null}
-        <Image
-          alt="Placeholder image flower"
-          height={73}
-          src="/_static/icons/flower-image.svg"
-          width={73}
-        />
-      </div>
       <footer className={styles.footer}>
-        <Title as="h5" level="h3" uppercase className={styles.hotel}>
+        <Title
+          as="h5"
+          level="h3"
+          weight="semiBold"
+          uppercase
+          className={styles.hotel}
+        >
           {hotel}
         </Title>
         <section className={styles.container}>

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

@@ -1,64 +1,39 @@
 .stay {
-  background-color: var(--some-grey-color, #ababab);
+  background-color: var(--some-grey-color, #c2bdba);
   border-radius: 0.8rem;
   display: grid;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 32rem;
-  grid-template-rows: 1fr 9rem;
+  height: 34rem;
-  height: 28rem;
-}
-
-.imageContainer {
-  align-items: center;
-  display: grid;
-  justify-content: center;
-  position: relative;
-}
-
-.badge {
-  background-color: var(--some-white-color, #fff);
-  border-radius: 4rem;
-  left: 1.5rem;
-  padding: 0.6rem 1.4rem;
-  position: absolute;
-  top: 1.5rem;
-}
-
-.time {
-  color: var(--some-black-color, #000);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.2rem;
-  font-weight: 400;
 }
 
 .footer {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--some-grey-color, #ebe8e6);
   border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-radius: 0 0 0.8rem 0.8rem;
-  display: inline-block;
+  height: 12rem;
-  height: 9rem;
+  padding: 4rem 2.5rem;
-  padding: 1.5rem 2rem;
   overflow: hidden;
+  margin-top: auto;
+  text-align: center;
+  width: 100%;
 }
 
 .hotel {
   overflow: hidden;
   text-wrap: nowrap;
   text-overflow: ellipsis;
-  font-size: 1.5rem;
   padding: 0;
   margin: 0;
 }
 
 .container {
-  align-items: center;
+  display: flex;
-  display: grid;
   gap: 2rem;
-  grid-template-columns: auto 1fr;
+  justify-content: center;
-  justify-content: flex-start;
 }
 
 .date,
@@ -66,4 +41,11 @@
   align-items: center;
   display: flex;
   gap: 0.6rem;
+  font-size: small;
+}
+
+@media screen and (min-width: 950px) {
+  .footer {
+    padding: 2rem 2.5rem;
+  }
 }

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

@@ -1,29 +1,15 @@
-import Button from "@/components/TempDesignSystem/Button"
-
 import StayCard from "../StayCard"
 
 import styles from "./stayList.module.css"
 
-import { StayListProps } from "@/types/components/myPages/stays/stayList"
+import { StayListProps } from "@/types/components/myPages/myStays/stayList"
 
 export default function StayList({ lang, stays }: StayListProps) {
   return (
-    <section>
+    <section className={styles.stays}>
-      <section className={styles.stays}>
+      {stays.map((stay) => (
-        {stays.map((stay) => (
+        <StayCard key={stay.uid} stay={stay} lang={lang} />
-          <StayCard
+      ))}
-            key={stay.uid}
-            stay={stay}
-            lang={lang}
-            showDayCount={true}
-          />
-        ))}
-      </section>
-      <div className={styles.buttonContainer}>
-        <Button intent="primary" type="button">
-          Show more
-        </Button>
-      </div>
     </section>
   )
 }

components/MyPages/Blocks/Stays/StayList/stayList.module.css

@@ -1,7 +1,6 @@
 .stays {
   display: grid;
-  row-gap: 1.5rem;
+  gap: 1.5rem;
-  column-gap: 2.2rem;
   grid-template-columns: auto;
 
   /* Hide scrollbar IE and Edge */
@@ -15,18 +14,8 @@
   display: none;
 }
 
-.buttonContainer {
-  display: flex;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
 @media screen and (min-width: 950px) {
   .stays {
-    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-  }
-
-  .buttonContainer {
-    margin-top: 4rem;
   }
 }

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

@@ -6,8 +6,8 @@
   text-decoration: none;
 }
 
-.redTitle {
+.grayTitle {
-  color: var(--some-red-color, #ed2027);
+  color: var(--some-grey-color, #727272);
   display: block;
 }
 
@@ -20,7 +20,6 @@
   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

@@ -1,5 +1,7 @@
 import Link from "next/link"
 
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/MyPages/Title"
 import Button from "@/components/TempDesignSystem/Button"
 
@@ -9,17 +11,15 @@ export default function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <Title level="h3" as="h5" uppercase>
-        You have no upcoming stays.
+        {_(" You have no upcoming stays.")}
-        <span className={styles.redTitle}> Where should you go next?</span>
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
       </Title>
-      <Button
+      <Button intent="primary" bgcolor="quarternary" asChild type="button">
-        intent={"primary"}
+        <Link className={styles.link} href={"#"} key="getInspired">
-        className={styles.button}
+          {_("Get inspired")}
-        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) {
+export default function UpcomingStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.upcoming()
+  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."
+        title={_("Upcoming stays")}
-        subtitle="Excited about your next trip? So are we. Below are your upcoming stays
+        subtitle={_(
-          with us, complete with all the details you need to make each visit
+          "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!"
-          perfect. Can't wait to welcome you back, friend!"
+        )}
-      ></Header>
+      />
-      {stays.length ? (
+      {data?.pages.length ? (
-        <StayList lang={lang} stays={stays} />
+        <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);
-}

server/routers/user/input.ts

@@ -1,3 +1,9 @@
-/**
+import { z } from "zod"
- *  Add route inputs (both query & mutation)
+
- */
+export const staysInput = z
+  .object({
+    perPage: z.number().min(0).default(6),
+    page: z.number().min(0).default(0),
+    cursor: z.number().nullish(),
+  })
+  .default({})

server/routers/user/query.ts

@@ -1,11 +1,6 @@
+import { z } from "zod"
+
 import * as api from "@/lib/api"
-import {
-  benefits,
-  extendedUser,
-  nextLevelPerks,
-  previousStays,
-  upcomingStays,
-} from "./temp"
 import {
   badRequestError,
   forbiddenError,
@@ -13,9 +8,16 @@ import {
   unauthorizedError,
 } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
-import { z } from "zod"
 
+import { staysInput } from "./input"
 import { getUserSchema } from "./output"
+import {
+  benefits,
+  extendedUser,
+  nextLevelPerks,
+  previousStays,
+  upcomingStays,
+} from "./temp"
 
 function fakingRequest<T>(payload: T): Promise<T> {
   return new Promise((resolve) => {
@@ -34,7 +36,6 @@ export const userQueryRouter = router({
           Authorization: `Bearer ${ctx.session.token.access_token}`,
         },
       })
-
       if (!apiResponse.ok) {
         switch (apiResponse.status) {
           case 400:
@@ -67,7 +68,7 @@ export const userQueryRouter = router({
         name: `${verifiedData.data.name} ${verifiedData.data.lastName}`,
       }
     } catch (error) {
-      console.info(`GEt User Error`)
+      console.info(`Get User Error`)
       console.error(error)
       throw internalServerError()
     }
@@ -84,31 +85,60 @@ export const userQueryRouter = router({
   }),
 
   stays: router({
-    previous: protectedProcedure
+    previous: protectedProcedure.input(staysInput).query(async (opts) => {
-      .input(
+      const { perPage, page, cursor } = opts.input
-        z
+      let nextCursor: typeof cursor | undefined = undefined
-          .object({
+      const nrPages = Math.ceil(previousStays.length / perPage)
-            perPage: z.number().min(0).default(6),
+
-            page: z.number().min(0).default(0),
+      let stays, nextPage
-          })
+      if (cursor) {
-          .default({})
+        stays = previousStays.slice(cursor, perPage + cursor + 1)
-      )
+        nextPage = cursor / perPage + 1
-      .query(async (opts) => {
+      } else {
-        const { perPage, page } = opts.input
+        stays = previousStays.slice(
-        return previousStays.slice(page * perPage, page * perPage + perPage)
+          page * perPage,
-      }),
+          page * perPage + perPage + 1
-    upcoming: protectedProcedure
+        )
-      .input(
+      }
-        z
+
-          .object({
+      if (
-            perPage: z.number().min(0).default(6),
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
-            page: z.number().min(0).default(0),
+        (!nextPage && nrPages > 1)
-          })
+      ) {
-          .default({})
+        const nextItem = stays.pop()
-      )
+        if (nextItem) {
-      .query(async (opts) => {
+          nextCursor = previousStays.indexOf(nextItem)
-        const { perPage, page } = opts.input
+        }
-        return upcomingStays.slice(page * perPage, page * perPage + perPage)
+      } // TODO: Make request to get user data from Scandic API
-      }),
+      return { data: stays, nextCursor }
+    }),
+
+    upcoming: protectedProcedure.input(staysInput).query(async (opts) => {
+      const { perPage, page, cursor } = opts.input
+      let nextCursor: typeof cursor | undefined = undefined
+      const nrPages = Math.ceil(upcomingStays.length / perPage)
+
+      let stays, nextPage
+      if (cursor) {
+        stays = upcomingStays.slice(cursor, perPage + cursor + 1)
+        nextPage = cursor / perPage + 1
+      } else {
+        stays = upcomingStays.slice(
+          page * perPage,
+          page * perPage + perPage + 1
+        )
+      }
+
+      if (
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
+        (!nextPage && nrPages > 1)
+      ) {
+        const nextItem = stays.pop()
+        if (nextItem) {
+          nextCursor = upcomingStays.indexOf(nextItem)
+        }
+      } // TODO: Make request to get user data from Scandic API
+      return { data: stays, nextCursor }
+    }),
   }),
 })

server/routers/user/temp.ts

@@ -1,4 +1,4 @@
-import { dt } from "@/lib/dt"
+import { randomUUID } from "crypto"
 
 export const benefits = [
   {
@@ -115,168 +115,181 @@ export const shortcuts = [
 
 export const previousStays = [
   {
-    uid: "0",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Helsinki Hub",
   },
   {
-    uid: "1",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Örebro Central",
   },
   {
-    uid: "2",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Oslo City",
   },
   {
-    uid: "3",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Lorem",
   },
   {
-    uid: "4",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Ipsum",
   },
   {
-    uid: "5",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Dolor Sin Amet",
   },
   {
-    uid: "6",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Anglais",
   },
   {
-    uid: "7",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Park",
   },
   {
-    uid: "8",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Klara",
   },
   {
-    uid: "9",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic Dolor A",
+    hotel: "Scandic Järva Krog",
   },
   {
-    uid: "10",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic B",
+    hotel: "Scandic Kiruna",
   },
   {
-    uid: "11",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
-    hotel: "Scandic C",
+    hotel: "Scandic Umeå",
-  },
-  {
-    uid: "12",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic D",
-  },
-  {
-    uid: "13",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic E",
-  },
-  {
-    uid: "14",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic F",
-  },
-  {
-    uid: "15",
-    dateArrive: new Date("06 27 2024"),
-    dateDepart: new Date("06 28 2024"),
-    guests: 2,
-    hotel: "Scandic G",
   },
 ]
 
 export const upcomingStays = [
   {
-    uid: "0",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Helsinki Hub",
   },
   {
-    uid: "1",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Örebro Central",
   },
   {
-    uid: "2",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Oslo City",
   },
   {
-    uid: "3",
+    uid: randomUUID(),
     dateArrive: new Date("04 27 2024"),
     dateDepart: new Date("04 28 2024"),
     guests: 2,
     hotel: "Scandic Lorem",
   },
   {
-    uid: "4",
+    uid: randomUUID(),
     dateArrive: new Date("05 27 2024"),
     dateDepart: new Date("05 28 2024"),
     guests: 2,
     hotel: "Scandic Ipsum",
   },
   {
-    uid: "5",
+    uid: randomUUID(),
     dateArrive: new Date("06 27 2024"),
     dateDepart: new Date("06 28 2024"),
     guests: 2,
     hotel: "Scandic Dolor Sin Amet",
   },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Anglais",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Park",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Klara",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Järva Krog",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Kiruna",
+  },
+  {
+    uid: randomUUID(),
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Umeå",
+  },
 ]
 
 export const extendedUser = {
   journeys: challenges.journeys,
   nights: 14,
   shortcuts,
-  upcomingStays,
   victories: challenges.victories,
 }

types/components/myPages/myPage/stay.ts

@@ -1,5 +1,7 @@
+import { UUID } from "crypto"
+
 export type Stay = {
-  uid: string
+  uid: UUID
   dateArrive: Date
   dateDepart: Date
   guests: number

types/components/myPages/myStays/button.ts

@@ -0,0 +1,4 @@
+export type ShowMoreButtonParams = {
+  loadMoreData: () => void
+  disabled: boolean
+}

types/components/myPages/myStays/page.ts

@@ -0,0 +1,6 @@
+import type { Stay } from "../myPage/stay"
+
+export type Page = {
+  data: Stay[]
+  nextCursor?: number
+}

types/components/myPages/myStays/stayCard.ts

@@ -0,0 +1,7 @@
+import type { Lang } from "@/constants/languages"
+import type { Stay } from "../myPage/stay"
+
+export type StayCardProps = {
+  lang: Lang
+  stay: Stay
+}

types/components/myPages/myStays/stayList.ts

@@ -0,0 +1,7 @@
+import type { Lang } from "@/constants/languages"
+import type { Stay } from "../myPage/stay"
+
+export type StayListProps = {
+  stays: Stay[]
+  lang: Lang
+}

types/components/myPages/stays/stayCard.ts

@@ -1,8 +0,0 @@
-import { Stay } from "../myPage/stay"
-import { Lang } from "@/constants/languages"
-
-export type StayCardProps = {
-  lang: Lang
-  showDayCount?: boolean
-  stay: Stay
-}

types/components/myPages/stays/stayList.ts

@@ -1,7 +0,0 @@
-import { Lang } from "@/constants/languages"
-import { Stay } from "../myPage/stay"
-
-export type StayListProps = {
-  stays: Stay[]
-  lang: Lang
-}