Fix GetLink-Tutorial-Playground-state issue 1558 (#1855)

This PR closes #1558

Included changes:
1. props.linkedCode must be reset after nav click.
2. Only "code" and "profile" URL params are reset, instead of all URL
params (which is better practice). WebAPI is used instead of string
operations.

playground/src/editor.tsx

@@ -364,15 +364,15 @@ export function Editor(props: {
     try {
       const encodedCode = await codeToCompressedBase64(code);
       const escapedCode = encodeURIComponent(encodedCode);
-      // Get current URL without query parameters to use as the base URL
-      const newUrl = `${
-        window.location.href.split("?")[0]
-      }?code=${escapedCode}&profile=${profile}`;
+      // Update or add the current URL parameters 'code' and 'profile'
+      const newURL = new URL(window.location.href);
+      newURL.searchParams.set("code", escapedCode);
+      newURL.searchParams.set("profile", profile);
 
       // Copy link to clipboard and update url without reloading the page
-      navigator.clipboard.writeText(newUrl);
+      navigator.clipboard.writeText(newURL.toString());
 
-      window.history.pushState({}, "", newUrl);
+      window.history.pushState({}, "", newURL.toString());
       messageText = "Link was copied to the clipboard";
     } finally {
       const popup = document.getElementById("popup") as HTMLDivElement;

playground/src/main.tsx

@@ -141,11 +141,12 @@ function App(props: { katas: Kata[]; linkedCode?: string }) {
 
   function onNavItemSelected(name: string) {
     // If there was a ?code link on the URL before, clear it out
-    const params = new URLSearchParams(window.location.search);
-    if (params.get("code")) {
-      // Get current URL without query parameters to use as the URL
-      const newUrl = `${window.location.href.split("?")[0]}`;
-      window.history.pushState({}, "", newUrl);
+    const newURL = new URL(window.location.href);
+    if (newURL.searchParams.get("code")) {
+      newURL.searchParams.delete("code");
+      newURL.searchParams.delete("profile");
+      window.history.pushState({}, "", newURL.toString());
+      props.linkedCode = undefined;
     }
     setCurrentNavItem(name);
   }