Merge pull request #149 from marcodejongh/upgrade_nextjs

marcodejongh · web-flow · commit 21ec87b3d855 · 2025-03-01T09:19:20.000+11:00
Upgrade nextjs
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/layout.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/layout.tsx
@@ -14,7 +14,7 @@ import { PeerProvider } from '@/app/components/connection-manager/peer-context';
 import { PartyProvider } from '@/app/components/party-manager/party-context';
 
 interface BoardLayoutProps {
-  params: BoardRouteParametersWithUuid;
+  params: Promise<BoardRouteParametersWithUuid>;
   searchParams: {
     query?: string;
     page?: string;
@@ -35,7 +35,13 @@ interface BoardLayoutProps {
   };
 }
 
-export default async function BoardLayout({ children, params }: PropsWithChildren<BoardLayoutProps>) {
+export default async function BoardLayout(props: PropsWithChildren<BoardLayoutProps>) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   // Parse the route parameters
   const parsedParams: ParsedBoardRouteParameters = parseBoardRouteParams(params);
 
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout.tsx
@@ -11,10 +11,16 @@ import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { fetchBoardDetails } from '@/app/components/rest-api/api';
 
 interface LayoutProps {
-  params: BoardRouteParametersWithUuid;
+  params: Promise<BoardRouteParametersWithUuid>;
 }
 
-export default async function ListLayout({ children, params }: PropsWithChildren<LayoutProps>) {
+export default async function ListLayout(props: PropsWithChildren<LayoutProps>) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   const parsedParams: ParsedBoardRouteParameters = parseBoardRouteParams(params);
 
   const { board_name, layout_id, set_ids, size_id } = parsedParams;
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx
@@ -6,13 +6,14 @@ import { parseBoardRouteParams, parsedRouteSearchParamsToSearchParams } from '@/
 import ClimbsList from '@/app/components/board-page/climbs-list';
 import { fetchBoardDetails, fetchClimbs } from '@/app/components/rest-api/api';
 
-export default async function DynamicResultsPage({
-  params,
-  searchParams,
-}: {
-  params: BoardRouteParametersWithUuid;
-  searchParams: SearchRequestPagination;
-}) {
+export default async function DynamicResultsPage(
+  props: {
+    params: Promise<BoardRouteParametersWithUuid>;
+    searchParams: Promise<SearchRequestPagination>;
+  }
+) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const parsedParams = parseBoardRouteParams(params);
 
   try {
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx
@@ -7,7 +7,8 @@ import ClimbCard from '@/app/components/climb-card/climb-card';
 import { Col, Row } from 'antd';
 import ClimbInfoColumn from '@/app/components/climb-info/climb-info-drawer';
 
-export default async function DynamicResultsPage({ params }: { params: BoardRouteParametersWithUuid }) {
+export default async function DynamicResultsPage(props: { params: Promise<BoardRouteParametersWithUuid> }) {
+  const params = await props.params;
   const parsedParams = parseBoardRouteParams(params);
 
   try {
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/page.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/page.tsx
@@ -2,6 +2,12 @@ import AngleSelection from '@/app/components/setup-wizard/angle-selection';
 import { BoardName } from '@/app/lib/types';
 import React from 'react';
 
-export default async function LayoutsPage({ params: { board_name } }: { params: { board_name: BoardName } }) {
+export default async function LayoutsPage(props: { params: Promise<{ board_name: BoardName }> }) {
+  const params = await props.params;
+
+  const {
+    board_name
+  } = params;
+
   return <AngleSelection board_name={board_name} />;
 }
diff --git a/app/[board_name]/[layout_id]/[size_id]/page.tsx b/app/[board_name]/[layout_id]/[size_id]/page.tsx
@@ -3,11 +3,12 @@ import { fetchSets } from '@/app/components/rest-api/api';
 import SetsSelection from '@/app/components/setup-wizard/sets-selection';
 import { BoardName, LayoutId, Size } from '@/app/lib/types';
 
-export default async function LayoutsPage({
-  params,
-}: {
-  params: { board_name: BoardName; layout_id: LayoutId; size_id: Size };
-}) {
+export default async function LayoutsPage(
+  props: {
+    params: Promise<{ board_name: BoardName; layout_id: LayoutId; size_id: Size }>;
+  }
+) {
+  const params = await props.params;
   const sets = await fetchSets(params.board_name, params.layout_id, params.size_id);
   return <SetsSelection sets={sets} />;
 }
diff --git a/app/[board_name]/[layout_id]/page.tsx b/app/[board_name]/[layout_id]/page.tsx
@@ -3,7 +3,8 @@ import SizeSelection from '@/app/components/setup-wizard/size-selection';
 import { fetchSizes } from '@/app/components/rest-api/api';
 import { BoardName, LayoutId } from '@/app/lib/types';
 
-export default async function LayoutsPage({ params }: { params: { board_name: BoardName; layout_id: LayoutId } }) {
+export default async function LayoutsPage(props: { params: Promise<{ board_name: BoardName; layout_id: LayoutId }> }) {
+  const params = await props.params;
   const sizes = await fetchSizes(params.board_name, params.layout_id);
   return <SizeSelection sizes={sizes} />;
 }
diff --git a/app/[board_name]/layout.tsx b/app/[board_name]/layout.tsx
@@ -1,16 +1,22 @@
 'use client';
-import React from 'react';
+import React, { use } from 'react';
 import { PropsWithChildren } from 'react';
 import { ParsedBoardRouteParameters, BoardRouteParametersWithUuid } from '@/app/lib/types';
 import { parseBoardRouteParams } from '@/app/lib/url-utils'; // Assume this utility helps with parsing
 
 import { BoardProvider } from '../components/board-provider/board-provider-context';
 
 interface BoardLayoutProps {
-  params: BoardRouteParametersWithUuid;
+  params: Promise<BoardRouteParametersWithUuid>;
 }
 
-export default function BoardLayout({ children, params }: PropsWithChildren<BoardLayoutProps>) {
+export default async function BoardLayout(props: PropsWithChildren<BoardLayoutProps>) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   // Parse the route parameters
   const parsedParams: ParsedBoardRouteParameters = parseBoardRouteParams(params);
 
diff --git a/app/[board_name]/page.tsx b/app/[board_name]/page.tsx
@@ -5,7 +5,13 @@ import LayoutSelection from '../components/setup-wizard/layout-selection';
 import { fetchLayouts } from '../components/rest-api/api';
 import { BoardName } from '../lib/types';
 
-export default async function LayoutsPage({ params: { board_name } }: { params: { board_name: BoardName } }) {
+export default async function LayoutsPage(props: { params: Promise<{ board_name: BoardName }> }) {
+  const params = await props.params;
+
+  const {
+    board_name
+  } = params;
+
   const layouts = await fetchLayouts(board_name);
   return <LayoutSelection layouts={layouts} boardName={board_name} />;
 }
diff --git a/app/api/internal/shared-sync/[board_name]/route.ts b/app/api/internal/shared-sync/[board_name]/route.ts
@@ -9,7 +9,8 @@ export const maxDuration = 300;
 // This is a simple way to secure the endpoint, should be replaced with a better solution
 const CRON_SECRET = process.env.CRON_SECRET;
 
-export async function GET(request: Request, { params }: { params: BoardRouteParameters }) {
+export async function GET(request: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   try {
     const { board_name }: ParsedBoardRouteParameters = parseBoardRouteParams(params);
     console.log(`Starting shared sync for ${board_name}`);
diff --git a/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/[climb_uuid]/route.ts b/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/[climb_uuid]/route.ts
@@ -5,10 +5,8 @@ import { BoardRouteParametersWithUuid, ErrorResponse, FetchCurrentProblemRespons
 import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { NextResponse } from 'next/server';
 
-export async function GET(
-  req: Request,
-  { params }: { params: BoardRouteParametersWithUuid },
-): Promise<NextResponse<FetchCurrentProblemResponse | ErrorResponse>> {
+export async function GET(req: Request, props: { params: Promise<BoardRouteParametersWithUuid> }): Promise<NextResponse<FetchCurrentProblemResponse | ErrorResponse>> {
+  const params = await props.params;
   try {
     const parsedParams = parseBoardRouteParams(params);
     const result = await getClimb(parsedParams);
diff --git a/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/heatmap/route.ts b/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/heatmap/route.ts
@@ -16,10 +16,8 @@ export interface HoldHeatmapResponse {
   }>;
 }
 
-export async function GET(
-  req: Request,
-  { params }: { params: BoardRouteParameters },
-): Promise<NextResponse<HoldHeatmapResponse | ErrorResponse>> {
+export async function GET(req: Request, props: { params: Promise<BoardRouteParameters> }): Promise<NextResponse<HoldHeatmapResponse | ErrorResponse>> {
+  const params = await props.params;
   // Extract search parameters from query string
   const query = new URL(req.url).searchParams;
   const parsedParams = parseBoardRouteParams(params);
diff --git a/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/search/route.ts b/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/search/route.ts
@@ -4,10 +4,8 @@ import { parseBoardRouteParams, urlParamsToSearchParams } from '@/app/lib/url-ut
 import { NextResponse } from 'next/server';
 
 // Refactor: Keep BoardRouteParameters and SearchRequest fields in separate objects
-export async function GET(
-  req: Request,
-  { params }: { params: BoardRouteParameters },
-): Promise<NextResponse<SearchClimbsResult | ErrorResponse>> {
+export async function GET(req: Request, props: { params: Promise<BoardRouteParameters> }): Promise<NextResponse<SearchClimbsResult | ErrorResponse>> {
+  const params = await props.params;
   // Extract search parameters from query string
   const query = new URL(req.url).searchParams;
   const parsedParams = parseBoardRouteParams(params);
diff --git a/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/details/route.ts b/app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/details/route.ts
@@ -3,7 +3,8 @@ import { BoardRouteParameters } from '@/app/lib/types';
 import { NextResponse } from 'next/server';
 import { parseBoardRouteParams } from '@/app/lib/url-utils';
 
-export async function GET(req: Request, { params }: { params: BoardRouteParameters }) {
+export async function GET(req: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   try {
     const parsedParams = parseBoardRouteParams(params);
     const boardDetails = await getBoardDetails(parsedParams);
diff --git a/app/api/v1/[board_name]/[layout_id]/[size_id]/sets/route.ts b/app/api/v1/[board_name]/[layout_id]/[size_id]/sets/route.ts
@@ -4,8 +4,9 @@ import { NextResponse } from 'next/server';
 
 export async function GET(
   request: Request,
-  { params }: { params: { board_name: BoardName; layout_id: LayoutId; size_id: Size } },
+  props: { params: Promise<{ board_name: BoardName; layout_id: LayoutId; size_id: Size }> }
 ) {
+  const params = await props.params;
   const { board_name, layout_id, size_id } = params;
 
   try {
diff --git a/app/api/v1/[board_name]/[layout_id]/sizes/route.ts b/app/api/v1/[board_name]/[layout_id]/sizes/route.ts
@@ -3,7 +3,11 @@ import { BoardName, LayoutId } from '@/app/lib/types';
 import { NextResponse } from 'next/server';
 
 // Dynamic handler for fetching sizes related to a specific layout
-export async function GET(req: Request, { params }: { params: { board_name: BoardName; layout_id: LayoutId } }) {
+export async function GET(
+  req: Request,
+  props: { params: Promise<{ board_name: BoardName; layout_id: LayoutId }> }
+) {
+  const params = await props.params;
   const { board_name, layout_id } = params;
 
   try {
diff --git a/app/api/v1/[board_name]/layouts/route.ts b/app/api/v1/[board_name]/layouts/route.ts
@@ -4,7 +4,8 @@ import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { NextResponse } from 'next/server';
 
 // Correct typing for the parameters
-export async function GET(req: Request, { params }: { params: BoardRouteParameters }) {
+export async function GET(req: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   const { board_name } = parseBoardRouteParams(params);
 
   try {
diff --git a/app/api/v1/[board_name]/proxy/getLogbook/route.ts b/app/api/v1/[board_name]/proxy/getLogbook/route.ts
@@ -5,7 +5,8 @@ import { parseBoardRouteParams } from '@/app/lib/url-utils';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
-export async function POST(request: Request, { params }: { params: BoardRouteParameters }) {
+export async function POST(request: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   const { board_name }: ParsedBoardRouteParameters = parseBoardRouteParams(params);
   try {
     // Parse and validate request body
diff --git a/app/api/v1/[board_name]/proxy/login/route.ts b/app/api/v1/[board_name]/proxy/login/route.ts
@@ -11,7 +11,8 @@ const loginSchema = z.object({
   password: z.string().min(1),
 });
 
-export async function POST(request: Request, { params }: { params: BoardRouteParameters }) {
+export async function POST(request: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   const { board_name }: ParsedBoardRouteParameters = parseBoardRouteParams(params);
   try {
     // Parse and validate request body
diff --git a/app/api/v1/[board_name]/proxy/saveAscent/route.ts b/app/api/v1/[board_name]/proxy/saveAscent/route.ts
@@ -25,7 +25,8 @@ const saveAscentSchema = z.object({
     .strict(),
 });
 
-export async function POST(request: Request, { params }: { params: BoardRouteParameters }) {
+export async function POST(request: Request, props: { params: Promise<BoardRouteParameters> }) {
+  const params = await props.params;
   const { board_name }: ParsedBoardRouteParameters = parseBoardRouteParams(params);
 
   try {
diff --git a/app/api/v1/angles/[board_name]/[layout_id]/route.ts b/app/api/v1/angles/[board_name]/[layout_id]/route.ts
@@ -1,7 +1,11 @@
 import { sql } from '@vercel/postgres';
 import { NextResponse } from 'next/server';
 
-export async function GET(req: Request, { params }: { params: { board_name: string; layout_id: string } }) {
+export async function GET(
+  req: Request,
+  props: { params: Promise<{ board_name: string; layout_id: string }> }
+) {
+  const params = await props.params;
   const { /*board_name,*/ layout_id } = params;
 
   try {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@ import SizeSelection from '@/app/components/setup-wizard/size-selection';`
`3`	`3`	`import { fetchSizes } from '@/app/components/rest-api/api';`
`4`	`4`	`import { BoardName, LayoutId } from '@/app/lib/types';`
`5`	`5`
`6`		`-export default async function LayoutsPage({ params }: { params: { board_name: BoardName; layout_id: LayoutId } }) {`
	`6`	`+export default async function LayoutsPage(props: { params: Promise<{ board_name: BoardName; layout_id: LayoutId }> }) {`
	`7`	`+ const params = await props.params;`
`7`	`8`	`const sizes = await fetchSizes(params.board_name, params.layout_id);`
`8`	`9`	`return <SizeSelection sizes={sizes} />;`
`9`	`10`	`}`