Skip to content

Commit

Permalink
Query API: Preserve multiple ?plugin= query params (#1947)
Browse files Browse the repository at this point in the history
Ensures that URLs with multiple parameter values, such as
`?plugin=friends&plugin=hello-dolly`, are preserved after the initial
page load.

As seen in #1941, Playground started redirecting from
`?plugin=friends&plugin=hello-dolly` to just `?plugin=hello-dolly`. This
is caused by storing only the last key=>value pair in the redux store
instead of all the key=>value pairs for all query parameters.

## Testing Instructions (or ideally a Blueprint)

Go to the Input URL and confirm it behaves as follows:

**Before this PR**

```
Input URL:  /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check
Result URL: /?plugin=plugin-check
```

**After this PR**

```
Input URL:  /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check
Result URL: /?plugin=classic-editor&plugin=hello-dolly&plugin=plugin-check
```
  • Loading branch information
adamziel authored Oct 25, 2024
1 parent 69528c1 commit 1ded0c5
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,7 @@ export function EnsurePlaygroundSiteIsSelected({
originalBlueprint: blueprint,
},
originalUrlParams: {
searchParams: Object.fromEntries(
url.searchParams.entries()
),
searchParams: parseSearchParams(url.searchParams),
hash: url.hash,
},
})
Expand All @@ -115,3 +113,12 @@ export function EnsurePlaygroundSiteIsSelected({

return children;
}

function parseSearchParams(searchParams: URLSearchParams) {
const params: Record<string, any> = {};
for (const key of searchParams.keys()) {
const value = searchParams.getAll(key);
params[key] = value.length > 1 ? value : value[0];
}
return params;
}
4 changes: 4 additions & 0 deletions packages/playground/website/src/lib/state/url/router-hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export function updateUrl(
([key, value]) => {
if (value === undefined) {
currentUrl.searchParams.delete(key);
} else if (Array.isArray(value)) {
value.forEach((v) => {
currentUrl.searchParams.append(key, v);
});
} else {
currentUrl.searchParams.set(key, value);
}
Expand Down

0 comments on commit 1ded0c5

Please sign in to comment.