refactor: refactor according to PR comments

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/Stays/Container/container.module.css

@@ -1,5 +1,4 @@
 .container {
-  max-width: var(--max-width);
   display: grid;
   gap: 2rem;
 }

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

@@ -8,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

@@ -33,7 +33,7 @@ export default function PreviousStays({ lang }: LangParams) {
         subtitle={_(
           "Revisit your stays and rekindle those our moments together, with ease."
         )}
-      ></Header>
+      />
       {data?.pages.length ? (
         <ListContainer>
           <StayList

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

@@ -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

@@ -17,8 +17,8 @@ export default function EmptyUpcomingStaysBlock() {
           {_("Where should you go next?")}
         </span>
       </Title>
-      <Button intent={"primary"} bgcolor={"quarternary"} asChild type="button">
+      <Button intent="primary" bgcolor="quarternary" asChild type="button">
-        <Link className={styles.link} href={"#"} key={"getInspired"}>
+        <Link className={styles.link} href={"#"} key="getInspired">
           {_("Get inspired")}
         </Link>
       </Button>

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

@@ -33,7 +33,7 @@ export default function UpcomingStays({ lang }: LangParams) {
         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>
+      />
       {data?.pages.length ? (
         <ListContainer>
           <StayList

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

@@ -9,6 +9,7 @@ import {
 } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
 
+import { staysInput } from "./input"
 import { getUserSchema } from "./output"
 import {
   benefits,
@@ -84,80 +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),
-            cursor: z.number().nullish(),
-          })
-          .default({})
-      )
-      .query(async (opts) => {
-        const { perPage, page, cursor } = opts.input
-        let nextCursor: typeof cursor | undefined = undefined
-        const nrPages = Math.ceil(previousStays.length / perPage)
 
-        let stays, nextPage
+      let stays, nextPage
-        if (cursor) {
+      if (cursor) {
-          stays = previousStays.slice(cursor, perPage + cursor + 1)
+        stays = previousStays.slice(cursor, perPage + cursor + 1)
-          nextPage = cursor / perPage + 1
+        nextPage = cursor / perPage + 1
-        } else {
+      } else {
-          stays = previousStays.slice(
+        stays = previousStays.slice(
-            page * perPage,
+          page * perPage,
-            page * perPage + perPage + 1
+          page * perPage + perPage + 1
-          )
+        )
+      }
+
+      if (
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
+        (!nextPage && nrPages > 1)
+      ) {
+        const nextItem = stays.pop()
+        if (nextItem) {
+          nextCursor = previousStays.indexOf(nextItem)
         }
+      } // TODO: Make request to get user data from Scandic API
+      return { data: stays, nextCursor }
+    }),
 
-        if (
+    upcoming: protectedProcedure.input(staysInput).query(async (opts) => {
-          (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
+      const { perPage, page, cursor } = opts.input
-          (!nextPage && nrPages > 1)
+      let nextCursor: typeof cursor | undefined = undefined
-        ) {
+      const nrPages = Math.ceil(upcomingStays.length / perPage)
-          const nextItem = stays.pop()
-          if (nextItem) {
-            nextCursor = previousStays.indexOf(nextItem)
-          }
-        } // TODO: Make request to get user data from Scandic API
-        return { data: stays, nextCursor }
-      }),
 
-    upcoming: protectedProcedure
+      let stays, nextPage
-      .input(
+      if (cursor) {
-        z
+        stays = upcomingStays.slice(cursor, perPage + cursor + 1)
-          .object({
+        nextPage = cursor / perPage + 1
-            perPage: z.number().min(0).default(6),
+      } else {
-            page: z.number().min(0).default(0),
+        stays = upcomingStays.slice(
-            cursor: z.number().nullish(),
+          page * perPage,
-          })
+          page * perPage + perPage + 1
-          .default({})
+        )
-      )
+      }
-      .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 (
-        if (cursor) {
+        (nextPage && nextPage < nrPages && stays.length == perPage + 1) ||
-          stays = upcomingStays.slice(cursor, perPage + cursor + 1)
+        (!nextPage && nrPages > 1)
-          nextPage = cursor / perPage + 1
+      ) {
-        } else {
+        const nextItem = stays.pop()
-          stays = upcomingStays.slice(
+        if (nextItem) {
-            page * perPage,
+          nextCursor = upcomingStays.indexOf(nextItem)
-            page * perPage + perPage + 1
-          )
         }
-
+      } // TODO: Make request to get user data from Scandic API
-        if (
+      return { data: stays, nextCursor }
-          (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,7 +1,5 @@
 import { randomUUID } from "crypto"
 
-import { dt } from "@/lib/dt"
-
 export const benefits = [
   {
     id: 1,
@@ -290,7 +288,6 @@ export const upcomingStays = [
 ]
 
 export const extendedUser = {
-  dob: dt("1977-07-05").format("YYYY-MM-DD"),
   journeys: challenges.journeys,
   nights: 14,
   shortcuts,