Upgrading react and redux (and some related packages) to most recent versions. Fixing some initialization issues raised by the upgrade.

Author: Martin Krulis

package.json

@@ -25,7 +25,7 @@
     "format": "prettier --config .prettierrc --write \"src/**/*.js\""
   },
   "dependencies": {
-    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
+    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
     "@fortawesome/fontawesome-free": "^5.8.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.18",
     "@fortawesome/free-brands-svg-icons": "^5.8.2",
@@ -58,52 +58,52 @@
     "immutable": "^3.8.1",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.13.1",
-    "jwt-decode": "^2.0.1",
+    "jwt-decode": "^2.2.0",
     "markdown-it": "^8.4.1",
-    "moment": "^2.18.1",
+    "moment": "^2.24.0",
     "pretty-ms": "^2.1.0",
     "prop-types": "^15.5.8",
-    "react": "^16.2.0",
+    "react": "^16.8.6",
     "react-ace": "5.9.0",
     "react-bootstrap": "0.31.5",
     "react-collapse": "^4.0.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datetime": "^2.8.10",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.6",
     "react-dropzone": "^3.5.3",
     "react-height": "^3.0.0",
     "react-helmet": "^5.0.3",
     "react-immutable-proptypes": "^2.1.0",
     "react-intl": "2.4.0",
     "react-motion": "^0.5.2",
-    "react-redux": "^5.0.4",
+    "react-redux": "^7.1.0",
     "react-responsive": "^1.1.3",
-    "react-router": "3.2.0",
+    "react-router": "3.2.3",
     "react-router-bootstrap": "^0.23.3",
     "react-router-redux": "^4.0.8",
     "react-toggle": "4.0.2",
-    "redux": "^3.5.1",
-    "redux-actions": "^2.0.3",
-    "redux-form": "^7.4.2",
-    "redux-promise-middleware": "^4.2.0",
+    "redux": "^4.0.4",
+    "redux-actions": "^2.6.5",
+    "redux-form": "^8.2.4",
+    "redux-promise-middleware": "^6.1.1",
     "redux-storage": "^4.1.2",
     "redux-storage-decorator-filter": "^1.1.8",
     "redux-storage-engine-localstorage": "^1.1.4",
-    "redux-thunk": "^2.0.1",
-    "reselect": "^3.0.1",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
     "serialize-javascript": "^1.3.0",
     "statuscode": "0.0.0",
     "validator": "^7.0.0",
     "viz.js": "^1.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.2",
-    "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "^7.5.4",
+    "@babel/node": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
+    "@babel/register": "^7.4.4",
     "async": "^2.4.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",

src/components/forms/EditAssignmentForm/EditAssignmentForm.js

@@ -602,7 +602,7 @@ const validate = (
 
   validateTwoDeadlines(errors, formatMessage, firstDeadline, secondDeadline, allowSecondDeadline);
 
-  const formEnabledRuntimes = runtimeEnvironmentIds.filter(key => enabledRuntime[key]);
+  const formEnabledRuntimes = (runtimeEnvironmentIds || []).filter(key => enabledRuntime[key]);
   if (formEnabledRuntimes.length === 0) {
     errors._error = (
       <FormattedMessage

src/components/forms/EditLimitsForm/EditLimitsForm.js

@@ -188,6 +188,10 @@ EditLimitsForm.propTypes = {
 
 const validate = ({ limits }, { constraints, environments }) => {
   const errors = {};
+  if (!limits) {
+    return errors;
+  }
+
   const brokenEnvironments = validateLimitsTimeTotals(limits, constraints.totalTime);
 
   if (brokenEnvironments && brokenEnvironments.length > 0) {

src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js

@@ -179,7 +179,7 @@ const validate = ({ localizedTexts, type, role, visibleFrom, visibleTo }) => {
     );
   }
 
-  if (visibleTo.isBefore(visibleFrom)) {
+  if (visibleTo && visibleTo.isBefore(visibleFrom)) {
     errors.visibleFrom = (
       <FormattedMessage
         id="app.editSystemMessageForm.validation.visibleFromBeforeTo"

src/components/forms/EditTestsForm/EditTestsForm.js

@@ -118,8 +118,11 @@ EditTestsForm.propTypes = {
   formValues: PropTypes.object,
 };
 
-const validate = ({ isUniform, tests }) => {
+const validate = ({ tests }) => {
   const errors = {};
+  if (!tests) {
+    return errors;
+  }
 
   const testsErrors = {};
   const knownTests = new Set();

src/components/forms/EditTestsForm/EditTestsTest.js

@@ -6,9 +6,10 @@ import { FormattedMessage } from 'react-intl';
 
 import EditTestsTestRow from './EditTestsTestRow';
 import { prettyPrintPercent } from '../../helpers/stringFormatters';
+import { safeGet } from '../../../helpers/common';
 
 const EditTestsTest = ({ fields, isUniform, testValues, readOnly = false }) => {
-  const weightSum = isUniform ? fields.length : testValues.reduce((acc, val) => acc + Number(val.weight), 0);
+  const weightSum = isUniform ? fields.length : (testValues || []).reduce((acc, val) => acc + Number(val.weight), 0);
 
   return (
     <div>
@@ -38,7 +39,7 @@ const EditTestsTest = ({ fields, isUniform, testValues, readOnly = false }) => {
                 isUniform={isUniform}
                 readOnly={readOnly}
                 percent={
-                  testValues[index] && testValues[index].weight
+                  safeGet(testValues, [index, 'weight'])
                     ? prettyPrintPercent((isUniform ? 1 : Number(testValues[index].weight)) / weightSum)
                     : '?'
                 }
@@ -63,7 +64,7 @@ EditTestsTest.propTypes = {
   readOnly: PropTypes.bool,
   fields: PropTypes.object.isRequired,
   isUniform: PropTypes.bool.isRequired,
-  testValues: PropTypes.array.isRequired,
+  testValues: PropTypes.array,
 };
 
 export default formValues({

src/components/forms/GenerateTokenForm/GenerateTokenForm.js

@@ -192,6 +192,10 @@ GenerateTokenForm.propTypes = {
 
 const validate = ({ scopes, expiration }) => {
   const errors = {};
+  if (!scopes || !expiration) {
+    return errors;
+  }
+
   if (!scopes['read-all'] && !scopes.master) {
     errors._error = (
       <FormattedHTMLMessage
@@ -212,7 +216,7 @@ const validate = ({ scopes, expiration }) => {
 
 const warn = ({ scopes }) => {
   const warnings = {};
-  if (scopes['read-all'] && scopes.master) {
+  if (scopes && scopes['read-all'] && scopes.master) {
     warnings._warning = (
       <FormattedHTMLMessage
         id="app.generateTokenForm.warnBothMasterAndReadAll"

src/components/forms/LocalizedTextsFormField/SharedExerciseAssignmentLocalizedFields.js

@@ -6,7 +6,7 @@ import { TextField, MarkdownTextAreaField } from '../Fields';
 
 const isURL = url => {
   const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/;
-  return url.trim() !== '' && !pattern.test(url.trim()) ? (
+  return url && url.trim() !== '' && !pattern.test(url.trim()) ? (
     <FormattedMessage
       id="app.editAssignmentForm.localized.urlValidation"
       defaultMessage="Given string is not a valid URL."

src/helpers/localizedData.js

@@ -103,6 +103,10 @@ export const transformLocalizedTextsFormData = formData => {
  * @param internalValidation {function} injected internal validator called on every enabled localized text
  */
 export const validateLocalizedTextsFormData = (errors, formData, internalValidation = null) => {
+  if (!formData) {
+    return errors;
+  }
+
   // Ensure that at least one localized text version is enabled.
   const enabledCount = formData.reduce((acc, data) => acc + (data && data._enabled ? 1 : 0), 0);
   if (enabledCount < 1) {

src/pages/EditAssignment/EditAssignment.js

@@ -239,26 +239,28 @@ EditAssignment.propTypes = {
 
 const editAssignmentFormSelector = formValueSelector('editAssignment');
 
-export default connect(
-  (state, { params: { assignmentId } }) => {
-    const assignment = getAssignment(state)(assignmentId);
-    return {
-      assignment,
-      userId: loggedInUserIdSelector(state),
-      exercise: getExerciseOfAssignmentJS(state)(assignmentId),
-      runtimeEnvironments: runtimeEnvironmentsSelector(state),
-      firstDeadline: editAssignmentFormSelector(state, 'firstDeadline'),
-      allowSecondDeadline: editAssignmentFormSelector(state, 'allowSecondDeadline'),
-      visibility: editAssignmentFormSelector(state, 'visibility'),
-      allowVisibleFrom: editAssignmentFormSelector(state, 'allowVisibleFrom'),
-    };
-  },
-  (dispatch, { params: { assignmentId } }) => ({
-    push: url => dispatch(push(url)),
-    reset: () => dispatch(reset('editAssignment')),
-    loadAsync: () => EditAssignment.loadAsync({ assignmentId }, dispatch),
-    editAssignment: data => dispatch(editAssignment(assignmentId, data)),
-    exerciseSync: () => dispatch(syncWithExercise(assignmentId)),
-    validateAssignment: version => dispatch(validateAssignment(assignmentId, version)),
-  })
-)(withLinks(EditAssignment));
+export default withLinks(
+  connect(
+    (state, { params: { assignmentId } }) => {
+      const assignment = getAssignment(state)(assignmentId);
+      return {
+        assignment,
+        userId: loggedInUserIdSelector(state),
+        exercise: getExerciseOfAssignmentJS(state)(assignmentId),
+        runtimeEnvironments: runtimeEnvironmentsSelector(state),
+        firstDeadline: editAssignmentFormSelector(state, 'firstDeadline'),
+        allowSecondDeadline: editAssignmentFormSelector(state, 'allowSecondDeadline'),
+        visibility: editAssignmentFormSelector(state, 'visibility'),
+        allowVisibleFrom: editAssignmentFormSelector(state, 'allowVisibleFrom'),
+      };
+    },
+    (dispatch, { params: { assignmentId } }) => ({
+      push: url => dispatch(push(url)),
+      reset: () => dispatch(reset('editAssignment')),
+      loadAsync: () => EditAssignment.loadAsync({ assignmentId }, dispatch),
+      editAssignment: data => dispatch(editAssignment(assignmentId, data)),
+      exerciseSync: () => dispatch(syncWithExercise(assignmentId)),
+      validateAssignment: version => dispatch(validateAssignment(assignmentId, version)),
+    })
+  )(EditAssignment)
+);