Skip to content

Commit 3cf8123

Browse files
nekevssnekevss
authored
Fix prop mutation and address some lints (#159)
1 parent 0b6de6e commit 3cf8123

7 files changed

Lines changed: 53 additions & 35 deletions

File tree

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type TestsGridProps = {
1717
};
1818

1919
export default function TestsGrid(props: TestsGridProps): JSX.Element {
20-
const [hoverName, setHoverName] = React.useState<undefined | String>()
20+
const [hoverName, setHoverName] = React.useState<undefined | string>();
2121
const cardBodyClass = "card__body " + styles.gridStyle;
2222

2323
const title = hoverName ? "Test: " + hoverName : "Suite: " + props.suite.name;
@@ -33,7 +33,7 @@ export default function TestsGrid(props: TestsGridProps): JSX.Element {
3333
tests={props.suite.tests}
3434
esFlag={props.state.ecmaScriptVersion}
3535
selectTest={props.selectTest}
36-
setHoverValue={(name)=>setHoverName(name)}
36+
setHoverValue={(name) => setHoverName(name)}
3737
/>
3838
</div>
3939
</div>
@@ -102,8 +102,8 @@ function GridItem(props: GridItemProps): JSX.Element {
102102
<div
103103
className={testResult}
104104
onClick={() => props.selectTest(props.test.name + ".js")}
105-
onMouseEnter={(_e)=>props.setHoverValue(props.test.name + ".js")}
106-
onMouseLeave={(_e)=>props.setHoverValue(undefined)}
105+
onMouseEnter={() => props.setHoverValue(props.test.name + ".js")}
106+
onMouseLeave={() => props.setHoverValue(undefined)}
107107
aria-label={props.test.name}
108108
title={
109109
props.test.strict

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,11 @@ export default function SuiteSelector(props: SelectorProps): JSX.Element {
2222
return (
2323
<div className={styles.suiteSelector}>
2424
{props.suites
25-
.sort(option[0].callback)
25+
.toSorted(option[0].callback)
2626
.filter((suite) => {
2727
const stats: TestStats =
28-
suite.versionedStats[props.state.ecmaScriptVersion] ?? suite.stats;
28+
suite.versionedStats?.[props.state.ecmaScriptVersion] ??
29+
suite.stats;
2930
return stats.total !== 0;
3031
})
3132
.map((suite) => {
@@ -59,8 +60,8 @@ function SuiteItem(props: SuiteItemProps): JSX.Element {
5960
</div>
6061
<SuiteStatistics
6162
testResults={
62-
props.esFlag && props.suite.versionedStats[props.esFlag]
63-
? props.suite.versionedStats[props.esFlag]
63+
props.esFlag
64+
? props.suite.versionedStats?.[props.esFlag] ?? props.suite.stats
6465
: props.suite.stats
6566
}
6667
/>

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

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
VersionItem,
66
SuiteResult,
77
ConformanceState,
8-
SortOption,
98
} from "@site/src/components/conformance/types";
109
import ResultNavigation from "./nav";
1110
import {
@@ -28,8 +27,16 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
2827
// Refs
2928
const activeResults = React.useRef<undefined | ResultInfo>();
3029

30+
// History handling
3131
const history = useHistory<ConformanceState>();
3232

33+
const pushStateToHistory = (state: ConformanceState): void => {
34+
history.push({
35+
pathname: "/conformance",
36+
state,
37+
});
38+
};
39+
3340
React.useEffect(() => {
3441
// If the version is correctly synced
3542
if (props.state.version.tagName !== activeResults.current?.version) {
@@ -60,7 +67,6 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
6067
const updateActiveResults = async (): Promise<ResultInfo> => {
6168
const data = await fetchResults(props.state.version);
6269
return mapToResultInfo(props.state.version.tagName, data);
63-
// setCurrentSuite(resultInfo.results);
6470
};
6571

6672
const findResultsFromPath = (activeResultsInfo: ResultInfo): SuiteResult => {
@@ -84,72 +90,67 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
8490
// Navigates to a suite by adding the SuiteName to the test path array.
8591
const navigateToSuite = (newSuiteName: string) => {
8692
const newPath = [...props.state.testPath, newSuiteName];
87-
history.push({
88-
pathname: "/conformance",
89-
state: createState(
93+
pushStateToHistory(
94+
createState(
9095
props.state.version,
9196
newPath,
9297
props.state.ecmaScriptVersion,
9398
props.state.sortOption,
9499
),
95-
});
100+
);
96101
};
97102

98103
// Removes a value or values from the test path array.
99104
//
100105
// Used by breadcrumbs for navigation.
101106
const sliceNavToIndex = (nonInclusiveIndex: number) => {
102107
const slicedPath = [...props.state.testPath.slice(0, nonInclusiveIndex)];
103-
history.push({
104-
pathname: "/conformance",
105-
state: createState(
108+
pushStateToHistory(
109+
createState(
106110
props.state.version,
107111
slicedPath,
108112
props.state.ecmaScriptVersion,
109113
props.state.sortOption,
110114
),
111-
});
115+
);
112116
};
113117

114118
// Sets the ECMAScript version flag value.
115119
const setEcmaScriptFlag = (flag: string) => {
116120
const nulledFlag = flag ? flag : undefined;
117-
history.push({
118-
pathname: "/conformance",
119-
state: createState(
121+
pushStateToHistory(
122+
createState(
120123
props.state.version,
121124
props.state.testPath,
122125
nulledFlag,
123126
props.state.sortOption,
124127
),
125-
});
128+
);
126129
};
127130

128131
// Sets the sorting option
129132
const setSortOption = (option: string) => {
130-
history.push({
131-
pathname: "/conformance",
132-
state: createState(
133+
pushStateToHistory(
134+
createState(
133135
props.state.version,
134136
props.state.testPath,
135137
props.state.ecmaScriptVersion,
136138
option,
137139
),
138-
});
140+
);
139141
};
140142

141143
// Sets a selected test.
142144
const setSelectedTest = (test: string | undefined) => {
143-
history.push({
144-
pathname: "/conformance",
145-
state: createState(
145+
pushStateToHistory(
146+
createState(
146147
props.state.version,
147148
props.state.testPath,
148149
props.state.ecmaScriptVersion,
149150
props.state.sortOption,
150151
test,
151152
),
152-
});
153+
);
153154
};
154155

155156
// Create the t262 URL from testPath with the results commit

‎src/components/conformance/ResultsDisplay/nav.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from "react";
2-
import { ConformanceState, SortOption, SpecEdition } from "../types";
2+
import { ConformanceState, SpecEdition } from "../types";
33

44
import styles from "./styles.module.css";
55
import Link from "@docusaurus/Link";
6+
import Heading from "@theme/Heading";
67
import { availableSortingOptions } from "../utils";
78

89
type ResultsNavProps = {
@@ -109,7 +110,9 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
109110

110111
return (
111112
<div className={styles.dropdownContainer}>
112-
<h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>ES Version:</h4>
113+
<Heading as="h4" style={{ padding: "0.125rem 0.5rem", height: "5" }}>
114+
ES Version:
115+
</Heading>
113116
<select value={dropdownValue} onChange={handleVersionSelection}>
114117
<option value={""}>All</option>
115118
{Object.keys(SpecEdition)
@@ -150,7 +153,9 @@ function SortingDropdown(props: SortProps): JSX.Element {
150153

151154
return (
152155
<div className={styles.dropdownContainer}>
153-
<h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>Sort:</h4>
156+
<Heading as="h4" style={{ padding: "0.125rem 0.5rem", height: "5" }}>
157+
Sort:
158+
</Heading>
154159
<select value={sortValue} onChange={handleSortSelection}>
155160
{availableSortingOptions.map((key) => {
156161
return (

‎src/components/conformance/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function createState(
2121
): ConformanceState {
2222
testPath = testPath ? testPath : [version.tagName];
2323
sortOption = sortOption ? sortOption : availableSortingOptions[0].id;
24+
ecmaScriptVersion = ecmaScriptVersion ? ecmaScriptVersion : "";
2425
return {
2526
version,
2627
testPath,

‎src/pages/conformance/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import React from "react";
99

1010
import styles from "./styles.module.css";
1111

12+
// Note there are other fields, but only adding the ones that are needed.
13+
type ReleasesObject = {
14+
tag_name: string;
15+
};
16+
1217
// TODO: Add header file to speed up statisic fetching for initial render?
1318
export default function Conformance() {
1419
const location = useLocation<ConformanceState>();
@@ -31,7 +36,10 @@ export default function Conformance() {
3136
"https://api.github.com/repos/boa-dev/boa/releases",
3237
);
3338
const releases = await response.json();
34-
return releases
39+
const releasesArray: ReleasesObject[] = Array.isArray(releases)
40+
? (releases as Array<ReleasesObject>)
41+
: [];
42+
return releasesArray
3543
.filter((potentialRelease) =>
3644
validateReleaseVersion(potentialRelease.tag_name),
3745
)

‎tsconfig.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// This file is not used in compilation. It is here just for a nice editor experience.
33
"extends": "@docusaurus/tsconfig",
44
"compilerOptions": {
5-
"baseUrl": "."
5+
"baseUrl": ".",
6+
// NOTE: @docusaurus/tsconfig defines DOM, we are adding ESNext and ESNext.Array (for array copying methods)
7+
"lib": ["ESNext.Array", "DOM", "ESNext"]
68
}
79
}

0 commit comments

Comments
 (0)