JSX.Element => React.ReactNode

Author: nekevss

src/components/HomepageFeatures/index.tsx

@@ -9,7 +9,7 @@ import Heading from "@theme/Heading";
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<"svg">>;
-  description: JSX.Element;
+  description: React.ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -52,7 +52,7 @@ function Feature({ title, description }: FeatureItem) {
   );
 }
 
-export default function HomepageFeatures(): JSX.Element {
+export default function HomepageFeatures(): React.ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">

src/components/conformance/HeroBanner/index.tsx

@@ -18,7 +18,9 @@ interface BannerProps {
   focusItems: VersionItem[];
 }
 
-export default function ConformanceHeroBanner(props: BannerProps): JSX.Element {
+export default function ConformanceHeroBanner(
+  props: BannerProps,
+): React.ReactNode {
   return (
     <div className={styles.bannerSection}>
       {props.focusItems.map((item) => {

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestGrid/index.tsx

@@ -17,7 +17,7 @@ type TestsGridProps = {
   selectTest: (string) => void;
 };
 
-export default function TestsGrid(props: TestsGridProps): JSX.Element {
+export default function TestsGrid(props: TestsGridProps): React.ReactNode {
   const [hoverName, setHoverName] = React.useState<undefined | string>();
   const cardBodyClass = "card__body " + styles.gridStyle;
 
@@ -64,7 +64,7 @@ function applyFilter(filter: FilterOption, outcome: TestOutcome): boolean {
   }
 }
 
-function Grid(props: GridProps): JSX.Element {
+function Grid(props: GridProps): React.ReactNode {
   return (
     <>
       {props.esFlag
@@ -103,7 +103,7 @@ type GridItemProps = {
   setHoverValue: (test: string | undefined) => void;
 };
 
-function GridItem(props: GridItemProps): JSX.Element {
+function GridItem(props: GridItemProps): React.ReactNode {
   let testResult: string;
   switch (props.test.result) {
     case TestOutcome.Passed:

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestViewer/index.tsx

@@ -10,7 +10,7 @@ type TestViewerProps = {
   backToGrid: () => void;
 };
 
-export default function TestViewer(props: TestViewerProps): JSX.Element {
+export default function TestViewer(props: TestViewerProps): React.ReactNode {
   const [testContent, setTestContent] = React.useState<string | null>(null);
 
   // path constants

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/index.tsx

@@ -15,7 +15,9 @@ type SuiteDataProps = {
   setSelectedTest: (string) => void;
 };
 
-export default function SuiteDataContainer(props: SuiteDataProps): JSX.Element {
+export default function SuiteDataContainer(
+  props: SuiteDataProps,
+): React.ReactNode {
   // Set the user's selected test to be displayed in the ViewPort.
   const selectTest = (testName: string) => {
     props.setSelectedTest(testName);

src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx

@@ -16,7 +16,9 @@ type SuiteDisplayProps = {
   setSelectedTest: (string) => void;
 };
 
-export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
+export default function SuiteDisplay(
+  props: SuiteDisplayProps,
+): React.ReactNode {
   return (
     <div className={styles.suiteDisplay}>
       {props.currentSuite.suites ? (

src/components/conformance/ResultsDisplay/components/SuiteSelector/index.tsx

@@ -16,7 +16,7 @@ type SelectorProps = {
   navigateToSuite: (string) => void;
 };
 
-export default function SuiteSelector(props: SelectorProps): JSX.Element {
+export default function SuiteSelector(props: SelectorProps): React.ReactNode {
   const option: SortOption[] = availableSortingOptions.filter(
     (v) => v.id === props.state.sortOption,
   );
@@ -52,7 +52,7 @@ type SuiteItemProps = {
   navigateToSuite: (string) => void;
 };
 
-function SuiteItem(props: SuiteItemProps): JSX.Element {
+function SuiteItem(props: SuiteItemProps): React.ReactNode {
   return (
     <div
       className={styles.suiteCard}
@@ -81,7 +81,7 @@ type StatProps = {
 function SuiteStatistics({
   testResults,
   filterOption,
-}: StatProps): JSX.Element {
+}: StatProps): React.ReactNode {
   const [filter, setFilter] = React.useState(filterOption);
 
   React.useEffect(() => {

src/components/conformance/ResultsDisplay/index.tsx

@@ -21,8 +21,7 @@ type ResultsProps = {
   state: ConformanceState;
 };
 
-export default function ResultsDisplay(props: ResultsProps): JSX.Element {
-  const location = useLocation<ConformanceState>();
+export default function ResultsDisplay(props: ResultsProps): React.ReactNode {
   const [currentSuite, setCurrentSuite] = React.useState<SuiteResult | null>(
     null,
   );
@@ -167,6 +166,11 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
   // This filters the tests shown in the selection cards and tests grid
   const setFilterOption = (option: string) => {
     pushStateToHistory(
+      createSearchParams(
+        props.state.version,
+        props.state.testPath,
+        props.state.selectedTest,
+      ),
       createState(
         props.state.version,
         props.state.testPath,

src/components/conformance/ResultsDisplay/nav.tsx

@@ -14,7 +14,9 @@ type ResultsNavProps = {
   setFilterOption: (string) => void;
 };
 
-export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
+export default function ResultNavigation(
+  props: ResultsNavProps,
+): React.ReactNode {
   return (
     <div className={styles.resultsNav}>
       <div className={styles.navSection}>
@@ -77,7 +79,7 @@ type BreadCrumbItemProps = {
   sliceNavToIndex: (number) => void;
 };
 
-function BreadCrumbItem(props: BreadCrumbItemProps): JSX.Element {
+function BreadCrumbItem(props: BreadCrumbItemProps): React.ReactNode {
   return (
     <li className={props.breadcrumbValue}>
       <Link
@@ -97,7 +99,7 @@ type DropDownProps = {
   setEcmaScriptFlag: (string) => void;
 };
 
-function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
+function EcmaScriptVersionDropdown(props: DropDownProps): React.ReactNode {
   const [dropdownValue, setDropdownValue] = React.useState(
     props.esVersionValue ? props.esVersionValue : "",
   );
@@ -139,7 +141,7 @@ type SortProps = {
   setSortOption: (string) => void;
 };
 
-function SortingDropdown(props: SortProps): JSX.Element {
+function SortingDropdown(props: SortProps): React.ReactNode {
   const [sortValue, setSortValue] = React.useState<string>(
     props.sortValue ? props.sortValue : "alpha",
   );
@@ -179,7 +181,7 @@ type FilterProps = {
   setFilterOption: (string) => void;
 };
 
-function FilterDropdown(props: FilterProps): JSX.Element {
+function FilterDropdown(props: FilterProps): React.ReactNode {
   const [filterValue, setFilterValue] = React.useState<string>(
     props.filterOption ?? FilterOption.None,
   );

src/components/conformance/VersionSelector/index.tsx

@@ -11,7 +11,7 @@ interface SelectorProps {
   availableVersions: VersionItem[];
 }
 
-export default function VersionSelector(props: SelectorProps): JSX.Element {
+export default function VersionSelector(props: SelectorProps): React.ReactNode {
   return (
     <div className={styles.versionSelector}>
       {props.availableVersions.map((version) => {
@@ -25,7 +25,7 @@ type VersionProps = {
   version: VersionItem;
 };
 
-function Version(props: VersionProps): JSX.Element {
+function Version(props: VersionProps): React.ReactNode {
   const history = useHistory<ConformanceState>();
 
   return (