Skip to content

Commit

Permalink
update app examples to await async params and use Suspense
Browse files Browse the repository at this point in the history
ethanniser committed Oct 30, 2024
1 parent 54942eb commit 0440ae6
Showing 10 changed files with 64 additions and 46 deletions.
12 changes: 7 additions & 5 deletions examples/appdir/src/app/(test)/foo/[id]/@modal/(.)nest/page.tsx
Original file line number Diff line number Diff line change
@@ -3,25 +3,27 @@ import { InferPagePropsType } from "next-typesafe-url";
import { Route, RouteType } from "../../nest/routeType";
import { $path } from "next-typesafe-url";
import Link from "next/link";
import { Suspense } from "react";

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ routeParams }: PageProps) => {
const Page = async ({ routeParams }: PageProps) => {
const params = await routeParams;
return (
<>
<Suspense>
<div className="border border-black">
<h1>INTERCEPT</h1>
<div>{`route: ${JSON.stringify(routeParams)}`}</div>
<div>{`route: ${JSON.stringify(params)}`}</div>
<Link
href={$path({
route: "/foo/[id]",
routeParams: { id: routeParams.id },
routeParams: { id: params.id },
})}
>
BACK
</Link>
</div>
</>
</Suspense>
);
};

10 changes: 6 additions & 4 deletions examples/appdir/src/app/(test)/foo/[id]/@modal/page.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { withParamValidation } from "next-typesafe-url/app/hoc";
import { InferPagePropsType } from "next-typesafe-url";
import { Route, RouteType } from "../routeType";
import { Suspense } from "react";

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ routeParams }: PageProps) => {
const Page = async ({ routeParams }: PageProps) => {
const params = await routeParams;
return (
<>
<Suspense>
<div className="border border-black">
<h1>PARALLELROUTE</h1>
<div>{`route: ${JSON.stringify(routeParams)}`}</div>
<div>{`route: ${JSON.stringify(params)}`}</div>
</div>
</>
</Suspense>
);
};

22 changes: 13 additions & 9 deletions examples/appdir/src/app/(test)/foo/[id]/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { z } from "zod";
import { withLayoutParamValidation } from "next-typesafe-url/app/hoc";
import type { DynamicLayout, InferLayoutPropsType } from "next-typesafe-url";
import { Suspense } from "react";

const LayoutRoute = {
routeParams: z.object({
@@ -10,18 +11,21 @@ const LayoutRoute = {
type LayoutType = typeof LayoutRoute;

type Props = InferLayoutPropsType<LayoutType, "modal">;
function Layout({ children, routeParams, modal }: Props) {
async function Layout({ children, routeParams, modal }: Props) {
const params = await routeParams;
return (
<div className="border border-black">
<h1>THIS IS A LAYOUT</h1>
<p>{JSON.stringify(routeParams)}</p>
<div className="border border-black">{children}</div>
<Suspense>
<div className="border border-black">
<h1>MODAL</h1>
<div className="border border-green">{modal}</div>
<h1>THIS IS A LAYOUT</h1>
<p>{JSON.stringify(params)}</p>
<div className="border border-black">{children}</div>
<div className="border border-black">
<h1>MODAL</h1>
<div className="border border-green">{modal}</div>
</div>
<p>bottom</p>
</div>
<p>bottom</p>
</div>
</Suspense>
);
}

10 changes: 6 additions & 4 deletions examples/appdir/src/app/(test)/foo/[id]/nest/page.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { withParamValidation } from "next-typesafe-url/app/hoc";
import { InferPagePropsType } from "next-typesafe-url";
import { Route, RouteType } from "./routeType";
import { Suspense } from "react";

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ routeParams }: PageProps) => {
const Page = async ({ routeParams }: PageProps) => {
const params = await routeParams;
return (
<>
<Suspense>
<div className="border border-black">
<h1>NORMAL NEST PAGE</h1>
<div>{`route: ${JSON.stringify(routeParams)}`}</div>
<div>{`route: ${JSON.stringify(params)}`}</div>
</div>
</>
</Suspense>
);
};

12 changes: 7 additions & 5 deletions examples/appdir/src/app/(test)/foo/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -3,25 +3,27 @@ import { InferPagePropsType } from "next-typesafe-url";
import { Route, RouteType } from "./routeType";
import { $path } from "next-typesafe-url";
import Link from "next/link";
import { Suspense } from "react";

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ routeParams }: PageProps) => {
const Page = async ({ routeParams }: PageProps) => {
const params = await routeParams;
return (
<>
<Suspense>
<div className="border border-black">
<h1>page</h1>
<div>{`route: ${JSON.stringify(routeParams)}`}</div>
<div>{`route: ${JSON.stringify(params)}`}</div>
<Link
href={$path({
route: "/foo/[id]/nest",
routeParams: { id: routeParams.id },
routeParams: { id: params.id },
})}
>
LINK
</Link>
</div>
</>
</Suspense>
);
};

12 changes: 7 additions & 5 deletions examples/appdir/src/app/[slug]/[...foo]/page.tsx
Original file line number Diff line number Diff line change
@@ -7,16 +7,18 @@ type PageProps = InferPagePropsType<RouteType>;

let count = 0;

const Page = ({ routeParams, searchParams }: PageProps) => {
const Page = async ({ routeParams, searchParams }: PageProps) => {
console.log("render", count++);
console.log(JSON.stringify(routeParams));
console.log(JSON.stringify(searchParams));
const params = await routeParams;
const search = await searchParams;
console.log(JSON.stringify(params));
console.log(JSON.stringify(search));

return (
<>
<div>{`data: ${JSON.stringify(routeParams)}`}</div>
<div>{`data: ${JSON.stringify(params)}`}</div>
<br />
<div>{`data: ${JSON.stringify(searchParams)}`}</div>
<div>{`data: ${JSON.stringify(search)}`}</div>
<Client />
</>
);
17 changes: 10 additions & 7 deletions examples/appdir/src/app/[slug]/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { z } from "zod";
import { withLayoutParamValidation } from "next-typesafe-url/app/hoc";
import type { DynamicLayout, InferLayoutPropsType } from "next-typesafe-url";
import { Suspense } from "react";

const LayoutRoute = {
routeParams: z.object({
@@ -10,14 +11,16 @@ const LayoutRoute = {
type LayoutType = typeof LayoutRoute;

type Props = InferLayoutPropsType<LayoutType>;
function Layout({ children, routeParams }: Props) {
async function Layout({ children, routeParams }: Props) {
return (
<div>
<h1>THIS IS A LAYOUT</h1>
<p>{JSON.stringify(routeParams)}</p>
<div className="border border-black">{children}</div>
<p>bottom</p>
</div>
<Suspense>
<div>
<h1>THIS IS A LAYOUT</h1>
<p>{JSON.stringify(await routeParams)}</p>
<div className="border border-black">{children}</div>
<p>bottom</p>
</div>
</Suspense>
);
}

4 changes: 2 additions & 2 deletions examples/appdir/src/app/client/[...client]/client.tsx
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ export const Client = () => {
const routeParams = useRouteParams(Route.routeParams);

return (
<>
<div className="flex flex-col space-y-5">
<Link href={$path({ route: "/" })}>Back</Link>
<br />
<input value={input} onChange={(e) => setInput(e.target.value)} />
@@ -40,6 +40,6 @@ export const Client = () => {
<div>{`data: ${JSON.stringify(params)}`}</div>
<h1>routeParams</h1>
<div>{`data: ${JSON.stringify(routeParams)}`}</div>
</>
</div>
);
};
7 changes: 4 additions & 3 deletions examples/appdir/src/app/jsonRoute/[foo]/page.tsx
Original file line number Diff line number Diff line change
@@ -5,12 +5,13 @@ import { Suspense } from "react";

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ routeParams }: PageProps) => {
console.log(routeParams.foo === undefined);
const Page = async ({ routeParams }: PageProps) => {
const params = await routeParams;
console.log(params.foo === undefined);

return (
<Suspense>
<div>{`data: ${JSON.stringify(routeParams)}`}</div>
<div>{`data: ${JSON.stringify(params)}`}</div>
</Suspense>
);
};
4 changes: 2 additions & 2 deletions examples/appdir/src/app/transform/page.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ type _TestOutput = RouterOutputs["/transform"];

type PageProps = InferPagePropsType<RouteType>;

const Page = ({ searchParams }: PageProps) => {
const Page = async ({ searchParams }: PageProps) => {
const _test = $path({
route: "/transform",
searchParams: {
@@ -22,7 +22,7 @@ const Page = ({ searchParams }: PageProps) => {

return (
<>
<div>{`data: ${JSON.stringify(searchParams)}`}</div>
<div>{`data: ${JSON.stringify(await searchParams)}`}</div>
</>
);
};

0 comments on commit 0440ae6

Please sign in to comment.