Add new generateEncodedPath helper

- Should be used in place of generatePath
elastic · Feb 2, 2021 · 68a3057 · 68a3057
1 parent 12e4db9
commit 68a3057
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/...s/enterprise_search/public/applications/app_search/utils/encode_path_params/index.test.ts b/...s/enterprise_search/public/applications/app_search/utils/encode_path_params/index.test.ts
@@ -7,7 +7,7 @@
 import '../../../__mocks__/react_router_history.mock';
 import { useParams } from 'react-router-dom';
 
-import { encodePathParams, useDecodedParams } from './';
+import { encodePathParams, generateEncodedPath, useDecodedParams } from './';
 
 describe('encodePathParams', () => {
   it('encodeURIComponent()s all object values', () => {
@@ -22,6 +22,19 @@ describe('encodePathParams', () => {
   });
 });
 
+describe('generateEncodedPath', () => {
+  it('generates a react router path with encoded path parameters', () => {
+    expect(
+      generateEncodedPath('/values/:someValue/:anotherValue/new', {
+        someValue: 'hello world???',
+        anotherValue: 'test!@#$%^&*[]/|;:"<>~`',
+      })
+    ).toEqual(
+      '/values/hello%20world%3F%3F%3F/test!%40%23%24%25%5E%26*%5B%5D%2F%7C%3B%3A%22%3C%3E~%60/new'
+    );
+  });
+});
+
 describe('useDecodedParams', () => {
   it('decodeURIComponent()s all object values from useParams()', () => {
     (useParams as jest.Mock).mockReturnValue({

diff --git a/...lugins/enterprise_search/public/applications/app_search/utils/encode_path_params/index.ts b/...lugins/enterprise_search/public/applications/app_search/utils/encode_path_params/index.ts
@@ -4,10 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useParams } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router-dom';
 
-export const encodePathParams = (pathParams: Record<string, string | number>) => {
-  const encodedParams: Record<string, string> = {};
+type PathParams = Record<string, string>;
+
+export const encodePathParams = (pathParams: PathParams) => {
+  const encodedParams: PathParams = {};
 
   Object.entries(pathParams).map(([key, value]) => {
     encodedParams[key] = encodeURIComponent(value);
@@ -16,8 +18,12 @@ export const encodePathParams = (pathParams: Record<string, string | number>) =>
   return encodedParams;
 };
 
+export const generateEncodedPath = (path: string, pathParams: PathParams) => {
+  return generatePath(path, encodePathParams(pathParams));
+};
+
 export const useDecodedParams = () => {
-  const decodedParams: Record<string, string> = {};
+  const decodedParams: PathParams = {};
 
   const params = useParams();
   Object.entries(params).map(([key, value]) => {