Update dependencies (#2043)

.github/workflows/build-development.yml

@@ -13,7 +13,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2-beta
       with:
-        node-version: '14'
+        node-version: '16'
     - name: Setup Sentry CLI
       run: |
         curl -sL https://sentry.io/get-cli/ | INSTALL_DIR=. bash

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v2-beta
       with:
-        node-version: '14'
+        node-version: '16'
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path
       run: echo "::set-output name=dir::$(yarn cache dir)"

README.md

@@ -20,7 +20,7 @@ The Source Academy (<https://sourceacademy.org/>) is an immersive online experie
 
 ### Installation of Source Academy (latest version [available in GitHub Pages](https://source-academy.github.io/))
 
-1. Install a stable version of NodeJS. The active LTS or current version should work fine.
+1. Install the current LTS version of Node.js. The current version (usually the version one greater than the current LTS) may also work, but if you encounter issues, use the current LTS.
 2. Clone this repository and navigate to it using "cd" in your command line or shell tool.
 3. Run `yarn install` to install dependencies.
 4. Run `yarn run start` to start the server at `localhost:8000`. **It might take a couple of minutes for the server to start.**
@@ -32,7 +32,7 @@ If you wish to set up the GitHub or Google Drive integrations, copy the `.env.ex
 
 ### Installation of Source Academy @ NUS (access [latest production version here](https://sourceacademy.nus.edu.sg))
 
-1. Install a stable version of NodeJS. The active LTS or current version should work fine.
+1. Install the current LTS version of Node.js. The current version (usually the version one greater than the current LTS) may also work, but if you encounter issues, use the current LTS.
 2. Clone this repository and navigate to it using "cd" in your command line or shell tool.
 3. Run `yarn install` to install dependencies.
 4. Copy the `.env.example` file as `.env` and set the necessary variables (refer below for more information)

craco.config.js

@@ -45,7 +45,7 @@ const cracoConfig = (module.exports = {
   jest: {
     configure: jestConfig => {
       jestConfig.transformIgnorePatterns = [
-        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])).*\\.(js|jsx|ts|tsx)$',
+        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])|(array-move[/\\\\])).*\\.(js|jsx|ts|tsx)$',
         '^.+\\.module\\.(css|sass|scss)$'
       ];
       jestConfig.moduleNameMapper['ace-builds'] = '<rootDir>/node_modules/ace-builds';

package.json

@@ -38,9 +38,9 @@
     "@types/uuid": "^8.3.3",
     "ace-builds": "^1.4.13",
     "acorn": "^8.6.0",
-    "ag-grid-community": "^26.2.0",
+    "ag-grid-community": "^26.2.1",
     "ag-grid-react": "^26.2.0",
-    "array-move": "^3.0.1",
+    "array-move": "^4.0.0",
     "classnames": "^2.3.1",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
@@ -66,8 +66,8 @@
     "react-papaparse": "^3.18.1",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.0-beta.5",
-    "react-router-dom": "^5.2.0",
-    "react-simple-keyboard": "^3.4.13",
+    "react-router-dom": "^5.3.0",
+    "react-simple-keyboard": "^3.4.22",
     "react-sortable-hoc": "^2.0.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.3",
@@ -86,7 +86,7 @@
     "@testing-library/react": "^12.1.2",
     "@types/acorn": "^4.0.6",
     "@types/common-tags": "^1.8.1",
-    "@types/draft-js": "^0.11.7",
+    "@types/draft-js": "^0.11.8",
     "@types/enzyme": "3.10.10",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/estree": "0.0.50",
@@ -99,12 +99,12 @@
     "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.178",
     "@types/lz-string": "^1.3.34",
-    "@types/node": "^17.0.0",
-    "@types/react": "^17.0.37",
+    "@types/node": "^17.0.5",
+    "@types/react": "^17.0.38",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^17.0.11",
-    "@types/react-redux": "^7.1.20",
-    "@types/react-responsive": "^8.0.4",
+    "@types/react-redux": "^7.1.21",
+    "@types/react-responsive": "^8.0.5",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",
     "@types/react-router-redux": "^5.0.20",
@@ -129,7 +129,7 @@
     "react-scripts": "^4.0.3",
     "react-test-renderer": "^17.0.2",
     "redux-saga-test-plan": "^4.0.4",
-    "sass": "^1.45.0",
+    "sass": "^1.45.1",
     "typescript": "~4.5.4"
   },
   "browserslist": {
@@ -143,11 +143,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "resolutions": {
-    "**/@typescript-eslint/eslint-plugin": "^4.3.0",
-    "**/@typescript-eslint/parser": "^4.3.0",
-    "**/sass-loader": "^10",
-    "**/redux": "~4.0"
   }
 }

src/commons/utils/Hooks.ts

@@ -27,7 +27,7 @@ import React from 'react';
 // The following hook is from
 // https://github.com/jaredLunde/react-hook/blob/master/packages/merged-ref/src/index.tsx
 export const useMergedRef =
-  <T extends any>(...refs: React.Ref<T>[]): React.RefCallback<T> =>
+  <T>(...refs: React.Ref<T>[]): React.RefCallback<T> =>
   (element: T) =>
     refs.forEach(ref => {
       if (typeof ref === 'function') ref(element);

src/commons/utils/SortableList.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@blueprintjs/core';
-import arrayMove from 'array-move';
+import { arrayMoveImmutable } from 'array-move';
 import React from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 
@@ -28,7 +28,7 @@ export const useSortableList = () => {
   const [items, setItems] = React.useState<string[]>([]);
 
   const onSortEnd = React.useCallback(({ oldIndex, newIndex }: any) => {
-    setItems(prevState => arrayMove(prevState, oldIndex, newIndex));
+    setItems(prevState => arrayMoveImmutable(prevState, oldIndex, newIndex));
   }, []);
 
   return {