fix(code-explorer): reset the share code hash from the URL after page load (#108)

Author: Danil42Russia

src/pages/GodboltPage/GodboltPage.tsx

@@ -32,7 +32,7 @@ import type {TolkCompilationResult} from "@features/godbolt/lib/tolk/types.ts"
 import {useGodboltSettings} from "./hooks/useGodboltSettings"
 import {useFuncCompilation} from "./hooks/useFuncCompilation.ts"
 import {useTolkCompilation} from "./hooks/useTolkCompilation.ts"
-import {decodeCodeFromUrl, decodeLanguageFromUrl} from "./urlCodeSharing"
+import {clearShareHash, decodeCodeFromUrl, decodeLanguageFromUrl} from "./urlCodeSharing"
 
 import styles from "./GodboltPage.module.css"
 
@@ -58,7 +58,7 @@ const DEFAULT_FUNC_CODE = `#include "stdlib.fc";
     }
     slice s_addr = cs~load_msg_addr();
     (int wc, int addr_hash) = parse_std_addr(s_addr);
-  
+
     ;; ... other code
 
     throw(wc + addr_hash);
@@ -152,20 +152,25 @@ function GodboltPage() {
   const [initiallyCompiled, setInitiallyCompiled] = useState<boolean>(false)
   const [language, setLanguage] = useState<CodeLanguage>(() => {
     const fromUrl = decodeLanguageFromUrl()
-    if (fromUrl) return fromUrl
+    if (fromUrl != null) {
+      clearShareHash()
+      return fromUrl
+    }
     const saved = localStorage.getItem(STORAGE_LANG_KEY)
     return saved === "tolk" ? "tolk" : "func"
   })
   const [funcCode, setFuncCode] = useState(() => {
     const sharedCode = decodeCodeFromUrl()
-    if (sharedCode && (decodeLanguageFromUrl() ?? "func") === "func") {
+    if (sharedCode !== null && (decodeLanguageFromUrl() ?? "func") === "func") {
+      clearShareHash()
       return sharedCode
     }
     return localStorage.getItem(FUNC_EDITOR_KEY) ?? DEFAULT_FUNC_CODE
   })
   const [tolkCode, setTolkCode] = useState(() => {
     const sharedCode = decodeCodeFromUrl()
-    if (sharedCode && decodeLanguageFromUrl() === "tolk") {
+    if (sharedCode != null && decodeLanguageFromUrl() === "tolk") {
+      clearShareHash()
       return sharedCode
     }
     return localStorage.getItem("txtracer-godbolt-tolk-code") ?? DEFAULT_TOLK_CODE

src/pages/GodboltPage/urlCodeSharing.ts

@@ -60,3 +60,7 @@ export function decodeLanguageFromUrl(): "func" | "tolk" | null {
     return null
   }
 }
+
+export function clearShareHash(): void {
+  window.history.pushState({}, document.title, window.location.pathname)
+}

src/pages/PlaygroundPage/PlaygroundPage.tsx

@@ -14,7 +14,7 @@ import PageHeader from "@shared/ui/PageHeader"
 import Tutorial, {useTutorial} from "@shared/ui/Tutorial"
 
 import ShareButton from "@shared/ui/ShareButton/ShareButton.tsx"
-import {decodeCodeFromUrl} from "@app/pages/GodboltPage/urlCodeSharing.ts"
+import {clearShareHash, decodeCodeFromUrl} from "@app/pages/GodboltPage/urlCodeSharing.ts"
 
 import {ExecuteButton} from "@app/pages/PlaygroundPage/components/ExecuteButton.tsx"
 
@@ -41,7 +41,8 @@ const INITIAL_STACK_STORAGE_KEY = "txtracer-playground-initial-stack"
 function PlaygroundPage() {
   const [assemblyCode, setAssemblyCode] = useState(() => {
     const sharedCode = decodeCodeFromUrl()
-    if (sharedCode) {
+    if (sharedCode !== null) {
+      clearShareHash()
       return sharedCode
     }
     return localStorage.getItem(LOCAL_STORAGE_KEY) ?? DEFAULT_ASSEMBLY_CODE