Add default example on page load (#2834)

site/src/components/components/ExamplesListView.tsx

@@ -1,4 +1,11 @@
-import { FC, ReactElement, useState, Children } from "react";
+import {
+  FC,
+  ReactElement,
+  useState,
+  Children,
+  useEffect,
+  useMemo,
+} from "react";
 import {
   List,
   SelectionChangeHandler,
@@ -9,22 +16,49 @@ import useIsMobileView from "../../utils/useIsMobileView";
 import { formatComponentExampleName } from "./formatComponentExampleName";
 
 import styles from "./ExamplesListView.module.css";
+import { useParams, useRouter } from "next/navigation";
 
 type ExamplesListViewProps = { examples: ReactElement[] };
 
+function exampleNameToHash(exampleName: string) {
+  return exampleName.toLowerCase().replaceAll(" ", "-");
+}
+
 const ExamplesListView: FC<ExamplesListViewProps> = ({ examples }) => {
-  const examplesList: string[] = Children.map(examples, ({ props }) =>
-    formatComponentExampleName(props.exampleName, props.displayName)
-  );
+  const params = useParams();
+  const router = useRouter();
 
-  const [selectedItem, setSelectedItem] = useState<string | null>(
-    examplesList[0]
+  const examplesList: string[] = useMemo(
+    () =>
+      Children.map(examples, ({ props }) =>
+        formatComponentExampleName(props.exampleName, props.displayName)
+      ),
+    [examples]
   );
 
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+
+  useEffect(() => {
+    // window.location.hash could be #hash?query=string and we only want the #hash part.
+    const hash = window.location.hash.substring(1).split("?")[0];
+    const exampleInHash = examplesList.find(
+      (example) => exampleNameToHash(example) === hash
+    );
+    setSelectedItem(exampleInHash ?? examplesList[0]);
+  }, [examplesList, params]);
+
   const isMobileView = useIsMobileView();
 
   const handleSelect: SelectionChangeHandler = (_, selectedItem) => {
     setSelectedItem(selectedItem);
+    if (selectedItem) {
+      const hash = `#${exampleNameToHash(selectedItem)}`;
+      if (window.history.pushState) {
+        window.history.pushState(null, "", hash);
+      } else {
+        window.location.hash = hash;
+      }
+    }
   };
 
   const examplesArray = Children.toArray(examples) as ReactElement[];