feat: add url hash and scroll to method

celestiaorg · Oct 7, 2023 · a97323b · a97323b
1 parent 13eeb91
commit a97323b
Showing 1 changed file with 57 additions and 17 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -111,7 +111,8 @@ export default function Example() {
       try {
         const response = await axios.get(`/specs/openrpc-${version}.json`);
         setSpec(response.data);
-        window.history.replaceState({}, '', `?version=${version}`);
+        const hash = window.location.hash;
+        window.history.replaceState({}, '', `?version=${version}${hash}`);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('Error fetching JSON data:', error);
@@ -137,6 +138,23 @@ export default function Example() {
     }
   }, []);
 
+  useEffect(() => {
+    if (spec) {
+      setTimeout(() => {
+        const hash = window.location.hash.substring(1);
+        const element = document.getElementById(hash);
+
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'nearest',
+          });
+        }
+      }, 1000);
+    }
+  }, [spec]);
+
   const activateSidebar = (param: any) => {
     setOpen(true);
     setCurrentParam(param);
@@ -508,13 +526,17 @@ export default function Example() {
                                 </h3>
                               </a>
                               {filteredMethods.map((method) => (
-                                <RPCMethod
+                                <div
                                   key={`${pkg}.${method.name}`}
-                                  pkg={pkg}
-                                  method={method}
-                                  activateSidebar={activateSidebar}
-                                  selectedVersion={selectedVersion} // pass selectedVersion here
-                                />
+                                  id={`${pkg}.${method.name}`}
+                                >
+                                  <RPCMethod
+                                    pkg={pkg}
+                                    method={method}
+                                    activateSidebar={activateSidebar}
+                                    selectedVersion={selectedVersion}
+                                  />
+                                </div>
                               ))}
                             </div>
                           );
@@ -626,18 +648,31 @@ const RPCMethod = ({
   const [showResponse, setShowResponse] = useState(false);
   const methodRef = useRef<HTMLDivElement>(null); // create a ref
 
+  // const handleCopyClick = () => {
+  //   methodRef.current?.scrollIntoView({
+  //     behavior: 'auto',
+  //     block: 'start',
+  //     inline: 'nearest',
+  //   });
+  //   const newUrl = `${window.location.origin}/?version=${selectedVersion}#${pkg}.${method.name}`;
+  //   window.history.pushState({}, '', newUrl);
+  //   const offset = window.innerWidth >= 768 ? -5 : -70;
+  //   window.scrollBy(0, offset);
+  // };
+
   const handleCopyClick = () => {
-    methodRef.current?.scrollIntoView({
-      behavior: 'auto',
-      block: 'start',
-      inline: 'nearest',
-    });
-    const offset = window.innerWidth >= 768 ? -5 : -70;
-    window.scrollBy(0, offset);
+    const hash = window.location.hash.substring(1);
+    const element = document.getElementById(hash);
+    element?.scrollIntoView();
   };
 
   return (
-    <div key={method.name} className='py-2' ref={methodRef}>
+    <div
+      key={`${pkg}.${method.name}`}
+      id={`${pkg}.${method.name}`}
+      className='py-2'
+      ref={methodRef}
+    >
       <div className='flex items-center justify-between'>
         <p className='text-md'>
           {method.name}(
@@ -653,7 +688,7 @@ const RPCMethod = ({
               </span>
             </span>
           ))}
-          )
+          n )
           {method.result.description != 'Null' && (
             <span
               className='ml-2 text-sm text-blue-500 hover:cursor-pointer hover:font-bold'
@@ -670,7 +705,12 @@ const RPCMethod = ({
           text={`${window.location.origin}/?version=${selectedVersion}#${pkg}.${method.name}`}
           onCopy={handleCopyClick}
         >
-          <span className='cursor-pointer text-gray-500 hover:text-blue-500'>
+          <span
+            className='cursor-pointer text-gray-500 hover:text-blue-500'
+            onClick={() => {
+              window.location.hash = `${pkg}.${method.name}`;
+            }}
+          >
             #
           </span>
         </CopyToClipboard>