website: Update react to 18.3.1

Author: zwliew

website/package.json

@@ -34,6 +34,7 @@
     "@babel/preset-env": "7.22.10",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
+    "@cfaester/enzyme-adapter-react-18": "0.8.0",
     "@packtracker/webpack-plugin": "2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@svgr/webpack": "6.5.1",
@@ -48,9 +49,9 @@
     "@types/lodash": "4.14.197",
     "@types/mousetrap": "1.6.15",
     "@types/no-scroll": "2.1.2",
-    "@types/react": "17.0.64",
+    "@types/react": "18.3.12",
     "@types/react-beautiful-dnd": "13.1.8",
-    "@types/react-dom": "17.0.20",
+    "@types/react-dom": "18.3.1",
     "@types/react-helmet": "6.1.11",
     "@types/react-kawaii": "0.17.3",
     "@types/react-loadable": "5.5.11",
@@ -64,7 +65,6 @@
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vercel/node": "1.15.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "babel-jest": "29.6.2",
     "babel-loader": "9.1.3",
     "babel-plugin-dynamic-import-node": "2.3.3",
@@ -150,9 +150,9 @@
     "nusmoderator": "3.0.0",
     "p-queue": "6.6.2",
     "query-string": "6.14.1",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-beautiful-dnd": "13.1.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-feather": "2.0.10",
     "react-helmet": "6.1.0",
     "react-kawaii": "0.18.0",

website/scripts/test.js

@@ -1,7 +1,14 @@
-const { configure } = require('enzyme');
-const { setAutoFreeze } = require('immer');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
-require('@testing-library/jest-dom');
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import { configure } from 'enzyme';
+import { setAutoFreeze } from 'immer';
+
+import '@testing-library/jest-dom';
+
+import { TextEncoder } from 'util';
+
+Object.defineProperty(global, 'TextEncoder', {
+  value: TextEncoder,
+});
 
 configure({ adapter: new Adapter() });
 

website/src/entry/export/main.tsx

@@ -1,5 +1,5 @@
 import { createRef } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Store } from 'redux';
 
 import { Module } from 'types/modules';
@@ -53,7 +53,8 @@ const render = () => {
   const appElement = document.getElementById('app');
   if (!appElement) throw new Error('#app not found');
 
-  ReactDOM.render(<TimetableOnly store={store} ref={timetableRef} />, appElement);
+  const root = createRoot(appElement);
+  root.render(<TimetableOnly store={store} ref={timetableRef} />);
 };
 
 render();

website/src/entry/main.tsx

@@ -6,7 +6,7 @@ import 'bootstrapping/sentry';
 // See: https://github.com/zloirock/core-js/issues/579#issuecomment-504325213
 import 'core-js/es/promise/finally';
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ReactModal from 'react-modal';
 
 import configureStore from 'bootstrapping/configure-store';
@@ -25,7 +25,9 @@ subscribeOnlineEvents(store);
 // Initialize ReactModal
 ReactModal.setAppElement('#app');
 
-ReactDOM.render(<App store={store} persistor={persistor} />, document.getElementById('app'));
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App store={store} persistor={persistor} />);
 
 if (
   ((NUSMODS_ENV === 'preview' || NUSMODS_ENV === 'staging' || NUSMODS_ENV === 'production') &&

website/src/test-utils/wait.ts

@@ -0,0 +1,20 @@
+import type { CommonWrapper } from 'enzyme';
+import { act } from '@testing-library/react';
+
+// Hack to get Enzyme to work with React 18
+// Source: https://github.com/enzymejs/enzyme/issues/2524
+// TODO: Replace Enzyme entirely along with this hack.
+export const waitForComponentToPaint = async (wrapper?: CommonWrapper): Promise<void> => {
+  await act(async () => {
+    await new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        /*
+         * Make sure it is the last task in the queue.
+         * https://dmitripavlutin.com/javascript-promises-settimeout/
+         */
+        window.setTimeout(resolve, 1);
+      }, 1);
+    });
+  });
+  wrapper?.update();
+};

website/src/views/mpe/form/ModulesSelect.test.tsx

@@ -1,6 +1,7 @@
 import { mount, shallow } from 'enzyme';
 import Downshift from 'downshift';
 import Modal from 'views/components/Modal';
+import { waitForComponentToPaint } from 'test-utils/wait';
 import { ModulesSelectComponent } from './ModulesSelect';
 
 const modules = [
@@ -32,9 +33,10 @@ const commonProps = {
 };
 
 describe(ModulesSelectComponent, () => {
-  it('should show results on input value change', () => {
+  it('should show results on input value change', async () => {
     const wrapper = mount(<ModulesSelectComponent {...commonProps} matchBreakpoint />);
     wrapper.setState({ isOpen: true });
+    await waitForComponentToPaint(wrapper);
     const input = wrapper.find('input');
     expect(wrapper.find('li')).toHaveLength(0);
     input.simulate('change', { target: { value: 'T' } });
@@ -43,17 +45,19 @@ describe(ModulesSelectComponent, () => {
     expect(wrapper.find('li')).toHaveLength(0);
   });
 
-  it('should indicate module is added', () => {
+  it('should indicate module is added', async () => {
     const wrapper = mount(<ModulesSelectComponent {...commonProps} matchBreakpoint />);
     wrapper.setState({ isOpen: true, inputValue: 'T' });
+    await waitForComponentToPaint(wrapper);
     const result = wrapper.find('li').at(1);
     expect(result.prop('disabled')).toBe(true);
     expect(result.find('.badge').exists()).toBe(true);
   });
 
-  it('should call onChange when module is selected', () => {
+  it('should call onChange when module is selected', async () => {
     const wrapper = mount(<ModulesSelectComponent {...commonProps} matchBreakpoint />);
     wrapper.setState({ isOpen: true, inputValue: 'T' });
+    await waitForComponentToPaint(wrapper);
     wrapper.find('li').first().simulate('click');
     expect(commonProps.onChange).toHaveBeenCalledWith(modules[0].moduleCode);
     // remain open

website/src/views/timetable/TimetableContainer.tsx

@@ -11,11 +11,7 @@ import type { SemTimetableConfig } from 'types/timetables';
 
 import { selectSemester } from 'actions/settings';
 import { getSemesterTimetableColors, getSemesterTimetableLessons } from 'selectors/timetables';
-import {
-  fetchTimetableModules,
-  setHiddenModulesFromImport,
-  setTimetable,
-} from 'actions/timetables';
+import { fetchTimetableModules, setTimetable } from 'actions/timetables';
 import { openNotification } from 'actions/app';
 import { undo } from 'actions/undoHistory';
 import { getModuleCondensed } from 'selectors/moduleBank';
@@ -156,7 +152,7 @@ export const TimetableContainerComponent: FC = () => {
   );
 
   const importedHidden = useMemo(
-    () => (semester && params.action ? deserializeHidden(location.search) : []),
+    () => (semester && params.action ? deserializeHidden(location.search) : null),
     [semester, params.action, location.search],
   );
 
@@ -167,12 +163,6 @@ export const TimetableContainerComponent: FC = () => {
     }
   }, [dispatch, importedTimetable]);
 
-  useEffect(() => {
-    if (importedHidden) {
-      dispatch(setHiddenModulesFromImport(importedHidden));
-    }
-  }, [dispatch, importedHidden]);
-
   const isLoading = useMemo(() => {
     // Check that all modules are fully loaded into the ModuleBank
     const isValidModule = (moduleCode: ModuleCode) => !!getModule(moduleCode);
@@ -211,6 +201,7 @@ export const TimetableContainerComponent: FC = () => {
       key={semester}
       semester={semester}
       timetable={displayedTimetable}
+      hiddenImportedModules={importedHidden}
       colors={filledColors}
       header={
         <>

website/src/views/timetable/TimetableContent.tsx

@@ -66,6 +66,7 @@ type OwnProps = {
   semester: Semester;
   timetable: SemTimetableConfig;
   colors: ColorMapping;
+  hiddenImportedModules: ModuleCode[] | null;
 };
 
 type Props = OwnProps & {
@@ -456,7 +457,8 @@ function mapStateToProps(state: StoreState, ownProps: OwnProps) {
 
   // Determine the key to check for hidden modules based on readOnly status
   const hiddenModulesKey = readOnly ? HIDDEN_IMPORTED_SEM : semester;
-  const hiddenInTimetable = state.timetables.hidden[hiddenModulesKey] || [];
+  const hiddenInTimetable =
+    ownProps.hiddenImportedModules ?? (state.timetables.hidden[hiddenModulesKey] || []);
 
   return {
     semester,