fix no rerender issue with reactivity on same routes

paritytech · Sep 29, 2023 · 53ab281 · 53ab281
1 parent efe1624
commit 53ab281
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 64 deletions.
diff --git a/codegen/src/wasm_interface.rs b/codegen/src/wasm_interface.rs
@@ -174,7 +174,7 @@ impl Client {
     #[wasm_bindgen(js_name = "fromUrl")]
     pub async fn from_url(url: &str) -> Result<Client, String> {
         console_error_panic_hook::set_once();
-        console_log!("try to create client from url {url}");
+        console_log!("create client from url {url}");
         let client = subxt::OnlineClient::<SubstrateConfig>::from_url(url)
             .await
             .map_err(|e| e.to_string())?;
@@ -205,7 +205,6 @@ impl Client {
         let metadata = self.metadata();
         let pallet_metadata = metadata.pallet_by_name(pallet_name)?;
         let pallet_content = PalletContent::from_pallet_metadata(pallet_metadata);
-        console_log!("pallet {pallet_name} found, content: {pallet_content:?}");
         serde_wasm_bindgen::to_value(&pallet_content)
             .expect("should always work")
             .into()

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,10 +10,11 @@ import { StoragePage } from "./pages/Storage";
 import { ConstantsPage } from "./pages/Constants";
 import { RuntimeApiMethodsPage } from "./pages/RuntimeApiMethods";
 import { EventsPage } from "./pages/Events";
+import { Sidebar } from "./components/Sidebar";
 
 const App: Component = () => {
   return (
-    <Router source={hashIntegration()}>
+    <Router base="/subxt-explorer" source={hashIntegration()}>
       <MdBookWrapper>
         <Routes>
           <Route path="/" component={HomePage}></Route>

diff --git a/src/pages/Calls.tsx b/src/pages/Calls.tsx
@@ -9,16 +9,24 @@ import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
 import { AnchoredH2 } from "../components/AnchoredH2";
 export const CallsPage = () => {
-  let pallet = useParams<{ pallet: string }>().pallet;
-  let calls = appState()?.palletCalls(pallet);
-  if (calls === undefined) {
+  let props = () => {
+    let pallet = useParams<{ pallet: string }>().pallet;
+    let calls = appState()?.palletCalls(pallet);
+    return {
+      pallet,
+      calls,
+    };
+  };
+
+  if (props().calls === undefined) {
     return <Navigate href={"/"} />;
   }
   return (
     <>
-      <h1>{pallet} Pallet: Calls</h1>
-      There are {calls.length} calls available on the {pallet} Pallet.
-      {calls.map(callContent)}
+      <h1>{props().pallet} Pallet: Calls</h1>
+      There are {props().calls!.length} calls available on the {props().pallet}{" "}
+      Pallet.
+      {props().calls!.map(callContent)}
     </>
   );
 };

diff --git a/src/pages/Constants.tsx b/src/pages/Constants.tsx
@@ -14,16 +14,24 @@ import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
 import { AnchoredH2 } from "../components/AnchoredH2";
 export const ConstantsPage = () => {
-  let pallet = useParams<{ pallet: string }>().pallet;
-  let constants = appState()?.palletConstants(pallet);
-  if (constants === undefined) {
+  let props = () => {
+    let pallet = useParams<{ pallet: string }>().pallet;
+    let constants = appState()?.palletConstants(pallet);
+    return {
+      pallet,
+      constants,
+    };
+  };
+
+  if (props().constants === undefined) {
     return <Navigate href={"/"} />;
   }
   return (
     <>
-      <h1>{pallet} Pallet: Constants</h1>
-      There are {constants.length} calls available on the {pallet} Pallet.
-      {constants.map(constantContent)}
+      <h1>{props().pallet} Pallet: Constants</h1>
+      There are {props().constants!.length} calls available on the{" "}
+      {props().pallet} Pallet.
+      {props().constants!.map(constantContent)}
     </>
   );
 };

diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
@@ -15,16 +15,24 @@ import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
 import { AnchoredH2 } from "../components/AnchoredH2";
 
 export const EventsPage = () => {
-  let pallet = useParams<{ pallet: string }>().pallet;
-  let events = appState()?.palletEvents(pallet);
-  if (events === undefined) {
+  let props = () => {
+    let pallet = useParams<{ pallet: string }>().pallet;
+    let events = appState()?.palletEvents(pallet);
+    return {
+      pallet,
+      events,
+    };
+  };
+
+  if (props().events === undefined) {
     return <Navigate href={"/"} />;
   }
   return (
     <>
-      <h1>{pallet} Pallet: Events</h1>
-      There are {events.length} events available on the {pallet} Pallet.
-      {events.map(eventContent)}
+      <h1>{props().pallet} Pallet: Events</h1>
+      There are {props().events!.length} events available on the{" "}
+      {props().pallet} Pallet.
+      {props().events!.map(eventContent)}
     </>
   );
 };

diff --git a/src/pages/Pallet.tsx b/src/pages/Pallet.tsx
@@ -1,62 +1,136 @@
 import { A, Link, Navigate, useParams } from "@solidjs/router";
 import { MdBookWrapper } from "../components/MdBookWrapper";
 import { AppState, PalletContent, appState } from "../state/app_state";
-import { For, JSX } from "solid-js";
+import { For, JSX, createEffect, createSignal } from "solid-js";
 import {
+  activeItem,
   findInSidebarItems,
   setActiveItem,
   sidebarItems,
 } from "../state/sidebar_state";
 import { TryToLink } from "../components/TryLinkTo";
+
+// // refetch pallet when
+// let props = () => {
+//   let _a = activeItem();
+//   let pallet = useParams<{ pallet: string }>().pallet;
+//   let docs = appState()?.palletDocs(pallet);
+//   let content = appState()?.palletContent(pallet);
+//   return {
+//     pallet,
+//     docs,
+//     content,
+//   };
+// };
+
+// return <PalletPageInternal {...props()}></PalletPageInternal>;
+
 export const PalletPage = () => {
-  let pallet = useParams<{ pallet: string }>().pallet;
-  let docs = appState()?.palletDocs(pallet);
-  let content = appState()?.palletContent(pallet);
-  if (docs === undefined || console === undefined) {
+  let props = () => {
+    let pallet = useParams<{ pallet: string }>().pallet;
+    return {
+      docs: appState()?.palletDocs(pallet),
+      content: appState()?.palletContent(pallet),
+      pallet,
+    };
+  };
+  if (props().docs === undefined || props().content === undefined) {
     return <Navigate href={"/"} />;
   }
   return (
     <>
       <h1>
-        <span class="">{pallet}</span> Pallet
+        <span class="">{props().pallet}</span> Pallet
       </h1>
-      There is no Documentation available for the System Pallet.
-      {content!.calls.length > 0 && (
+      There is no Documentation available for the {props().pallet} Pallet.
+      {props().content!.calls.length > 0 && (
         <PalletItemSection
           title="Calls"
-          titleHref={`/pallets/${pallet}/calls`}
-          items={content!.calls}
-          itemToHref={(e) => `/pallets/${pallet}/calls#${e}`}
+          titleHref={`/pallets/${props().pallet}/calls`}
+          items={props().content!.calls}
+          itemToHref={(e) => `/pallets/${props().pallet}/calls#${e}`}
         ></PalletItemSection>
       )}
-      {content!.storage_entries.length > 0 && (
+      {props().content!.storage_entries.length > 0 && (
         <PalletItemSection
           title="Storage Entries"
-          titleHref={`/pallets/${pallet}/storage_entries`}
-          items={content!.storage_entries}
-          itemToHref={(e) => `/pallets/${pallet}/storage_entries#${e}`}
+          titleHref={`/pallets/${props().pallet}/storage_entries`}
+          items={props().content!.storage_entries}
+          itemToHref={(e) => `/pallets/${props().pallet}/storage_entries#${e}`}
         ></PalletItemSection>
       )}
-      {content!.constants.length > 0 && (
+      {props().content!.constants.length > 0 && (
         <PalletItemSection
           title="Constants"
-          titleHref={`/pallets/${pallet}/constants`}
-          items={content!.constants}
-          itemToHref={(e) => `/pallets/${pallet}/constants#${e}`}
+          titleHref={`/pallets/${props().pallet}/constants`}
+          items={props().content!.constants}
+          itemToHref={(e) => `/pallets/${props().pallet}/constants#${e}`}
         ></PalletItemSection>
       )}
-      {content!.events.length > 0 && (
+      {props().content!.events.length > 0 && (
         <PalletItemSection
           title="Events"
-          titleHref={`/pallets/${pallet}/events`}
-          items={content!.events}
-          itemToHref={(e) => `/pallets/${pallet}/events#${e}`}
+          titleHref={`/pallets/${props().pallet}/events`}
+          items={props().content!.events}
+          itemToHref={(e) => `/pallets/${props().pallet}/events#${e}`}
         ></PalletItemSection>
       )}
     </>
   );
 };
 
+// function PalletPageInternal(props: {
+//   pallet: string;
+//   docs: string[] | undefined;
+//   content: PalletContent | undefined;
+// }) {
+//   let docs = appState()?.palletDocs(props.pallet);
+//   let content = appState()?.palletContent(props.pallet);
+//   if (docs === undefined || content === undefined) {
+//     return <Navigate href={"/"} />;
+//   }
+//   return (
+//     <>
+//       <h1>
+//         <span class="">{props.pallet}</span> Pallet
+//       </h1>
+//       There is no Documentation available for the {props.pallet} Pallet.
+//       {content!.calls.length > 0 && (
+//         <PalletItemSection
+//           title="Calls"
+//           titleHref={`/pallets/${props.pallet}/calls`}
+//           items={content!.calls}
+//           itemToHref={(e) => `/pallets/${props.pallet}/calls#${e}`}
+//         ></PalletItemSection>
+//       )}
+//       {content!.storage_entries.length > 0 && (
+//         <PalletItemSection
+//           title="Storage Entries"
+//           titleHref={`/pallets/${props.pallet}/storage_entries`}
+//           items={content!.storage_entries}
+//           itemToHref={(e) => `/pallets/${props.pallet}/storage_entries#${e}`}
+//         ></PalletItemSection>
+//       )}
+//       {content!.constants.length > 0 && (
+//         <PalletItemSection
+//           title="Constants"
+//           titleHref={`/pallets/${props.pallet}/constants`}
+//           items={content!.constants}
+//           itemToHref={(e) => `/pallets/${props.pallet}/constants#${e}`}
+//         ></PalletItemSection>
+//       )}
+//       {content!.events.length > 0 && (
+//         <PalletItemSection
+//           title="Events"
+//           titleHref={`/pallets/${props.pallet}/events`}
+//           items={content!.events}
+//           itemToHref={(e) => `/pallets/${props.pallet}/events#${e}`}
+//         ></PalletItemSection>
+//       )}
+//     </>
+//   );
+// }
+
 type PalletItemSectionProps = {
   title: string;
   titleHref: string;
@@ -71,11 +145,13 @@ function PalletItemSection(props: PalletItemSectionProps): JSX.Element {
         <h2 class="mt-12 text-gray-300 hover:text-pink-500">{props.title}</h2>
       </TryToLink>
       <ul>
-        {props.items.map((item) => (
-          <li class="text-gray-300 hover:text-pink-500">
-            <TryToLink href={props.itemToHref(item)}>{item}</TryToLink>
-          </li>
-        ))}
+        <For each={props.items}>
+          {(item) => (
+            <li class="text-gray-300 hover:text-pink-500">
+              <TryToLink href={props.itemToHref(item)}>{item}</TryToLink>
+            </li>
+          )}
+        </For>
       </ul>
     </>
   );

diff --git a/src/pages/RuntimeApiMethods.tsx b/src/pages/RuntimeApiMethods.tsx
@@ -12,19 +12,27 @@ import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
 import { AnchoredH2 } from "../components/AnchoredH2";
 
 export const RuntimeApiMethodsPage = () => {
-  let runtimeApi = useParams<{ runtime_api: string }>().runtime_api;
-  let docs = appState()?.runtimeApiDocs(runtimeApi);
-  let methods = appState()?.runtimeApiMethods(runtimeApi);
-  if (docs === undefined || methods === undefined) {
+  let props = () => {
+    let runtimeApi = useParams<{ runtime_api: string }>().runtime_api;
+    let docs = appState()?.runtimeApiDocs(runtimeApi);
+    let methods = appState()?.runtimeApiMethods(runtimeApi);
+    return {
+      runtimeApi,
+      docs,
+      methods,
+    };
+  };
+
+  if (props().docs === undefined || props().methods === undefined) {
     return <Navigate href={"/"} />;
   }
   return (
     <>
-      <h1>Runtime API: {runtimeApi}</h1>
-      {docs && <Docs mdDocs={docs} />}
-      There are {methods.length} methods available on the {runtimeApi} Runtime
-      API.
-      {methods.map((method) => methodContent(method))}
+      <h1>Runtime API: {props().runtimeApi}</h1>
+      {props().docs && <Docs mdDocs={props().docs!} />}
+      There are {props().methods!.length} methods available on the{" "}
+      {props().runtimeApi} Runtime API.
+      {props().methods!.map((method) => methodContent(method))}
     </>
   );
 };

diff --git a/src/pages/Storage.tsx b/src/pages/Storage.tsx
@@ -12,16 +12,26 @@ import {
 } from "../components/KeyValueTypesLayout";
 import { AnchoredH2 } from "../components/AnchoredH2";
 export const StoragePage = () => {
-  let pallet = useParams<{ pallet: string }>().pallet;
-  let entries = appState()?.palletStorageEntries(pallet);
-  if (entries === undefined) {
+  let props = () => {
+    let pallet = useParams<{ pallet: string }>().pallet;
+    let entries = appState()?.palletStorageEntries(pallet);
+    return {
+      pallet,
+      entries,
+    };
+  };
+
+  if (props().entries === undefined) {
     return <Navigate href={"/"} />;
   } else {
     return (
       <>
-        <h1>{pallet} Pallet: Storage Entries</h1>
-        There are {entries.length} storage entries on the {pallet} Pallet.
-        {entries.map((entry) => storageEntryContent(appState()!, entry))}
+        <h1>{props().pallet} Pallet: Storage Entries</h1>
+        There are {props().entries!.length} storage entries on the{" "}
+        {props().pallet} Pallet.
+        {props().entries!.map((entry) =>
+          storageEntryContent(appState()!, entry)
+        )}
       </>
     );
   }