fix url query param updating bug

src/App.tsx

@@ -45,12 +45,14 @@ const AppInRouter: Component = () => {
   // If the url params indicate a different app config, reload the web app with that config.
   createEffect(() => {
     const pathname = location.pathname;
-
     if (pathname == "/" && HomePageState.instance.is_loading) {
       // we do not want anything here to trigger if the home page is currently generating some client connection.
       return;
     }
 
+    console.log(HomePageState.instance.is_loading);
+    console.log("EFF");
+
     // set the active sidebar item according to the location:
     const newItem = findSideBarItemByPath(pathname);
     if (newItem) {

src/components/RedirectToHome.tsx

@@ -9,7 +9,9 @@ export function RedirectToHome(): JSX.Element {
   const clientCreationConfig = ClientCreationConfig.tryFromParams(
     location.query
   );
-  const params = clientCreationConfig?.intoParams() ?? {};
+  const params = {
+    config: clientCreationConfig?.encodeToString() ?? "",
+  };
   const redirectUrl = `/?${paramsToString(params)}`;
   HomePageState.instance.setRedirectPath(location.pathname);
   return <Navigate href={redirectUrl} />;

src/components/Sidebar.tsx

@@ -104,12 +104,14 @@ function clientConnectionSpan(
         </span>
       );
     case "lightclient":
-      {
-        ("Connected via Light Client: ");
-      }
-      <span class="text-pink-500">
-        {clientCreationData.deref.chain_spec.name}
-      </span>;
+      return (
+        <span>
+          {"Connected via Light Client: "}
+          <span class="text-pink-500">
+            {clientCreationData.deref.chain_spec.name}
+          </span>
+        </span>
+      );
   }
 }
 

src/pages/Home.tsx

@@ -149,6 +149,7 @@ export class HomePageState {
    */
   async generateAndUpdateAppConfig() {
     const creationData = this.clientCreationDataFromTab();
+    console.log(creationData);
     if (creationData === undefined || this.#setSearchParams === undefined) {
       return;
     }

src/state/app_config.ts

@@ -49,7 +49,10 @@ export class AppConfig {
   }
 
   toParams(): Record<string, string> {
-    return this.clientCreationConfig?.intoParams() ?? {};
+    const config = this.clientCreationConfig?.encodeToString() ?? "";
+    return {
+      config,
+    };
   }
 
   toParamsString(): string {

src/state/models/client_creation_config.ts

@@ -15,36 +15,58 @@ export class ClientCreationConfig {
   static tryFromParams(
     params: Record<string, string>
   ): ClientCreationConfig | undefined {
-    const url = params["url"];
-    if (url) {
-      return new ClientCreationConfig({
-        tag: "url",
-        url: decodeURI(url),
-      });
+    const config = params["config"];
+    if (config == undefined) {
+      return undefined;
     }
-    const lightclient = params["lightclient"];
-    if (lightclient) {
-      return new ClientCreationConfig({
-        tag: "lightclient",
-        chain_name: decodeURI(lightclient),
-      });
+
+    const d = ClientCreationConfig.tryDecodeFromString(config);
+
+    console.log("d", d);
+    return d;
+  }
+
+  static tryDecodeFromString(string: string): ClientCreationConfig | undefined {
+    if (string.length < 4) {
+      return undefined;
+    }
+    const tag = string.substring(0, 3);
+    const data = string.substring(4);
+    console.log("tag", tag);
+    console.log("data", data);
+    switch (tag) {
+      case "url":
+        return new ClientCreationConfig({
+          tag: "url",
+          url: data,
+        });
+      case "lcl": {
+        return new ClientCreationConfig({
+          tag: "lightclient",
+          chain_name: data,
+        });
+      }
     }
-    return undefined;
   }
 
-  intoParams(): Record<string, string> {
-    const params: Record<string, string> = {};
+  encodeToString(): string {
+    let tag: string;
+    let data: string;
 
-    switch (this.#inner?.tag) {
-      case "url":
-        params["url"] = this.#inner.url;
+    switch (this.#inner.tag) {
+      case "url": {
+        tag = "url";
+        data = this.#inner.url;
         break;
-      case "lightclient":
-        params["lightclient"] = this.#inner.chain_name;
+      }
+      case "lightclient": {
+        tag = "lcl";
+        data = this.#inner.chain_name;
         break;
+      }
     }
 
-    return params;
+    return `${tag}_${data}`;
   }
 
   async intoClientCreationData(): Promise<ClientCreationData> {