feat-search-params

Author: nonbots

src/components/conformance/HeroBanner/index.tsx

@@ -7,6 +7,7 @@ import {
 import {
   createState,
   mapToTestStats,
+  createSearchParams
 } from "@site/src/components/conformance/utils";
 import { useHistory } from "@docusaurus/router";
 import Heading from "@theme/Heading";
@@ -86,6 +87,7 @@ function BannerCard(props) {
             className="button button--block button--primary"
             onClick={() =>
               history.push({
+                search: createSearchParams(props.item),
                 pathname: "/conformance",
                 state: createState(props.item),
               })

src/components/conformance/ResultsDisplay/index.tsx

@@ -9,9 +9,10 @@ import {
 import ResultNavigation from "./nav";
 import {
   createState,
+  createSearchParams,
   mapToResultInfo,
 } from "@site/src/components/conformance/utils";
-import { useHistory } from "@docusaurus/router";
+import { useHistory, useLocation } from "@docusaurus/router";
 
 import styles from "./styles.module.css";
 
@@ -20,6 +21,7 @@ type ResultsProps = {
 };
 
 export default function ResultsDisplay(props: ResultsProps): JSX.Element {
+  const location = useLocation<ConformanceState>()
   const [currentSuite, setCurrentSuite] = React.useState<SuiteResult | null>(
     null,
   );
@@ -30,9 +32,10 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // History handling
   const history = useHistory<ConformanceState>();
 
-  const pushStateToHistory = (state: ConformanceState): void => {
+  const pushStateToHistory = (search: string, state: ConformanceState): void => {
     history.push({
       pathname: "/conformance",
+      search,
       state,
     });
   };
@@ -91,6 +94,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   const navigateToSuite = (newSuiteName: string) => {
     const newPath = [...props.state.testPath, newSuiteName];
     pushStateToHistory(
+      createSearchParams(props.state.version, newPath),
       createState(
         props.state.version,
         newPath,
@@ -106,6 +110,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   const sliceNavToIndex = (nonInclusiveIndex: number) => {
     const slicedPath = [...props.state.testPath.slice(0, nonInclusiveIndex)];
     pushStateToHistory(
+      createSearchParams(props.state.version, slicedPath),
       createState(
         props.state.version,
         slicedPath,
@@ -119,6 +124,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   const setEcmaScriptFlag = (flag: string) => {
     const nulledFlag = flag ? flag : undefined;
     pushStateToHistory(
+      createSearchParams(props.state.version, props.state.testPath, props.state.selectedTest),
       createState(
         props.state.version,
         props.state.testPath,
@@ -131,6 +137,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // Sets the sorting option
   const setSortOption = (option: string) => {
     pushStateToHistory(
+      createSearchParams(props.state.version, props.state.testPath, props.state.selectedTest),
       createState(
         props.state.version,
         props.state.testPath,
@@ -143,6 +150,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // Sets a selected test.
   const setSelectedTest = (test: string | undefined) => {
     pushStateToHistory(
+      createSearchParams(props.state.version, props.state.testPath, test),
       createState(
         props.state.version,
         props.state.testPath,

src/components/conformance/VersionSelector/index.tsx

@@ -5,7 +5,7 @@ import {
   VersionItem,
 } from "@site/src/components/conformance/types";
 import styles from "./styles.module.css";
-import { createState } from "../utils";
+import { createState, createSearchParams } from "../utils";
 
 interface SelectorProps {
   availableVersions: VersionItem[];
@@ -38,6 +38,7 @@ function Version(props: VersionProps): JSX.Element {
         onClick={() =>
           history.push({
             pathname: "/conformance",
+            search: createSearchParams(props.version),
             state: createState(props.version),
           })
         }

src/components/conformance/types.ts

@@ -1,15 +1,22 @@
+
 // The main global state of the conformance page.
 //
 // This state is fed into the History object and dictates
 // what renders.
 export type ConformanceState = {
-  version: VersionItem;
-  testPath: string[];
+  version: VersionItem; // REMOVED (???) -> Connected to displaying specific results
+  testPath: string[]; // REMOVED (???) -> Navigation / breadcrumbs
   ecmaScriptVersion: string | undefined;
   sortOption: string;
-  selectedTest: string | undefined;
+  selectedTest: string | undefined; // REMOVED (???) -> "TestViewer"
 };
 
+export type UrlState = {
+  versionTag: string | undefined,
+  testPath: string[] | undefined,
+  selectedTest: string | undefined,
+}
+
 export type VersionItem = {
   tagName: string;
   fetchUrl: string;

src/components/conformance/utils.ts

@@ -7,10 +7,56 @@ import {
   TestOutcome,
   TestResult,
   TestStats,
+  UrlState,
   VersionedStats,
   VersionItem,
 } from "@site/src/components/conformance/types";
 
+
+// Take a search param and create a state object
+export function createUrlState(search: string): UrlState {
+  const params = new URLSearchParams(search);
+  console.log(`testPath: ${params.get("testPath")}`)
+  return {
+    versionTag: params.get("version") ?? undefined,
+    testPath: params.get("testPath")?.split("/") ?? undefined,
+    selectedTest: params.get("selectedTest") ?? undefined
+  }
+}
+
+export function updateInitialConformanceState(urlState: UrlState, conformanceState: ConformanceState) {
+
+  if (!conformanceState && (urlState.versionTag || urlState.testPath || urlState.selectedTest)) {
+    const fetchUrl = urlState.versionTag === "main" ? `https://raw.githubusercontent.com/boa-dev/data/main/test262/refs/heads/main/latest.json` : `https://raw.githubusercontent.com/boa-dev/data/main/test262/refs/tags/${urlState.versionTag}/latest.json`;
+
+    const testPath = urlState.testPath || [];
+    return {
+      version: { tagName: urlState.versionTag, fetchUrl },
+      testPath: [urlState.versionTag, ...testPath],
+      ecmaScriptVersion: undefined,
+      sortOption: availableSortingOptions[0].id,
+      selectedTest: urlState.selectedTest
+    }
+  }
+  return conformanceState;
+}
+
+export function createSearchParams(
+  version: VersionItem,
+  testPath?: string[],
+  selectedTest?: string,
+) {
+  const search = new URLSearchParams()
+  search.append("version", version.tagName);
+  if (testPath) {
+    search.append("testPath", testPath.slice(1).join("/"));
+  }
+  if (selectedTest) {
+    search.append("selectedTest", selectedTest)
+  }
+  return search.toString()
+}
+
 // Creates the state object from provided args
 export function createState(
   version: VersionItem,

src/pages/conformance/index.tsx

@@ -2,7 +2,12 @@ import ConformanceView from "@site/src/components/conformance";
 import {
   VersionItem,
   ConformanceState,
+  UrlState,
 } from "@site/src/components/conformance/types";
+import {
+  createUrlState,
+  updateInitialConformanceState
+} from "@site/src/components/conformance/utils";
 import { useLocation } from "@docusaurus/router";
 import Layout from "@theme/Layout";
 import React from "react";
@@ -21,6 +26,8 @@ export default function Conformance() {
     VersionItem[] | undefined
   >(null);
 
+  const urlState = createUrlState(location.search);
+
   // Initial Render useEffect
   React.useEffect(() => {
     const validateReleaseVersion = (releaseTag: string) => {
@@ -61,11 +68,14 @@ export default function Conformance() {
     );
   }, []);
 
+
+  const resolvedState = updateInitialConformanceState(urlState, location.state)
+
   return (
     <Layout title="Conformance" description="Boa Conformance Page">
       <main className={styles.mainLayout}>
         {releaseRecords ? (
-          <ConformanceView state={location.state} records={releaseRecords} />
+          <ConformanceView state={resolvedState} records={releaseRecords} />
         ) : null}
       </main>
     </Layout>