Make passing parameters to generateEncodedPath() type-safe (#25944)

Signed-off-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Jon Koops 2024-01-05 15:11:43 +01:00 committed by GitHub
parent d7542c9344
commit 2eb31f8dbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,17 +1,39 @@
import { generatePath } from "react-router-dom";
import { generatePath, type PathParam } from "react-router-dom";
export type PathParam = { [key: string]: string };
/**
* Represents an object that contains the parameters to be included in a path.
*
* @example
* const params: PathParams<"/user/:id"> = { id: "123" };
*/
export type PathParams<Path extends string> = {
[key in PathParam<Path>]: string;
};
/**
* Generates a path that represents the given path template with parameters interpolated and encoded in it, so that it can safely used in a URL.
*
* @param originalPath - The path template to use to generate the path.
* @param params - An object that contains the parameters to be included in the path.
*
* @example
* const path = "/user/:id";
* const params = { id: "123" };
* const encodedPath = generateEncodedPath(path, params);
* // encodedPath will be "/user/123"
*/
export function generateEncodedPath<Path extends string>(
originalPath: Path,
params: PathParam,
params: PathParams<Path>,
): string {
const encodedParams: PathParam = {};
// Clone the params object so we don't mutate the original.
const encodedParams = structuredClone(params);
Object.entries(params).forEach(
([k, v]) => (encodedParams[k] = encodeURIComponent(v)),
);
//TODO: Fix type once https://github.com/remix-run/react-router/pull/10719 is merged.
return generatePath(originalPath, encodedParams as any);
// Encode each param in the path so that it can be used in a URL.
for (const key in encodedParams) {
const pathKey = key as PathParam<Path>;
encodedParams[pathKey] = encodeURIComponent(encodedParams[pathKey]);
}
return generatePath(originalPath, encodedParams);
}