Merge pull request #5 from paritytech/config-from-url

Sharable URLs for Online Clients
paritytech · Oct 26, 2023 · 26cb525 · 26cb525
2 parents 0d4fb1e + 7a0bb52
commit 26cb525
Show file tree

Hide file tree

Showing 25 changed files with 737 additions and 269 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,30 @@
-import { Switch, type Component, Match } from "solid-js";
+import {
+  Switch,
+  type Component,
+  Match,
+  createResource,
+  Suspense,
+  Show,
+  createEffect,
+  useTransition,
+  useContext,
+} from "solid-js";
 import { MdBookWrapper } from "./components/MdBookWrapper";
-import { HomePage } from "./pages/Home";
-import { Route, Router, Routes, hashIntegration } from "@solidjs/router";
+import { HomePage, HomePageState } from "./pages/Home";
+import {
+  Navigate,
+  Route,
+  Router,
+  Routes,
+  hashIntegration,
+  memoryIntegration,
+  pathIntegration,
+  useBeforeLeave,
+  useLocation,
+  useNavigate,
+  useRouteData,
+  useSearchParams,
+} from "@solidjs/router";
 import { RuntimeApisPage } from "./pages/RuntimeApis";
 import { CustomValuesPage } from "./pages/CustomValues";
 import { PalletPage } from "./pages/Pallet";
@@ -11,33 +34,87 @@ import { ConstantsPage } from "./pages/Constants";
 import { RuntimeApiMethodsPage } from "./pages/RuntimeApiMethods";
 import { EventsPage } from "./pages/Events";
 import { Sidebar } from "./components/Sidebar";
+import { ClientKind, initAppState } from "./state/client_wrapper";
+import { wait } from "./utils";
+import { DebugComponent } from "./components/DebugComponent";
+import { AppConfig, paramsToString } from "./state/app_config";
+import { RedirectToHome } from "./components/RedirectToHome";
 
 const App: Component = () => {
+  // this happens only once on page load:
+  const location = useLocation();
+  let config = AppConfig.fromParams(location.query);
+  HomePageState.instance.appConfig = config;
+
+  // listen to all client side solid router route change events:
+  // If the url params indicate a different app config, reload the web app with that config.
+  createEffect(() => {
+    let pathname = location.pathname;
+    let params = location.query;
+
+    let configFromParams = AppConfig.fromParams(params);
+    console.log(
+      "CreateEffect: ",
+      pathname,
+      Object.entries(params),
+      configFromParams
+    );
+    if (!configFromParams.equals(HomePageState.instance.appConfig)) {
+      console.log(
+        "CreateEffect: config changed to",
+        configFromParams,
+        location.pathname
+      );
+      HomePageState.instance.appConfig = configFromParams;
+      if (pathname === "/" || pathname === "") {
+        console.log("HOME");
+        // if already on homepage adjust its UI to the new config:
+        HomePageState.instance.onHomePageLoad();
+      } else {
+        console.log("NOT HOME:", pathname);
+        // otherwise navigate to homepage and set redirect hook:
+        let redirectUrl = `/?${configFromParams.toParamsString()}`;
+        console.log("WAS NOT AT HOME: redirecting to", redirectUrl);
+        HomePageState.instance.setRedirectPath(pathname);
+        let navigate = useNavigate();
+        navigate(redirectUrl, { replace: true });
+      }
+    }
+  });
+
   return (
-    <Router source={hashIntegration()}>
-      <MdBookWrapper>
-        <Routes>
-          <Route path="/" component={HomePage}></Route>
-          <Route path="/runtime_apis" component={RuntimeApisPage}></Route>
-          <Route
-            path="/runtime_apis/:runtime_api"
-            component={RuntimeApiMethodsPage}
-          ></Route>
-          <Route path="/custom_values" component={CustomValuesPage}></Route>
-          <Route path="/pallets/:pallet" component={PalletPage}></Route>
-          <Route path="/pallets/:pallet/calls" component={CallsPage}></Route>
-          <Route path="/pallets/:pallet/events" component={EventsPage}></Route>
-          <Route
-            path="/pallets/:pallet/storage_entries"
-            component={StoragePage}
-          ></Route>
-          <Route
-            path="/pallets/:pallet/constants"
-            component={ConstantsPage}
-          ></Route>
-        </Routes>
-      </MdBookWrapper>
-    </Router>
+    <MdBookWrapper>
+      <Routes>
+        <Route path="/debug" component={DebugComponent}></Route>
+        <Route path="/" component={HomePage}></Route>
+        <Route path="/runtime_apis" component={RuntimeApisPage}></Route>
+        <Route
+          path="/runtime_apis/:runtime_api"
+          component={RuntimeApiMethodsPage}
+        ></Route>
+        <Route path="/custom_values" component={CustomValuesPage}></Route>
+        <Route path="/pallets/:pallet" component={PalletPage}></Route>
+        <Route path="/pallets/:pallet/calls" component={CallsPage}></Route>
+        <Route path="/pallets/:pallet/events" component={EventsPage}></Route>
+        <Route
+          path="/pallets/:pallet/storage_entries"
+          component={StoragePage}
+        ></Route>
+        <Route
+          path="/pallets/:pallet/constants"
+          component={ConstantsPage}
+        ></Route>
+
+        <Route
+          path={"*"}
+          component={() => {
+            return <RedirectToHome></RedirectToHome>;
+          }}
+        >
+          {/*  */}
+        </Route>
+      </Routes>
+    </MdBookWrapper>
   );
 };
 

diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -41,7 +41,6 @@ export const Code = ({ code }: { code: string }): JSX.Element => {
                 codeToCopy = code;
               }
               navigator.clipboard.writeText(codeToCopy);
-              console.log("Code copied to clipboard:", codeToCopy);
             }}
           >
             <i class="tooltiptext"></i>

diff --git a/src/components/DebugComponent.tsx b/src/components/DebugComponent.tsx
@@ -1,5 +1,20 @@
+import { useRouteData, useSearchParams } from "@solidjs/router";
 import { JSX } from "solid-js";
 
 export const DebugComponent = (): JSX.Element => {
-  return <></>;
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          let searchParams = new URLSearchParams(window.location.search);
+          searchParams.set("foo", Math.random().toString());
+          // setSearchParams({ hello:  });
+        }}
+      >
+        Press
+      </button>
+    </>
+  );
 };
diff --git a/src/components/KeyValueTypesLayout.tsx b/src/components/KeyValueTypesLayout.tsx
@@ -1,6 +1,6 @@
 import { Component, JSX, Show, createSignal } from "solid-js";
 import { highlight } from "./Code";
-import { NameAndType, TypeDescription } from "../state/app_state";
+import { NameAndType, TypeDescription } from "../state/client_wrapper";
 export interface Props {
   keyTypes?: KeyTypesSection;
   valueType?: ValueTypeSection;

diff --git a/src/components/MenuBar.tsx b/src/components/MenuBar.tsx
@@ -1,5 +1,5 @@
 import { Component, onMount } from "solid-js";
-import { setSidebar, toggleSidebar } from "../state/visual_state";
+import { setSidebarVisibility, toggleSidebar } from "../state/visual_state";
 interface Props {}
 export const MenuBar: Component<Props> = (props: Props) => {
   return (

diff --git a/src/components/NavWideWrapper.tsx b/src/components/NavWideWrapper.tsx
@@ -1,6 +1,7 @@
 import { Component, Show } from "solid-js";
 import { SidebarItem, activeItem, setActiveItem } from "../state/sidebar_state";
 import { Link } from "@solidjs/router";
+import { HomePageState } from "../pages/Home";
 interface Props {
   activeItem: SidebarItem;
 }
@@ -10,13 +11,14 @@ export const NavWideWrapper: Component<Props> = (props: Props) => {
       <Show when={props.activeItem.prev !== undefined}>
         <Link
           rel="prev"
-          href={props.activeItem.prev!.path}
+          href={`${
+            props.activeItem.prev!.path
+          }?${HomePageState.instance.appConfigParamString()}`}
           class="nav-chapters previous"
           title={props.activeItem.prev!.title}
           aria-label="Previous chapter"
           aria-keyshortcuts="Left"
           onClick={() => {
-            console.log(props.activeItem);
             setActiveItem(props.activeItem.prev!);
           }}
         >
@@ -27,7 +29,9 @@ export const NavWideWrapper: Component<Props> = (props: Props) => {
       <Show when={props.activeItem.next !== undefined}>
         <Link
           rel="next"
-          href={props.activeItem.next!.path}
+          href={`${
+            props.activeItem.next!.path
+          }?${HomePageState.instance.appConfigParamString()}`}
           class="nav-chapters next"
           title={props.activeItem.next!.title}
           aria-label="Next chapter"

diff --git a/src/components/NavWrapper.tsx b/src/components/NavWrapper.tsx
@@ -1,6 +1,7 @@
 import { Link } from "@solidjs/router";
 import { Component, Show } from "solid-js";
 import { SidebarItem, activeItem, setActiveItem } from "../state/sidebar_state";
+import { HomePageState } from "../pages/Home";
 interface Props {
   activeItem: SidebarItem;
 }
@@ -10,13 +11,14 @@ export const NavWrapper: Component<Props> = (props: Props) => {
       <Show when={props.activeItem.prev !== undefined}>
         <Link
           rel="prev"
-          href={props.activeItem.prev!.path}
+          href={`${
+            props.activeItem.prev!.path
+          }?${HomePageState.instance.appConfigParamString()}`}
           class="mobile-nav-chapters previous"
           title={props.activeItem.prev!.title}
           aria-label="Previous chapter"
           aria-keyshortcuts="Left"
           onClick={() => {
-            console.log("nav wrapper: ", props.activeItem.prev);
             setActiveItem(props.activeItem.prev!);
           }}
         >
@@ -27,7 +29,9 @@ export const NavWrapper: Component<Props> = (props: Props) => {
       <Show when={props.activeItem.next !== undefined}>
         <Link
           rel="next"
-          href={props.activeItem.next!.path}
+          href={`${
+            props.activeItem.next!.path
+          }?${HomePageState.instance.appConfigParamString()}`}
           class="mobile-nav-chapters next"
           title={props.activeItem.next!.title}
           aria-label="Next chapter"

diff --git a/src/components/RedirectToHome.tsx b/src/components/RedirectToHome.tsx
@@ -0,0 +1,12 @@
+import { Navigate, useLocation } from "@solidjs/router";
+import { AppConfig, paramsToString } from "../state/app_config";
+import { JSX } from "solid-js";
+import { HomePageState } from "../pages/Home";
+
+export function RedirectToHome(): JSX.Element {
+  const location = useLocation();
+  let config = AppConfig.fromParams(location.query);
+  let redirectUrl = `/?${config.toParamsString()}`;
+  HomePageState.instance.setRedirectPath(location.pathname);
+  return <Navigate href={redirectUrl} />;
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Component, For, JSX, createSignal } from "solid-js";
-import { MetadataSource, appState } from "../state/app_state";
+import { ClientKind, clientWrapper } from "../state/client_wrapper";
 import { Link } from "@solidjs/router";
 import {
   HOME_ITEM,
@@ -9,6 +9,7 @@ import {
   setActiveItem,
   sidebarItems,
 } from "../state/sidebar_state";
+import { HomePageState } from "../pages/Home";
 interface Props {}
 
 export const Sidebar: Component<Props> = (props: Props) => {
@@ -18,7 +19,7 @@ export const Sidebar: Component<Props> = (props: Props) => {
         <ol class="chapter">
           <li class="chapter-item expanded affix">
             <Link
-              href="/"
+              href={`/?${HomePageState.instance.appConfigParamString()}`}
               activeClass=""
               onClick={() => {
                 setActiveItem(HOME_ITEM);
@@ -34,9 +35,9 @@ export const Sidebar: Component<Props> = (props: Props) => {
               </h1>
             </Link>
           </li>
-          {appState() && (
+          {clientWrapper() && (
             <li class="part-title leading-6 pt-6 pb-3">
-              {metadataSourceSpan(appState()!.source)}
+              {metadataSourceSpan(clientWrapper()!.clientKindInCreation!)}
             </li>
           )}
 
@@ -60,7 +61,7 @@ function sideBarItem(item: SidebarItem): JSX.Element {
     <>
       <li class="chapter-item expanded ">
         <Link
-          href={item.path}
+          href={`${item.path}?${HomePageState.instance.appConfigParamString()}`}
           activeClass=""
           onClick={() => {
             setActiveItem(item);
@@ -99,20 +100,20 @@ function sideBarItem(item: SidebarItem): JSX.Element {
   );
 }
 
-function metadataSourceSpan(source: MetadataSource): JSX.Element {
-  switch (source.tag) {
+function metadataSourceSpan(ck: ClientKind): JSX.Element {
+  switch (ck.tag) {
     case "url":
       return (
         <span>
           {"Connected to: "}
-          <span class="text-pink-500">{source.url}</span>
+          <span class="text-pink-500">{ck.url}</span>
         </span>
       );
     case "file":
       return (
         <span>
           {"Metadata from: "}
-          <span class="text-pink-500">{source.file.name}</span>
+          <span class="text-pink-500">{ck.file.name}</span>
         </span>
       );
   }

diff --git a/src/components/TryLinkTo.tsx b/src/components/TryLinkTo.tsx
@@ -14,7 +14,6 @@ export const TryToLink = (props: {
       onClick={() => {
         let splitPath = props.href.split("#")[0];
         let found = findInSidebarItems((e) => e.path == splitPath);
-        console.log("found", found);
         if (found) {
           setActiveItem(found);
         }

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,7 @@
 import { render } from "solid-js/web";
 
 import App from "./App";
+import { Router, hashIntegration } from "@solidjs/router";
 
 // body container is a special id used for styling in md-book
 const root = document.getElementById("body-container");
@@ -11,4 +12,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
-render(() => <App />, root!);
+render(
+  () => (
+    <Router source={hashIntegration()}>
+      <App />{" "}
+    </Router>
+  ),
+  root!
+);