playground: Fix example loading when URL also mentions id

Loading an example now replaces the url rather than adding a parameter to it. If both id & example are found in the url params then remove the example param. Closes #484 as merged as of commit b8431c4c3. Fixes cue-lang/cue#2994. Signed-off-by: Jorinde Reijnierse <[email protected]> Change-Id: Ib7d13617968b98a962a29e667082aa6fe2ed2b38 Reviewed-on: https://review.gerrithub.io/c/cue-lang/cuelang.org/+/1206292 TryBot-Result: CUEcueckoo <[email protected]> Reviewed-by: Daniel Martí <[email protected]>
cue-lang · Dec 23, 2024 · 6a04fb0 · 6a04fb0
1 parent ec9ff51
commit 6a04fb0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/playground/src/components/examples-menu.tsx b/playground/src/components/examples-menu.tsx
@@ -4,7 +4,7 @@ import Fuse from 'fuse.js';
 import { Example, ExamplesByCategory } from '@models/example';
 import { examples } from '@config/examples';
 import { categoryWeight } from '@config/examples/categories';
-import { getSearchParamsFromUrl, updateSearchParams } from '@helpers/url-params';
+import { updateSearchParams } from '@helpers/url-params';
 import cx from 'classnames';
 
 interface ExampleMenuProps {
@@ -81,9 +81,9 @@ export class ExamplesMenu extends React.Component<ExampleMenuProps, ExampleMenuS
     }
 
     public updateUrl(example: Example) {
-        const params = getSearchParamsFromUrl();
+        const params = new URLSearchParams();
         params.set('example', example.slug);
-        updateSearchParams(params);
+        updateSearchParams(params, true);
         this.props.onClose();
     }
 

diff --git a/playground/src/containers/app.tsx b/playground/src/containers/app.tsx
@@ -25,7 +25,13 @@ import { vscodeLight, vscodeLightTerminal } from '@config/editor-theme';
 import { examples } from '@config/examples';
 import { availableWorkspaces, defaultWorkspace } from '@config/workspaces';
 import { getSharedCode, share, workspaceToShareContent } from '@helpers/share';
-import { getHashParamsFromUrl, getSearchParamsFromUrl, updateHash, workspaceToHashParams } from '@helpers/url-params';
+import {
+    getHashParamsFromUrl,
+    getSearchParamsFromUrl,
+    updateHash,
+    updateSearchParams,
+    workspaceToHashParams
+} from '@helpers/url-params';
 import { setupWorkspaceConfig } from '@helpers/workspace';
 import { DropdownChange } from '@models/dropdown';
 import { Example } from '@models/example';
@@ -98,6 +104,12 @@ export class App extends React.Component<AppProps, AppState>
             if (sharedCode) {
                 saved = true;
                 activeWorkspace = availableWorkspaces[sharedCode.workspace] ?? defaultWorkspace;
+
+                if (urlSearchParams.get('example')) {
+                    urlSearchParams.delete('example');
+                    updateSearchParams(urlSearchParams, true);
+                }
+
                 for (const savedInput of sharedCode.inputs) {
                     const inputTab = activeWorkspace.config.inputTabs.find(tab => tab.type = savedInput.type);
                     if (inputTab) {