Dependency Maintenance

.babelrc

@@ -64,7 +64,9 @@
            [
               "react-intl",
               {
-                 "messagesDir":"src/lang/.messages"
+                  "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+                  "extractFromFormatMessageCall": true,
+                  "ast": true
               }
            ]
         ]

.eslintrc

@@ -4,7 +4,7 @@
     "project": "./tsconfig.json"
   },
 
-  "extends": ["plugin:@typescript-eslint/recommended", "airbnb", "plugin:prettier/recommended", "prettier/react"],
+  "extends": ["airbnb", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier/react"],
   "plugins": ["@typescript-eslint", "babel", "react", "jsx-a11y", "import"],
 
   "rules": {

package.json

@@ -22,53 +22,38 @@
     "yarn": "YARN NO LONGER USED - use npm instead."
   },
   "dependencies": {
-    "@apollo/react-hooks": "3.1.5",
-    "@apollo/react-ssr": "3.1.5",
-    "@babel/core": "7.9.6",
-    "@babel/plugin-transform-react-constant-elements": "7.9.0",
-    "@babel/preset-env": "7.9.6",
-    "@formatjs/intl-relativetimeformat": "4.5.16",
+    "@apollo/client": "3.2.2",
+    "@babel/core": "7.11.6",
+    "@babel/plugin-transform-react-constant-elements": "7.10.4",
+    "@babel/preset-env": "7.11.5",
+    "@formatjs/intl-relativetimeformat": "7.2.8",
     "@sentry/browser": "5.24.2",
     "@sentry/integrations": "5.24.2",
     "@sentry/node": "5.24.2",
     "@sentry/react": "5.24.2",
     "@sentry/tracing": "5.24.2",
     "@sentry/webpack-plugin": "1.13.0",
-    "@types/draft-js": "0.10.40",
-    "@types/lodash": "4.14.161",
-    "@types/ramda": "0.27.4",
-    "@types/react": "16.9.49",
-    "@types/react-dom": "16.9.8",
-    "@types/styled-jsx": "2.2.8",
     "@zeit/next-bundle-analyzer": "0.1.2",
     "@zeit/next-css": "1.0.1",
     "@zeit/next-source-maps": "0.0.4-canary.1",
-    "apollo-cache-inmemory": "1.6.6",
-    "apollo-cache-persist": "0.1.1",
-    "apollo-client": "2.6.10",
-    "apollo-link": "1.2.14",
-    "apollo-link-batch-http": "1.2.14",
-    "apollo-link-error": "1.1.13",
-    "apollo-link-persisted-queries": "0.2.2",
-    "apollo-link-state": "0.4.2",
-    "apollo-link-ws": "1.0.20",
-    "axios": "0.19.2",
+    "axios": "0.20.0",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-import-graphql": "2.7.0",
-    "babel-plugin-inline-dotenv": "1.5.0",
+    "babel-plugin-inline-dotenv": "1.6.0",
     "babel-plugin-lodash": "3.3.4",
-    "babel-plugin-react-intl": "7.5.28",
+    "babel-plugin-react-intl": "8.2.5",
     "babel-plugin-transform-inline-environment-variables": "0.4.3",
     "classnames": "2.2.6",
     "compression": "1.7.4",
-    "convict": "5.2.0",
+    "convict": "6.0.0",
+    "convict-format-with-validator": "6.0.0",
     "cookie-parser": "1.4.5",
     "cors": "2.8.5",
     "cross-env": "7.0.2",
     "d3": "5.16.0",
-    "dayjs": "1.8.36",
+    "dayjs": "1.9.1",
     "dotenv": "8.2.0",
-    "draft-js": "0.11.5",
+    "draft-js": "0.11.7",
     "draft-js-buttons": "2.0.2",
     "draft-js-code-editor-plugin": "0.2.1",
     "draft-js-export-html": "1.4.1",
@@ -77,91 +62,96 @@
     "draft-js-prism-plugin": "0.1.3",
     "draft-js-static-toolbar-plugin": "3.0.1",
     "express": "4.17.1",
-    "file-loader": "6.0.0",
+    "file-loader": "6.1.0",
     "file-saver": "2.0.2",
     "fingerprintjs2": "2.1.2",
-    "formik": "2.1.5",
+    "formik": "2.1.6",
     "full-icu": "1.3.1",
     "glob": "7.1.6",
-    "graphql": "14.5.8",
-    "graphql-tag": "2.10.4",
-    "helmet": "3.22.0",
+    "graphql": "15.3.0",
+    "helmet": "4.1.1",
     "hoist-non-react-statics": "3.3.2",
     "intl": "1.2.5",
     "intl-pluralrules": "1.2.2",
-    "ioredis": "4.16.3",
-    "isomorphic-unfetch": "3.0.0",
+    "ioredis": "4.17.3",
+    "isomorphic-unfetch": "3.1.0",
     "js-cookie": "2.2.1",
     "js-search": "2.0.0",
-    "localforage": "1.7.4",
+    "localforage": "1.9.0",
     "lodash": "4.17.20",
     "logrocket": "1.0.13",
     "logrocket-react": "4.0.1",
-    "lru-cache": "5.1.1",
-    "mathjs": "7.0.2",
+    "lru-cache": "6.0.0",
+    "mathjs": "7.3.0",
     "morgan": "1.10.0",
     "next": "9.5.3",
     "node-sass": "4.14.1",
     "nodemon": "2.0.4",
-    "prismjs": "1.20.0",
+    "prismjs": "1.21.0",
     "qrcode.react": "1.0.0",
-    "ramda": "0.27.0",
+    "ramda": "0.27.1",
     "react": "16.13.1",
     "react-autosuggest": "10.0.2",
     "react-beautiful-dnd": "13.0.0",
     "react-circular-progressbar": "2.0.3",
     "react-csv": "2.0.3",
     "react-d3-cloud": "0.7.0",
-    "react-dnd": "10.0.2",
-    "react-dnd-html5-backend": "10.0.2",
+    "react-dnd": "11.1.3",
+    "react-dnd-html5-backend": "11.1.3",
     "react-dom": "16.13.1",
-    "react-dropzone": "11.0.3",
+    "react-dropzone": "11.2.0",
     "react-focus-lock": "2.4.1",
-    "react-ga": "2.7.0",
-    "react-intl": "4.5.4",
+    "react-ga": "3.1.2",
+    "react-intl": "5.8.4",
     "react-rangeslider": "2.2.0",
     "react-sizeme": "2.6.12",
-    "react-table": "7.0.4",
+    "react-table": "7.5.1",
     "react-toast-notifications": "2.4.0",
     "react-tooltip": "4.2.10",
     "recharts": "1.8.5",
-    "sanitize-html": "1.23.0",
-    "semantic-ui-react": "1.2.1",
+    "sanitize-html": "2.0.0",
+    "semantic-ui-react": "2.0.0",
     "styled-jsx-plugin-sass": "1.0.0",
-    "subscriptions-transport-ws": "0.9.16",
-    "typescript": "3.8.3",
+    "subscriptions-transport-ws": "0.9.18",
+    "typescript": "4.0.3",
     "url-loader": "4.1.0",
-    "uuid": "8.0.0",
+    "uuid": "8.3.0",
     "v8n": "1.3.3",
-    "yup": "0.28.5"
+    "yup": "0.29.3"
   },
   "devDependencies": {
-    "@formatjs/cli": "1.10.6",
-    "@formatjs/intl-utils": "2.3.0",
-    "@typescript-eslint/eslint-plugin": "2.33.0",
-    "@typescript-eslint/parser": "2.32.0",
-    "@graphql-codegen/cli": "1.17.9",
+    "@types/draft-js": "0.10.44",
+    "@types/lodash": "4.14.161",
+    "@types/ramda": "0.27.19",
+    "@types/react": "16.9.49",
+    "@types/react-dom": "16.9.8",
+    "@types/styled-jsx": "2.2.8",
+    "@formatjs/cli": "2.13.0",
+    "@formatjs/intl-utils": "3.8.4",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
+    "@graphql-codegen/cli": "1.17.10",
     "@graphql-codegen/fragment-matcher": "1.17.8",
-    "@testing-library/react": "10.4.9",
+    "@testing-library/react": "11.0.4",
     "enzyme": "3.11.0",
     "eslint": "7.10.0",
-    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-airbnb": "18.2.0",
     "eslint-config-prettier": "6.12.0",
     "eslint-import-resolver-typescript": "2.3.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-react-hooks": "4.1.2",
     "eslint-plugin-jsx-a11y": "6.3.1",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react": "7.21.2",
     "fomantic-ui": "2.8.7",
     "fomantic-ui-css": "2.8.7",
     "gulp": "4.0.2",
     "husky": "4.3.0",
     "jest": "26.4.2",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
-    "react-dnd-test-backend": "10.0.2",
+    "react-dnd-test-backend": "11.1.3",
     "react-perf-devtool": "3.1.8",
     "react-test-renderer": "16.13.1",
     "webpack-bundle-analyzer": "3.9.0",

src/components/admin/UserList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import dayjs from 'dayjs'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 import { Loader, Message } from 'semantic-ui-react'
 import { FormattedMessage } from 'react-intl'
 import { useToasts } from 'react-toast-notifications'

src/components/common/navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import getConfig from 'next/config'
 import { useRouter } from 'next/router'
 import _get from 'lodash/get'
 import { Icon, Menu } from 'semantic-ui-react'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 
 import AccountArea from './AccountArea'
 import SearchArea from './SearchArea'

src/components/evaluation/charts/TableChart.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import _sortBy from 'lodash/sortBy'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 import { Button, Table } from 'semantic-ui-react'
 
 import { QUESTION_GROUPS } from '../../../constants'

src/components/forms/BlockSettingsForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import _isEmpty from 'lodash/isEmpty'
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 import { Dropdown, Form, Button, Modal } from 'semantic-ui-react'
 import { Formik } from 'formik'
 import { object, number } from 'yup'

src/components/forms/sessionCreation/SessionEditForm.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/client'
 
 import SessionDetailsQuery from '../../../graphql/queries/SessionDetailsQuery.graphql'
 

src/components/forms/userSettings/AccountDataForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import getConfig from 'next/config'
 import _get from 'lodash/get'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Formik } from 'formik'
 import { object } from 'yup'

src/components/forms/userSettings/PasswordUpdateForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Formik } from 'formik'
 import { object } from 'yup'

src/components/forms/userSettings/UserSettingsForm.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import _get from 'lodash/get'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
 import { Message, Button, Tab } from 'semantic-ui-react'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 
 import AccountDataForm from './AccountDataForm'
 import PasswordUpdateForm from './PasswordUpdateForm'

src/components/layouts/TeacherLayout.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 
 import CommonLayout from './CommonLayout'
 import Navbar from '../common/navbar/Navbar'
@@ -23,7 +23,6 @@ const defaultProps = {
 }
 
 function TeacherLayout({ actionArea, children, fixedHeight, navbar, pageTitle, sidebar }: Props): React.ReactElement {
-  const intl = useIntl()
   const router = useRouter()
 
   const [isSidebarVisible, setIsSidebarVisible] = useState(false)
@@ -67,7 +66,7 @@ function TeacherLayout({ actionArea, children, fixedHeight, navbar, pageTitle, s
             <Navbar
               handleSidebarToggle={(): void => setIsSidebarVisible((prevState): boolean => !prevState)}
               sidebarVisible={isSidebarVisible}
-              title={intl.formatMessage({ id: `${sidebar.activeItem}.title` })}
+              title={sidebarItems.find((item) => item.name === sidebar.activeItem)?.label}
               {...navbar}
             />
           </div>

src/components/questions/ActionBar.tsx

@@ -6,7 +6,7 @@ import { CSVDownload } from 'react-csv'
 import { useToasts } from 'react-toast-notifications'
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl'
 import { Button, Confirm, Icon, Label, Dropdown, Checkbox } from 'semantic-ui-react'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 
 import QuestionCreationModal from './QuestionCreationModal'
 import UploadModal from './UploadModal'

src/components/questions/QuestionCreationModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 import { convertToRaw } from 'draft-js'
 import { Modal } from 'semantic-ui-react'
 

src/components/questions/QuestionDetailsModal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 import { convertToRaw } from 'draft-js'
 import { Modal } from 'semantic-ui-react'
 import _pick from 'lodash/pick'

src/components/questions/QuestionDuplicationModal.tsx

@@ -3,7 +3,7 @@ import _pick from 'lodash/pick'
 import _omitBy from 'lodash/omitBy'
 import _isNil from 'lodash/isNil'
 import { ContentState, convertFromRaw, convertToRaw, EditorState } from 'draft-js'
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation } from '@apollo/client'
 import { Modal } from 'semantic-ui-react'
 
 import QuestionCreationForm from '../forms/questionManagement/QuestionCreationForm'

src/components/questions/TagList.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Icon, List, Loader, Message } from 'semantic-ui-react'
 import { FormattedMessage } from 'react-intl'
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/client'
 
 import { QUESTION_TYPES } from '../../constants'
 import TagListQuery from '../../graphql/queries/TagListQuery.graphql'

src/components/questions/UploadModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { Modal, Button, Table, Icon } from 'semantic-ui-react'
-import { useApolloClient } from '@apollo/react-hooks'
+import { useApolloClient } from '@apollo/client'
 import { useDropzone } from 'react-dropzone'
 import { FormattedMessage } from 'react-intl'
 import { useToasts } from 'react-toast-notifications'

src/components/sessions/LoadSessionData.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import _get from 'lodash/get'
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/client'
 
 import SessionEvaluationQuery from '../../graphql/queries/SessionEvaluationQuery.graphql'
 import SessionEvaluationPublicQuery from '../../graphql/queries/SessionEvaluationPublicQuery.graphql'

src/components/sessions/Session.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import _get from 'lodash/get'
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation } from '@apollo/client'
 import { Confirm, Button, Label, Icon, Message, Dropdown } from 'semantic-ui-react'
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl'
 

src/components/sessions/SessionList.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useRouter } from 'next/router'
 import { Loader, Message } from 'semantic-ui-react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/client'
 
 import Session from './Session'
 import SessionListQuery from '../../graphql/queries/SessionListQuery.graphql'

src/klicker.conf.js

@@ -3,6 +3,9 @@
 require('dotenv').config()
 
 const convict = require('convict')
+const convictValidators = require('convict-format-with-validator')
+
+convict.addFormats(convictValidators)
 
 module.exports = convict({
   api: {