Merge pull request #308 from coldsurfers/hotfix/billets-web/wrong-pag…

…e-props-types hotfix(billets-web): wrong page props types
coldsurfers · Jan 23, 2025 · 06d95d2 · 06d95d2
2 parents d6036d2 + 98ee83f
commit 06d95d2
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 42 deletions.
diff --git a/apps/billets-web/app/artist/[artist-id]/layout.tsx b/apps/billets-web/app/artist/[artist-id]/layout.tsx
@@ -2,15 +2,15 @@ import { SITE_NAME, SITE_URL } from '@/libs/constants'
 import { metadataInstance } from '@/libs/metadata'
 import { apiClient } from '@/libs/openapi-client'
 import { Metadata } from 'next/types'
-import { cache, PropsWithChildren } from 'react'
-import { PageProps } from 'types/common-types'
+import { cache, ReactNode } from 'react'
 
 const getArtistDetail = cache(async (artistId: string) => {
   return await apiClient.artist.getArtistDetail(artistId)
 })
 
-export const generateMetadata = async ({ params }: PageProps<{ ['artist-id']: string }>) => {
-  const artistDetail = await getArtistDetail(params['artist-id'])
+export const generateMetadata = async ({ params }: { params: Promise<{ ['artist-id']: string }> }) => {
+  const pageParams = await params
+  const artistDetail = await getArtistDetail(pageParams['artist-id'])
   if (!artistDetail) {
     return undefined
   }
@@ -33,8 +33,12 @@ export const generateMetadata = async ({ params }: PageProps<{ ['artist-id']: st
 export default async function ArtistDetailPageLayout({
   children,
   params,
-}: PropsWithChildren<PageProps<{ ['artist-id']: string }>>) {
-  const artistDetail = await getArtistDetail(params['artist-id'])
+}: {
+  children: ReactNode
+  params: Promise<{ ['artist-id']: string }>
+}) {
+  const pageParams = await params
+  const artistDetail = await getArtistDetail(pageParams['artist-id'])
   if (!artistDetail) {
     return null
   }
@@ -49,7 +53,7 @@ export default async function ArtistDetailPageLayout({
               type: 'PerformingGroup',
               image: artistDetail.thumbUrl ? `${artistDetail.thumbUrl}&width=500&height=500&format=png` : '',
               name: artistDetail.name,
-              url: `${SITE_URL}/artist/${params['artist-id']}`,
+              url: `${SITE_URL}/artist/${pageParams['artist-id']}`,
               events: artistDetail.upcomingEvents.map((event) => ({
                 type: 'MusicEvent',
                 url: `${SITE_URL}/event/${event.data.id}`,

diff --git a/apps/billets-web/app/artist/[artist-id]/page.tsx b/apps/billets-web/app/artist/[artist-id]/page.tsx
@@ -4,7 +4,6 @@ import { getQueryClient } from '@/libs/utils'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { redirect } from 'next/navigation'
 import { cache } from 'react'
-import { PageProps } from 'types/common-types'
 import { ArtistDetailEventList, ArtistDetailPageLayout, ArtistDetailTop } from './(ui)'
 
 const getArtistDetail = cache((artistId: string) => apiClient.artist.getArtistDetail(artistId))
@@ -24,8 +23,8 @@ async function validateArtist(artistId: string) {
   }
 }
 
-async function PageInner({ params }: PageProps<{ ['artist-id']: string }>) {
-  const artistId = params['artist-id']
+async function PageInner({ params }: { params: { ['artist-id']: string } }) {
+  const artistId = (await params)['artist-id']
   const validation = await validateArtist(artistId)
   if (!validation.isValid) {
     return redirect('/404')
@@ -47,10 +46,10 @@ async function PageInner({ params }: PageProps<{ ['artist-id']: string }>) {
   )
 }
 
-export default function ArtistDetailPage(pageProps: PageProps<{ ['artist-id']: string }>) {
+export default async function ArtistDetailPage(pageProps: { params: Promise<{ ['artist-id']: string }> }) {
   return (
     <ApiErrorBoundaryRegistry>
-      <PageInner {...pageProps} />
+      <PageInner params={await pageProps.params} />
     </ApiErrorBoundaryRegistry>
   )
 }
diff --git a/apps/billets-web/app/browse/[city]/page.tsx b/apps/billets-web/app/browse/[city]/page.tsx
@@ -6,13 +6,12 @@ import { getQueryClient, validateCityParam } from '@/libs/utils'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-import { PageProps } from 'types/common-types'
 import { ConcertList } from './(components)'
 
 export const revalidate = 600
 
-export async function generateMetadata({ params }: PageProps<{ city: string }>): Promise<Metadata> {
-  const validation = await validateCityParam(params.city)
+export async function generateMetadata({ params }: { params: Promise<{ city: string }> }): Promise<Metadata> {
+  const validation = await validateCityParam((await params).city)
   if (!validation.isValid) {
     const openGraph: Metadata['openGraph'] = {
       title: COMMON_META_TITLE,
@@ -35,7 +34,7 @@ export async function generateMetadata({ params }: PageProps<{ city: string }>):
   })
 }
 
-async function PageInner({ params }: PageProps<{ city: string }>) {
+async function PageInner({ params }: { params: { city: string } }) {
   const cityParamValidation = await validateCityParam(params.city)
 
   if (!cityParamValidation.isValid) {
@@ -73,10 +72,10 @@ async function PageInner({ params }: PageProps<{ city: string }>) {
   )
 }
 
-export default async function BrowseByCityPage(props: PageProps<{ city: string }>) {
+export default async function BrowseByCityPage({ params }: { params: Promise<{ city: string }> }) {
   return (
     <ApiErrorBoundaryRegistry>
-      <PageInner {...props} />
+      <PageInner params={await params} />
     </ApiErrorBoundaryRegistry>
   )
 }
diff --git a/apps/billets-web/app/event/[event-id]/page.tsx b/apps/billets-web/app/event/[event-id]/page.tsx
@@ -8,7 +8,6 @@ import { format } from 'date-fns'
 import { toZonedTime } from 'date-fns-tz'
 import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-import { PageProps } from 'types'
 import { DownloadApp, Lineup, PageLayout, PosterThumbnail, TicketCta, TopInfo, Venue } from './(ui)'
 
 async function getEventMetadata(eventId: string) {
@@ -36,8 +35,9 @@ async function getEventMetadata(eventId: string) {
 
 export const revalidate = 600
 
-export async function generateMetadata({ params }: PageProps<{ ['event-id']: string }>): Promise<Metadata> {
-  const meta = await getEventMetadata(params['event-id'])
+export async function generateMetadata({ params }: { params: Promise<{ ['event-id']: string }> }): Promise<Metadata> {
+  const pageParams = await params
+  const meta = await getEventMetadata(pageParams['event-id'])
   if (!meta) {
     return {
       title: 'Billets | Discover shows around the world',
@@ -81,7 +81,7 @@ export async function generateMetadata({ params }: PageProps<{ ['event-id']: str
     title: metaTitle,
     description: metaDescription,
     images: metaImages,
-    url: `https://billets.coldsurf.io/event/${params['event-id']}`,
+    url: `https://billets.coldsurf.io/event/${pageParams['event-id']}`,
   }
 
   return metadataInstance.generateMetadata<Metadata>({
@@ -93,7 +93,7 @@ export async function generateMetadata({ params }: PageProps<{ ['event-id']: str
   })
 }
 
-async function PageInner({ params }: PageProps<{ ['event-id']: string }>) {
+async function PageInner({ params }: { params: { ['event-id']: string } }) {
   const meta = await getEventMetadata(params['event-id'])
   if (!meta) {
     return redirect('/404')
@@ -192,10 +192,10 @@ async function PageInner({ params }: PageProps<{ ['event-id']: string }>) {
   )
 }
 
-export default async function EventDetailPage(props: PageProps<{ ['event-id']: string }>) {
+export default async function EventDetailPage({ params }: { params: Promise<{ ['event-id']: string }> }) {
   return (
     <ApiErrorBoundaryRegistry>
-      <PageInner {...props} />
+      <PageInner params={await params} />
     </ApiErrorBoundaryRegistry>
   )
 }
diff --git a/apps/billets-web/app/venue/[venue-id]/layout.tsx b/apps/billets-web/app/venue/[venue-id]/layout.tsx
@@ -3,17 +3,19 @@ import { metadataInstance } from '@/libs/metadata'
 import { apiClient } from '@/libs/openapi-client'
 import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
-import { cache, PropsWithChildren } from 'react'
-import { PageProps } from 'types'
+import { cache, ReactNode } from 'react'
 
 const getVenueDetail = cache(async (venueId: string) => {
   return await apiClient.venue.getVenueDetail(venueId)
 })
 
 export const generateMetadata = async ({
   params,
-}: PageProps<{ ['venue-id']: string }>): Promise<Metadata | undefined> => {
-  const venueDetail = await getVenueDetail(params['venue-id'])
+}: {
+  params: Promise<{ ['venue-id']: string }>
+}): Promise<Metadata | undefined> => {
+  const pageParams = await params
+  const venueDetail = await getVenueDetail(pageParams['venue-id'])
   if (!venueDetail) {
     return undefined
   }
@@ -36,8 +38,12 @@ export const generateMetadata = async ({
 export default async function VenueDetailPageLayout({
   children,
   params,
-}: PropsWithChildren<PageProps<{ ['venue-id']: string }>>) {
-  const venueDetail = await getVenueDetail(params['venue-id'])
+}: {
+  children: ReactNode
+  params: Promise<{ ['venue-id']: string }>
+}) {
+  const pageParams = await params
+  const venueDetail = await getVenueDetail(pageParams['venue-id'])
   if (!venueDetail) {
     return redirect('/404')
   }
@@ -55,7 +61,7 @@ export default async function VenueDetailPageLayout({
               latitude: venueDetail.lat,
               longitude: venueDetail.lng,
               name: venueDetail.name,
-              url: `${SITE_URL}/venue/${params['venue-id']}`,
+              url: `${SITE_URL}/venue/${pageParams['venue-id']}`,
               events: venueDetail.upcomingEvents.map((event) => ({
                 type: 'MusicEvent',
                 url: `${SITE_URL}/event/${event.data.id}`,

diff --git a/apps/billets-web/app/venue/[venue-id]/page.tsx b/apps/billets-web/app/venue/[venue-id]/page.tsx
@@ -4,7 +4,6 @@ import { getQueryClient } from '@/libs/utils/utils.query-client'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { redirect } from 'next/navigation'
 import { cache } from 'react'
-import { PageProps } from 'types/common-types'
 import { VenueDetailAbout, VenueDetailEventList, VenueDetailPageLayout, VenueDetailTop } from './(ui)'
 
 const getVenueDetail = cache((venueId: string) => apiClient.venue.getVenueDetail(venueId))
@@ -24,7 +23,7 @@ async function validateVenue(venueId: string) {
   }
 }
 
-async function PageInner({ params }: PageProps<{ ['venue-id']: string }>) {
+async function PageInner({ params }: { params: { ['venue-id']: string } }) {
   const venueId = params['venue-id']
 
   const validation = await validateVenue(venueId)
@@ -51,10 +50,10 @@ async function PageInner({ params }: PageProps<{ ['venue-id']: string }>) {
   )
 }
 
-export default function VenueDetailPage(pageProps: PageProps<{ ['venue-id']: string }>) {
+export default async function VenueDetailPage({ params }: { params: Promise<{ ['venue-id']: string }> }) {
   return (
     <ApiErrorBoundaryRegistry>
-      <PageInner {...pageProps} />
+      <PageInner params={await params} />
     </ApiErrorBoundaryRegistry>
   )
 }
diff --git a/apps/billets-web/package.json b/apps/billets-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coldsurfers/billets-web",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "scripts": {
     "build": "next build",
     "build:vercel": "npx vercel build --prod",

diff --git a/apps/billets-web/types/common-types.ts b/apps/billets-web/types/common-types.ts
diff --git a/apps/billets-web/types/index.ts b/apps/billets-web/types/index.ts