Merged in feat/mobile-cards-pagination (pull request #362)

[WIP] Feat/mobile cards pagination

Approved-by: Michael Zetterberg
Approved-by: Simon.Emanuelsson

components/Current/Header/index.tsx

@@ -2,7 +2,6 @@ import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
-import { auth } from "@/auth"
 import { BookingWidget } from "@/components/BookingWidget"
 import { getLang } from "@/i18n/serverContext"
 

components/Image.tsx

@@ -5,7 +5,8 @@ import NextImage from "next/image"
 import type { ImageLoaderProps, ImageProps } from "next/image"
 
 function imageLoader({ quality, src, width }: ImageLoaderProps) {
-  return `${src}?w=${width}${quality ? "&q=" + quality : ""}`
+  const hasQS = src.indexOf("?") !== -1
+  return `${src}${hasQS ? "&" : "?"}w=${width}${quality ? "&q=" + quality : ""}`
 }
 
 // Next/Image adds & instead of ? before the params

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

@@ -19,9 +19,13 @@ export default function ClientPreviousStays({
 }: PreviousStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
-      {},
       {
-        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        limit: 6,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
         initialData: {
           pageParams: [undefined, 1],
           pages: [initialPreviousStays],

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

@@ -5,7 +5,6 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClientPreviousStays from "./Client"
-import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
@@ -14,18 +13,18 @@ export default async function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialPreviousStays = await serverClient().user.stays.previous()
+  const initialPreviousStays = await serverClient().user.stays.previous({
-  if (!initialPreviousStays?.data) {
+    limit: 6,
+  })
+
+  if (!initialPreviousStays?.data.length) {
     return null
   }
+
   return (
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      {initialPreviousStays.data.length ? (
+      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
-        <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
-      ) : (
-        <EmptyPreviousStaysBlock />
-      )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

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

@@ -21,7 +21,6 @@ export default function ShowMoreButton({
         onClick={loadMoreData}
         variant="icon"
         type="button"
-        className={styles.button}
         theme="base"
         intent="text"
       >

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

@@ -19,9 +19,13 @@ export default function ClientUpcomingStays({
 }: UpcomingStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
-      {},
       {
-        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        limit: 6,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
         initialData: {
           pageParams: [undefined, 1],
           pages: [initialUpcomingStays],

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

@@ -7,6 +7,8 @@ import SectionLink from "@/components/Section/Link"
 import ClientUpcomingStays from "./Client"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
+import styles from "./upcoming.module.css"
+
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function UpcomingStays({
@@ -14,14 +16,14 @@ export default async function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialUpcomingStays = await serverClient().user.stays.upcoming()
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
-  if (!initialUpcomingStays?.data) {
+    limit: 6,
-    return null
+  })
-  }
+
   return (
-    <SectionContainer>
+    <SectionContainer className={styles.container}>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      {initialUpcomingStays.data.length ? (
+      {initialUpcomingStays?.data.length ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
         <EmptyUpcomingStaysBlock />

components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: inline-grid;
+}

lib/api/index.ts

@@ -7,7 +7,7 @@ import type {
   RequestOptionsWithJSONBody,
   RequestOptionsWithOutBody,
 } from "@/types/fetch"
-import type { Endpoint, endpoints } from "./endpoints"
+import type { Endpoint } from "./endpoints"
 
 export { endpoints } from "./endpoints"
 
@@ -26,13 +26,13 @@ const fetch = fetchRetry(global.fetch, {
     return Math.pow(2, attempt) * 150 // 150, 300, 600
   },
 })
-const url = new URL(env.API_BASEURL)
 
 export async function get(
   endpoint: Endpoint | `${Endpoint}/${string}`,
   options: RequestOptionsWithOutBody,
   params = {}
 ) {
+  const url = new URL(env.API_BASEURL)
   url.pathname = endpoint
   const searchParams = new URLSearchParams(params)
   if (searchParams.size) {
@@ -50,6 +50,7 @@ export async function patch(
   params = {}
 ) {
   const { body, ...requestOptions } = options
+  const url = new URL(env.API_BASEURL)
   url.pathname = endpoint
   const searchParams = new URLSearchParams(params)
   if (searchParams.size) {
@@ -71,9 +72,10 @@ export async function patch(
 export async function post(
   endpoint: Endpoint | `${Endpoint}/${string}`,
   options: RequestOptionsWithJSONBody,
-  params = {},
+  params = {}
 ) {
   const { body, ...requestOptions } = options
+  const url = new URL(env.API_BASEURL)
   url.pathname = endpoint
   const searchParams = new URLSearchParams(params)
   if (searchParams.size) {
@@ -95,8 +97,9 @@ export async function post(
 export async function remove(
   endpoint: Endpoint | `${Endpoint}/${string}`,
   options: RequestOptionsWithOutBody,
-  params = {},
+  params = {}
 ) {
+  const url = new URL(env.API_BASEURL)
   url.pathname = endpoint
   const searchParams = new URLSearchParams(params)
   if (searchParams.size) {

server/routers/user/input.ts

@@ -28,7 +28,6 @@ export const friendTransactionsInput = z
   })
   .default({ limit: 5, page: 1 })
 
-
 // Mutation
 export const addCreditCardInput = z.object({
   language: z.string(),

server/routers/user/query.ts

@@ -379,16 +379,6 @@ export const userQueryRouter = router({
         )
 
         if (!apiResponse.ok) {
-          // switch (apiResponse.status) {
-          //   case 400:
-          //     throw badRequestError(apiResponse)
-          //   case 401:
-          //     throw unauthorizedError(apiResponse)
-          //   case 403:
-          //     throw forbiddenError(apiResponse)
-          //   default:
-          //     throw internalServerError(apiResponse)
-          // }
           const text = await apiResponse.text()
           console.error(
             "api.booking.stays.past error ",
@@ -464,16 +454,6 @@ export const userQueryRouter = router({
         )
 
         if (!apiResponse.ok) {
-          // switch (apiResponse.status) {
-          //   case 400:
-          //     throw badRequestError(apiResponse)
-          //   case 401:
-          //     throw unauthorizedError(apiResponse)
-          //   case 403:
-          //     throw forbiddenError(apiResponse)
-          //   default:
-          //     throw internalServerError(apiResponse)
-          // }
           const text = await apiResponse.text()
           console.error(
             "api.booking.stays.future error ",