Refactor: re-use useHash, fix types

Author: SukkaW

src/app/errors/[errorCode]/page.tsx

@@ -36,7 +36,7 @@ export async function generateStaticParams(): Promise<
 
 export async function generateMetadata(
   {params}: ErrorDecoderPageProps,
-  parent?: ResolvingMetadata
+  parent: Promise<ResolvingMetadata | undefined>
 ): Promise<Metadata> {
   const {errorCode} = await params;
   const resolvedParent = await parent;

src/components/MDX/Challenges/Challenges.tsx

@@ -16,7 +16,7 @@ import {H2} from 'components/MDX/Heading';
 import {H4} from 'components/MDX/Heading';
 import {Challenge} from './Challenge';
 import {Navigation} from './Navigation';
-import {useRouter} from 'next/compat/router';
+import {useHash} from '../../../hooks/useHash';
 
 interface ChallengesProps {
   children: React.ReactElement[];
@@ -97,12 +97,12 @@ export function Challenges({
   const queuedScrollRef = useRef<undefined | QueuedScroll>(QueuedScroll.INIT);
   const [activeIndex, setActiveIndex] = useState(0);
   const currentChallenge = challenges[activeIndex];
-  const {asPath} = useRouter();
+  const hash = useHash();
 
   useEffect(() => {
     if (queuedScrollRef.current === QueuedScroll.INIT) {
       const initIndex = challenges.findIndex(
-        (challenge) => challenge.id === asPath.split('#')[1]
+        (challenge) => challenge.id === hash
       );
       if (initIndex === -1) {
         queuedScrollRef.current = undefined;

src/components/MDX/ExpandableExample.tsx

@@ -18,20 +18,8 @@ import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
 import {Button} from '../Button';
 import {H4} from './Heading';
-import {useEffect, useRef, useState, useSyncExternalStore} from 'react';
-
-function useHash() {
-  return useSyncExternalStore(
-    (callback) => {
-      window.addEventListener('hashchange', callback);
-      return () => {
-        window.removeEventListener('hashchange', callback);
-      };
-    },
-    () => window.location.hash,
-    () => null
-  );
-}
+import {useEffect, useRef, useState} from 'react';
+import {useHash} from '../../hooks/useHash';
 
 interface ExpandableExampleProps {
   children: React.ReactNode;

src/hooks/useHash.ts

@@ -0,0 +1,14 @@
+import {useSyncExternalStore} from 'react';
+
+export function useHash() {
+  return useSyncExternalStore(
+    (onChange) => {
+      window.addEventListener('hashchange', onChange);
+      return () => {
+        window.removeEventListener('hashchange', onChange);
+      };
+    },
+    () => window.location.hash,
+    () => null
+  );
+}