Skip to content

Commit c41b2fd

Browse files
mwtrewmwtrew
authored
Merge pull request #1099 from isaacphysics/improvement/react-18-update
React 18 Update
2 parents 9dfa0b6 + 737a41f commit c41b2fd

File tree

9 files changed

+668
-700
lines changed

9 files changed

+668
-700
lines changed

‎package.json

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
"@reduxjs/toolkit": "^1.9.7",
1616
"axios": "^0.28.1",
1717
"billboard.js": "^1.12.12",
18-
"core-js": "^3.36.1",
19-
"dayjs": "^1.11.10",
18+
"core-js": "^3.38.1",
19+
"dayjs": "^1.11.13",
2020
"he": "^1.2.0",
21-
"highlight.js": "^11.9.0",
21+
"highlight.js": "^11.10.0",
2222
"history": "^4.10.1",
2323
"html-to-text": "^9.0.5",
2424
"identity-obj-proxy": "3.0.0",
@@ -27,27 +27,27 @@
2727
"inequality-grammar": "1.3.2",
2828
"isaac-graph-sketcher": "0.13.7",
2929
"js-cookie": "^3.0.5",
30-
"katex": "^0.16.10",
31-
"leaflet": "^1.7.1",
30+
"katex": "^0.16.11",
31+
"leaflet": "^1.9.4",
3232
"lodash": "^4.17.21",
3333
"object-hash": "^3.0.0",
3434
"p5": "^1.10.0",
35-
"plausible-tracker": "^0.3.8",
36-
"qrcode": "^1.5.3",
35+
"plausible-tracker": "^0.3.9",
36+
"qrcode": "^1.5.4",
3737
"query-string": "^7.1.3",
3838
"rand-seed": "^1.0.2",
39-
"react": "^17.0.2",
39+
"react": "^18.3.1",
4040
"react-beautiful-dnd": "^13.1.1",
4141
"react-circular-progressbar": "^2.1.0",
42-
"react-dom": "^17.0.2",
42+
"react-dom": "^18.3.1",
4343
"react-error-boundary": "^3.1.4",
4444
"react-helmet": "^6.1.0",
4545
"react-redux": "^7.2.9",
4646
"react-router-dom": "^5.3.4",
4747
"react-select": "^5.8.0",
4848
"react-window": "^1.8.10",
4949
"reactstrap": "^9.2.2",
50-
"redux": "^4.1.2",
50+
"redux": "^4.2.1",
5151
"redux-logger": "^3.0.6",
5252
"remarkable": "^2.0.1",
5353
"uuid": "^9.0.1"
@@ -86,83 +86,83 @@
8686
"not op_mini all"
8787
],
8888
"devDependencies": {
89-
"@babel/core": "^7.24.3",
90-
"@babel/eslint-parser": "^7.24.1",
91-
"@babel/plugin-transform-class-properties": "^7.24.1",
92-
"@babel/plugin-transform-classes": "^7.24.1",
93-
"@babel/plugin-transform-modules-commonjs": "^7.24.1",
94-
"@babel/preset-env": "^7.24.3",
95-
"@babel/preset-react": "^7.24.1",
96-
"@babel/preset-typescript": "^7.24.1",
89+
"@babel/core": "^7.25.2",
90+
"@babel/eslint-parser": "^7.25.1",
91+
"@babel/plugin-transform-class-properties": "^7.25.4",
92+
"@babel/plugin-transform-classes": "^7.25.4",
93+
"@babel/plugin-transform-modules-commonjs": "^7.24.8",
94+
"@babel/preset-env": "^7.25.4",
95+
"@babel/preset-react": "^7.24.7",
96+
"@babel/preset-typescript": "^7.24.7",
9797
"@eslint/compat": "^1.1.1",
98-
"@eslint/js": "^9.8.0",
98+
"@eslint/js": "^9.9.1",
9999
"@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
100-
"@testing-library/dom": "^9.3.4",
101-
"@testing-library/jest-dom": "^6.4.2",
102-
"@testing-library/react": "^12.1.5",
100+
"@testing-library/dom": "^10.4.0",
101+
"@testing-library/jest-dom": "^6.5.0",
102+
"@testing-library/react": "^16.0.1",
103103
"@testing-library/user-event": "^14.5.2",
104104
"@types/he": "^1.2.3",
105105
"@types/history": "^4.7.11",
106106
"@types/html-to-text": "^9.0.4",
107107
"@types/jest": "^29.5.12",
108108
"@types/js-cookie": "^3.0.6",
109109
"@types/katex": "^0.16.7",
110-
"@types/leaflet": "^1.7.9",
111-
"@types/lodash": "^4.17.0",
112-
"@types/node": "^20.12.12",
110+
"@types/leaflet": "^1.9.12",
111+
"@types/lodash": "^4.17.7",
112+
"@types/node": "^20.16.3",
113113
"@types/object-hash": "^3.0.6",
114114
"@types/qrcode": "^1.5.5",
115115
"@types/react-beautiful-dnd": "^13.1.8",
116-
"@types/react-dom": "^18.2.23",
116+
"@types/react-dom": "^18.3.0",
117117
"@types/react-helmet": "^6.1.11",
118118
"@types/react-leaflet": "^2.8.3",
119119
"@types/react-router": "^5.1.20",
120120
"@types/react-router-dom": "^5.3.3",
121121
"@types/react-window": "^1.8.8",
122-
"@types/redux-logger": "^3.0.9",
122+
"@types/redux-logger": "^3.0.13",
123123
"@types/redux-mock-store": "^1.0.6",
124124
"@types/remarkable": "^2.0.8",
125125
"@types/uuid": "^9.0.8",
126-
"@typescript-eslint/eslint-plugin": "^8.0.1",
127-
"@typescript-eslint/parser": "^8.0.1",
126+
"@typescript-eslint/eslint-plugin": "^8.3.0",
127+
"@typescript-eslint/parser": "^8.3.0",
128128
"axios-mock-adapter": "^1.22.0",
129129
"babel-eslint": "^10.1.0",
130130
"babel-loader": "^9.1.3",
131131
"bootstrap": "^5.3.3",
132132
"bootstrap-block-grid": "^1.1.7",
133133
"clean-webpack-plugin": "^4.0.0",
134134
"copy-webpack-plugin": "^10.2.4",
135-
"css-loader": "^6.10.0",
135+
"css-loader": "^6.11.0",
136136
"cypress": "13.6.4",
137137
"dotenv": "^10.0.0",
138-
"eslint": "^9.8.0",
138+
"eslint": "^8.0.0-0",
139139
"eslint-plugin-jsx-a11y": "^6.9.0",
140140
"eslint-plugin-react": "^7.35.0",
141141
"eslint-plugin-react-hooks": "^4.6.2",
142142
"file-loader": "^6.2.0",
143143
"globals": "^15.9.0",
144-
"graphql": "^16.8.1",
144+
"graphql": "^16.9.0",
145145
"html-webpack-plugin": "^5.6.0",
146146
"jest": "^29.7.0",
147147
"jest-environment-jsdom": "^29.7.0",
148148
"jest-watch-typeahead": "^2.2.2",
149-
"mini-css-extract-plugin": "^2.8.1",
149+
"mini-css-extract-plugin": "^2.9.1",
150150
"msw": "0.49.3",
151151
"react-app-polyfill": "^3.0.0",
152-
"react-leaflet": "^2.8.0",
153-
"react-remove-props-loader": "^1.2.4",
152+
"react-leaflet": "^4.2.1",
153+
"react-remove-props-loader": "^1.2.7",
154154
"redux-mock-store": "^1.5.4",
155-
"redux-thunk": "^2.4.1",
156-
"sass": "^1.77.7",
157-
"sass-loader": "^14.1.1",
155+
"redux-thunk": "^2.4.2",
156+
"sass": "^1.77.8",
157+
"sass-loader": "^14.2.1",
158158
"style-loader": "^3.3.4",
159159
"terser-webpack-plugin": "^5.3.10",
160-
"ts-jest": "^29.1.2",
160+
"ts-jest": "^29.2.5",
161161
"ts-loader": "^9.5.1",
162-
"typescript": "^5.4.3",
163-
"typescript-eslint": "^8.1.0",
164-
"webpack": "^5.91.0",
165-
"webpack-bundle-analyzer": "^4.10.1",
162+
"typescript": "^5.5.4",
163+
"typescript-eslint": "^8.3.0",
164+
"webpack": "^5.94.0",
165+
"webpack-bundle-analyzer": "^4.10.2",
166166
"webpack-cli": "^5.1.4",
167167
"webpack-dev-server": "^4.15.2"
168168
},

‎src/app/components/pages/EventDetails.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import {EventBookingForm} from "../elements/EventBookingForm";
5050
import {reservationsModal} from "../elements/modals/ReservationsModal";
5151
import {IsaacContent} from "../content/IsaacContent";
5252
import {EditContentButton} from "../elements/EditContentButton";
53-
import {Map, Marker, Popup, TileLayer} from "react-leaflet";
53+
import {MapContainer, Marker, Popup, TileLayer} from "react-leaflet";
5454
import * as L from "leaflet";
5555
import {teacherEventConfirmationModal} from "../elements/modals/TeacherEventConfirmationModal";
5656
import {skipToken} from "@reduxjs/toolkit/query";
@@ -187,7 +187,7 @@ const EventDetails = ({match: {params: {eventId}}, location: {pathname}}: EventD
187187
isDefined(event.location?.latitude) &&
188188
isDefined(event.location?.longitude) &&
189189
<div className="border px-2 py-1 mt-3 bg-light">
190-
<Map center={[event.location.latitude, event.location.longitude]} zoom={13}>
190+
<MapContainer center={[event.location.latitude, event.location.longitude]} zoom={13}>
191191
<TileLayer
192192
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
193193
attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
@@ -198,7 +198,7 @@ const EventDetails = ({match: {params: {eventId}}, location: {pathname}}: EventD
198198
{event.location?.address?.addressLine1}<br/>{event.location?.address?.addressLine2}<br/>{event.location?.address?.town}<br/>{event.location?.address?.postalCode}
199199
</Popup>
200200
</Marker>
201-
</Map>
201+
</MapContainer>
202202
</div>
203203
}
204204
</div>}
@@ -375,4 +375,4 @@ const EventDetails = ({match: {params: {eventId}}, location: {pathname}}: EventD
375375
</Container>
376376
}}/>;
377377
};
378-
export default EventDetails;
378+
export default EventDetails;

‎src/index-ada-renderer.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import "regenerator-runtime/runtime";
22
import './scss/cs/isaac.scss';
33
import React from 'react';
4-
import ReactDOM from 'react-dom';
54
import {highlightJsService} from "./app/services/highlightJs";
65
import {EditorRenderer} from "./app/components/elements/EditorRenderer";
6+
import { createRoot } from "react-dom/client";
77

88
highlightJsService.registerLanguages();
99

10-
ReactDOM.render(
10+
const root = createRoot(document.getElementById('root')!);
11+
12+
root.render(
1113
<React.StrictMode>
1214
<EditorRenderer />
13-
</React.StrictMode>,
14-
document.getElementById('root')
15+
</React.StrictMode>
1516
);

‎src/index-ada.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "regenerator-runtime/runtime";
22
import './scss/cs/isaac.scss';
33
import React from 'react';
4-
import ReactDOM from 'react-dom';
4+
import { createRoot } from 'react-dom/client';
55
import {Provider} from "react-redux";
66
import {store} from "./app/state";
77
import {IsaacApp} from './app/components/navigation/IsaacApp';
@@ -10,7 +10,9 @@ import {Helmet} from "react-helmet";
1010

1111
printAsciiArtLogoToConsoleAda();
1212

13-
ReactDOM.render(
13+
const root = createRoot(document.getElementById('root')!);
14+
15+
root.render(
1416
<React.StrictMode>
1517
<Provider store={store}>
1618
{/*
@@ -30,5 +32,4 @@ ReactDOM.render(
3032
<IsaacApp />
3133
</Provider>
3234
</React.StrictMode>,
33-
document.getElementById('root')
3435
);

‎src/index-phy-renderer.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import "regenerator-runtime/runtime";
22
import './scss/phy/isaac.scss';
33
import React from 'react';
4-
import ReactDOM from 'react-dom';
4+
import { createRoot } from 'react-dom/client';
55
import {highlightJsService} from "./app/services/highlightJs";
66
import {EditorRenderer} from "./app/components/elements/EditorRenderer";
77

88
highlightJsService.registerLanguages();
99

10-
ReactDOM.render(
10+
const root = createRoot(document.getElementById('root')!);
11+
12+
root.render(
1113
<React.StrictMode>
1214
<EditorRenderer />
1315
</React.StrictMode>,
14-
document.getElementById('root')
1516
);

‎src/index-phy.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "regenerator-runtime/runtime";
22
import './scss/phy/isaac.scss';
33
import React from 'react';
4-
import ReactDOM from 'react-dom';
4+
import { createRoot } from 'react-dom/client';
55
import {Provider} from "react-redux";
66
import {store} from "./app/state";
77
import {IsaacApp} from './app/components/navigation/IsaacApp';
@@ -10,7 +10,9 @@ import {Helmet} from "react-helmet";
1010

1111
printAsciiArtLogoToConsolePhy();
1212

13-
ReactDOM.render(
13+
const root = createRoot(document.getElementById('root')!);
14+
15+
root.render(
1416
<React.StrictMode>
1517
<Provider store={store}>
1618
{/*
@@ -29,6 +31,5 @@ ReactDOM.render(
2931
</Helmet>
3032
<IsaacApp />
3133
</Provider>
32-
</React.StrictMode>,
33-
document.getElementById('root')
34+
</React.StrictMode>
3435
);

‎src/test/pages/emailVerification.test.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ if (isPhy) {
4949
// Look for success message
5050
await screen.findByText(`We have sent an email to ${mockUser.email}. Please follow the instructions in the email prior to booking.`);
5151
});
52-
}, 10000);
52+
}, 20000);
5353

5454
it("does not allow the current user to request a verification email for someone else", async () => {
5555
const mockEvent = buildMockEvent("test-event", "OPEN");
@@ -91,7 +91,7 @@ if (isPhy) {
9191
.then(() => true)
9292
.catch(() => false);
9393
expect(verifiyButtonExists).toBe(false);
94-
}, 10000);
94+
}, 20000);
9595
});
9696
}
9797

@@ -112,14 +112,14 @@ describe("EmailAlterHandler", () => {
112112
await screen.findAllByText("Email verification");
113113
await waitFor(async () => {
114114
expect(verifyEmailHandler).toHaveBeenCalledTimes(1);
115-
await expect(verifyEmailHandler).toHaveBeenRequestedWith(async (req) => {
116-
const {userid, token} = req.params;
115+
expect(verifyEmailHandler).toHaveBeenRequestedWith(async (req) => {
116+
const { userid, token } = req.params;
117117
return userid === mockUser.id.toString() && token === "valid-token";
118118
});
119119
// Look for success message
120120
await screen.findByText("Email address verified.");
121121
});
122-
});
122+
}, 20000);
123123

124124
it("allows the current user to verify another users email if the token is valid", async () => {
125125
const verifyEmailHandler = handlerThatReturns();

‎src/test/testUtils.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const followHeaderNavLink = async (menu: string, linkName: string) => {
104104
// related to a given title
105105
const adminMenuSectionParent = navLink.closest("li[class*='nav-item']") as HTMLLIElement | null;
106106
if (!adminMenuSectionParent) fail(`Missing NavigationSection parent - cannot locate entries in ${menu} navigation menu.`);
107-
const link = await within(adminMenuSectionParent).findByRole("menuitem", {name: linkName, exact: false});
107+
const link = await within(adminMenuSectionParent).findByRole("menuitem", {name: linkName});
108108
await userEvent.click(link);
109109
};
110110

0 commit comments

Comments
 (0)