Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade to React 18 #1100

Draft
wants to merge 15 commits into
base: main
Choose a base branch
from
Draft

Upgrade to React 18 #1100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7c30f46
Upgrade react version
jernestmyers May 9, 2024
733a5fc
Update root-level react resolution
jernestmyers May 13, 2024
b949c20
Resolve React upgrade issues in coreui
jernestmyers May 13, 2024
231954c
Resolve issues w/ react v18 upgrade in components library
jernestmyers May 13, 2024
f4e20ff
Resolve react upgrade errors in wdk-client
jernestmyers May 13, 2024
8b5d061
Resolve react 18 upgrade issues in eda
jernestmyers May 14, 2024
7777f19
Upgrade emotion packages
jernestmyers May 14, 2024
f9ce89b
Resolve react 18 upgrade errors in web-common
jernestmyers May 14, 2024
775cdca
Resolve some key, defaultProps and children errors with react 18 upgrade
jernestmyers May 15, 2024
09814f4
Replace ReactDOM.render methods
jernestmyers May 15, 2024
8bc06e7
Merge branch 'main' into upgrade-react
jernestmyers May 17, 2024
18fb0da
Resolve TS errors in genomics-site w/ React 18 upgrade
jernestmyers May 20, 2024
d1b897c
Merge branch 'main' into upgrade-react
jernestmyers Jun 20, 2024
aadfac6
Resolve getPageSection typescript errors
jernestmyers Jun 20, 2024
bccf0fc
Upgrade notistack to latest version
jernestmyers Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
"packages/sites/*"
],
"resolutions": {
"@types/react": "<18",
"@types/react-dom": "<18",
"react": "<18",
"react-dom": "<18",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-error-overlay": "6.0.9"
},
"devDependencies": {
Expand Down
8 changes: 4 additions & 4 deletions packages/configs/cra-template/template.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"package": {
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@veupathdb/wdk-client": "workspace:^",
"@veupathdb/web-common": "workspace:^"
},
Expand All @@ -23,8 +23,8 @@
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "13.5.0",
"@types/node": "^14.0.0",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@veupathdb/browserslist-config": "workspace:^",
"@veupathdb/components": "workspace:^",
Expand Down
16 changes: 8 additions & 8 deletions packages/libs/blast-summary-view/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@
"@babel/core": "^7.17.9",
"@babel/plugin-syntax-flow": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.14.9",
"@emotion/babel-preset-css-prop": "^11.10.0",
"@emotion/react": "^11.10.0",
"@emotion/babel-preset-css-prop": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/serialize": "^1.0.2",
"@emotion/styled": "^11.10.0",
"@emotion/styled": "^11.11.5",
"@emotion/utils": "^1.1.0",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
Expand All @@ -60,8 +60,8 @@
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "13.5.0",
"@types/node": "^14.0.0",
"@types/react": "^17.0.47",
"@types/react-dom": "^17.0.11",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react-redux": "^7.1.20",
"@types/react-router-dom": "^5.3.3",
"@veupathdb/browserslist-config": "workspace:^",
Expand All @@ -81,14 +81,14 @@
"eslint-config-react-app": "^7.0.0",
"ify-loader": "^1.1.0",
"jquery": "1.9.1",
"notistack": "^1.0.10",
"notistack": "^3.0.1",
"path-browserify": "^1.0.1",
"popper.js": "^1.16.1",
"postcss": "^8.1.0",
"querystring-es3": "^0.2.1",
"react": "^17.0.2",
"react": "^18.3.1",
"react-app-rewired": "^2.2.1",
"react-dom": "^17.0.2",
"react-dom": "^18.3.1",
"react-redux": "^7.1.3",
"react-router": "^5.2.0",
"react-router-dom": "^5.3.0",
Expand Down
10 changes: 5 additions & 5 deletions packages/libs/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
"@babel/core": "^7.17.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/preset-env": "^7.16.11",
"@emotion/react": "^11.10.0",
"@emotion/react": "^11.11.4",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
Expand All @@ -98,8 +98,8 @@
"@types/leaflet": "^1.7.9",
"@types/lodash": "^4.14.164",
"@types/md5": "^2.2.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react-leaflet": "^2.5.2",
"@types/react-plotly.js": "^2.2.4",
"@types/stats-lite": "^2.2.0",
Expand All @@ -115,8 +115,8 @@
"lodash": "^4.17.21",
"md5": "^2.3.0",
"npm-run-all": "^4.1.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-query": "^3.39.3",
"stats-lite": "^2.2.0",
"storybook": "^6.5.14",
Expand Down
6 changes: 3 additions & 3 deletions packages/libs/components/src/plots/PlotlyPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
useImperativeHandle,
useMemo,
} from 'react';
import { PlotParams } from 'react-plotly.js';
import { Figure, PlotParams } from 'react-plotly.js';
import { legendSpecification } from '../utils/plotly';
import Spinner from '../components/Spinner';
import { PlotRef } from '../types/plots';
Expand Down Expand Up @@ -220,7 +220,7 @@ function PlotlyPlot<T>(

// ellipsis with tooltip for legend, legend title, and independent axis tick labels
const onRender = useCallback(
(figure, graphDiv: Readonly<HTMLElement>) => {
(figure: Figure, graphDiv: Readonly<HTMLElement>) => {
onPlotlyRender && onPlotlyRender(figure, graphDiv);
// legend tooltip
// remove pre-existing title to avoid duplicates
Expand Down Expand Up @@ -344,7 +344,7 @@ function PlotlyPlot<T>(
);

const onInitialized = useCallback(
(figure, graphDiv: Readonly<HTMLElement>) => {
(figure: Figure, graphDiv: Readonly<HTMLElement>) => {
onRender(figure, graphDiv);
sharedPlotCreation.run();
},
Expand Down
2 changes: 1 addition & 1 deletion packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type FacetedPiePlotProps = Omit<

const FacetedPiePlot = (facetedPiePlotProps: FacetedPiePlotProps) => {
const { componentProps } = facetedPiePlotProps;
const onPlotlyRender = useCallback((_, graphDiv) => {
const onPlotlyRender = useCallback((_: any, graphDiv: HTMLElement) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use unknown instead of any. It's a safer type to use, especially in this case where we don't want do anything with the parameter.

// Replace each slice DOM node with a copy of itself.
// This removes the existing click event handler, which
// otherwise blocks the click handler that opens the modal
Expand Down
2 changes: 1 addition & 1 deletion packages/libs/components/src/stories/widgets/DateInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default {
const ControlledTemplate: Story<DateInputProps> = (args) => {
const [value, setValue] = useState<string>('2005-01-03');
const onValueChange = useCallback(
(newValue) => {
(newValue: any) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the type of newValue be string | undefined?

console.log(`new value = ${newValue}`);
setValue(newValue as string);
},
Expand Down
4 changes: 2 additions & 2 deletions packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export const ControlledLinked: Story<DateRangeInputProps> = () => {
// there must be a cleverer way to do this
// avoiding the cut and paste
const handleChangeA = useCallback(
(newRange) => {
(newRange: any) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, this would be DateRange, but the expected type is DateOrNumberRange. I suppose we can switch this to DateOrNumberRange and then check that it is a DataRange and throw an error (or return early) if not. But let's just leave it as any for now.

Ultimately, we should fix DateRange to use the correct types, but that's beyond the scope of this PR.

console.log(`A: new range = ${newRange.min} to ${newRange.max}`);
setRange(newRange);
},
[setRange]
);

const handleChangeB = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`B: new range = ${newRange.min} to ${newRange.max}`);
setRange(newRange);
},
Expand Down
2 changes: 1 addition & 1 deletion packages/libs/components/src/stories/widgets/NumberInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default {
const ControlledTemplate: Story<NumberInputProps> = (args) => {
const [value, setValue] = useState<number | undefined>(args.value ?? 1);
const onValueChange = useCallback(
(newValue) => {
(newValue: any) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar comment as above, about DateRange.

console.log(`new value = ${newValue}`);
setValue(newValue as number);
},
Expand Down
12 changes: 6 additions & 6 deletions packages/libs/components/src/stories/widgets/NumberRangeInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const EmptyAtStart: Story<NumberRangeInputProps> = () => {
const [range, setRange] = useState<NumberRange | undefined>();

const handleChange = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
setRange(newRange);
},
Expand All @@ -32,7 +32,7 @@ export const NoPartialRangesWithClear: Story<NumberRangeInputProps> = () => {
const [range, setRange] = useState<NumberRange | undefined>();

const handleChange = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
setRange(newRange);
},
Expand All @@ -57,15 +57,15 @@ export const ControlledLinked: Story<NumberRangeInputProps> = () => {
// there must be a cleverer way to do this
// avoiding the cut and paste
const handleChangeA = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`A: new range = ${newRange?.min} to ${newRange?.max}`);
setRange(newRange);
},
[setRange]
);

const handleChangeB = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`B: new range = ${newRange?.min} to ${newRange?.max}`);
setRange(newRange);
},
Expand Down Expand Up @@ -101,14 +101,14 @@ export const CustomValidator: Story<NumberRangeInputProps> = () => {
const [range, setRange] = useState<NumberRange | undefined>();

const handleChange = useCallback(
(newRange) => {
(newRange: any) => {
console.log(`new range = ${newRange?.min} to ${newRange?.max}`);
setRange(newRange);
},
[setRange]
);
const validate = useCallback(
(range) => {
(range: any) => {
console.log(`validating range ${range.min} to ${range.max}`);
if (range && range.max != null && range.min != null) {
if (range.max - range.min === 5) {
Expand Down
12 changes: 6 additions & 6 deletions packages/libs/coreui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@emotion/babel-plugin": "^11.3.0",
"@emotion/babel-preset-css-prop": "^11.10.0",
"@emotion/react": "^11.10.0",
"@emotion/babel-preset-css-prop": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/serialize": "^1.0.2",
"@emotion/styled": "^11.10.0",
"@emotion/styled": "^11.11.5",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@storybook/addon-actions": "^6.5.14",
Expand All @@ -76,10 +76,10 @@
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.5.7",
"notistack": "^1.0.10",
"notistack": "^3.0.1",
"npm-run-all": "^4.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"resize-observer-polyfill": "^1.5.1",
"sass-loader": "^7.3.1",
"typescript": "4.5.5"
Expand Down
3 changes: 1 addition & 2 deletions packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,11 @@ class DataCell extends React.PureComponent {
const props = {
style,
children,
key,
className,
...(isChildRow ? { colSpan: childRowColSpan } : null),
};

return column.hidden ? null : <td {...props} />;
return column.hidden ? null : <td key={key} {...props} />;
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/libs/coreui/src/components/Mesa/Ui/HeadingCell.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,9 @@ class HeadingCell extends React.PureComponent {
!column.primary &&
typeof eventHandlers.onColumnReorder === 'function';

const props = { style, key, ref, draggable, children, className };
const props = { style, ref, draggable, children, className };

return column.hidden ? null : <th {...props} {...domEvents} />;
return column.hidden ? null : <th key={key} {...props} {...domEvents} />;
}
}

Expand Down
26 changes: 13 additions & 13 deletions packages/libs/coreui/src/components/inputs/SelectTree/Utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function mapStructure<T, U>(
getChildren: ChildrenGetter<T>,
root: T
): U {
let mappedChildren = Seq.from(getChildren(root))
const mappedChildren = Seq.from(getChildren(root))
.map((child) => mapStructure(mapFn, getChildren, child))
.toArray();
return mapFn(root, mappedChildren);
Expand Down Expand Up @@ -136,8 +136,8 @@ export function* preorder<T>(
getChildren: ChildrenGetter<T>
): Iterable<T> {
yield root;
let children = getChildren(root);
let length = children.length;
const children = getChildren(root);
const length = children.length;
for (let i = 0; i < length; i++) {
yield* preorder(children[i], getChildren);
}
Expand Down Expand Up @@ -293,24 +293,24 @@ export function* concat<T>(...iterables: Iterable<T>[]) {

export function* map<T, U>(fn: Mapper<T, U>, iterable: Iterable<T>) {
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
yield fn(value);
}
}

export function* flatMap<T, U>(fn: FlatMapper<T, U>, iterable: Iterable<T>) {
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
yield* fn(value);
}
}

export function* uniq<T>(iterable: Iterable<T>) {
let values = new Set();
const values = new Set();
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
if (values.has(value) === false) {
values.add(value);
Expand All @@ -326,15 +326,15 @@ export function filter<T, U extends T>(
export function filter<T>(fn: Predicate<T>, iterable: Iterable<T>): Iterable<T>;
export function* filter<T>(fn: Predicate<T>, iterable: Iterable<T>) {
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
if (fn(value)) yield value;
}
}

export function some<T>(test: Predicate<T>, iterable: Iterable<T>): boolean {
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
if (test(value) === true) return true;
}
Expand All @@ -351,7 +351,7 @@ export function reduce<T, U>(
): U {
let result = seedValue;
for (let iter = iterable[Symbol.iterator](); ; ) {
let { done, value } = iter.next();
const { done, value } = iter.next();
if (done) break;
result = fn(result, value);
}
Expand All @@ -369,7 +369,7 @@ export function safeHtml<P>(
export function safeHtml<P>(
str: string,
props?: P,
Component?: React.StatelessComponent<P>
Component?: React.FunctionComponent<P>
): JSX.Element;
export function safeHtml<P>(
str: string,
Expand All @@ -385,7 +385,7 @@ export function safeHtml<P>(
return <Component {...props}>{str}</Component>;
}
// Use innerHTML to auto close tags
let container = document.createElement('div');
const container = document.createElement('div');
container.innerHTML = str;
return (
<Component
Expand Down Expand Up @@ -418,7 +418,7 @@ export function addOrRemove<T>(array: T[], value: T): T[] {
* @returns {Array<String>} A set of query terms parsed from searchQueryString
*/
export function parseSearchQueryString(searchQueryString: string) {
let match = searchQueryString.match(/[^\s"]+|"[^"]*"/g);
const match = searchQueryString.match(/[^\s"]+|"[^"]*"/g);
if (match == null) return [];
return match.map(function (queryTerm) {
if (queryTerm.startsWith('"')) {
Expand Down
Loading
Loading