Decode URI component when reading URL path (#482)

Author: marcincodes

packages/cli/src/components/IndexPane/hooks/__test__/__snapshots__/usePreviewTree.test.ts.snap

@@ -78,11 +78,11 @@ exports[`usePreviewTree sets routes and cursor from previews 1`] = `
   },
   {
     "collapsed": false,
-    "displayName": "resetPassword",
+    "displayName": "reset Password",
     "level": 2,
-    "path": "/previews/ResetPassword/resetPassword",
+    "path": "/previews/ResetPassword/reset Password",
     "previewClass": "ResetPassword",
-    "previewFunction": "resetPassword",
+    "previewFunction": "reset Password",
   },
 ]
 `;

packages/cli/src/components/IndexPane/hooks/__test__/usePreviewTree.test.ts

@@ -17,7 +17,7 @@ describe("usePreviewTree", () => {
       "Reservation",
       ["reservationCanceled", "reservationChanged", "reservationConfirmed"],
     ],
-    ["ResetPassword", ["resetPassword"]],
+    ["ResetPassword", ["reset Password"]],
   ];
 
   it("sets routes and cursor from previews", () => {
@@ -41,6 +41,13 @@ describe("usePreviewTree", () => {
     expect(cursor).toBe(3);
   });
 
+  it("sets cursor from previews when preview contains uri encoded char", () => {
+    mockRouter.setCurrentUrl("/previews/ResetPassword/reset%20Password");
+    const { result } = renderHook(() => usePreviewTree(previews));
+    const { cursor } = result.current;
+    expect(cursor).toBe(10);
+  });
+
   it("navigates up down left right", () => {
     const { result } = renderHook(() => usePreviewTree(previews));
     act(result.current.up);

packages/cli/src/components/IndexPane/hooks/usePreviewTree.ts

@@ -89,7 +89,7 @@ export function usePreviewTree(
 
   useEffect(() => {
     if (cursor !== -1 || !treeRoutes) return;
-    const path = router.asPath.split("?")[0];
+    const path = decodeURIComponent(router.asPath.split("?")[0]);
     const idx = treeRoutes.findIndex((route) => route.path === path);
     if (idx >= 0) setCursor(idx);
   }, [router.asPath, cursor, treeRoutes]);