Update 'react', 'react-dom', and 'react-markdown' to latest version (#1184)

* Update 'react' and 'react-dom' to latest version & swap 'componentWillMount' with 'componentDidMount' as recommended by React * make code adjustment related to a 'react-markdown' breaking change * remove extra wrapper div for ReactMarkdown elements * turned NotFound into a stateless component * code improvement
2019-12-10 17:07:42 -08:00 · 2019-12-10 17:07:42 -08:00 · 32f29d3767
--- a/components/form-fields/help-types.jsx
+++ b/components/form-fields/help-types.jsx
@ -6,12 +6,12 @@ class HelpTypesField extends React.Component {
  constructor(props) {
    super(props);
    this.state = { options: [] };
-  }
-  componentWillMount() {
+
    Service.helpTypes.get().then(options => {
      this.setState({ options: options.map(option => option.name) });
    });
  }
+
  render() {
    return (
      <DynamicCheckboxGroup
--- a/components/form-fields/issues.jsx
+++ b/components/form-fields/issues.jsx
@ -9,12 +9,12 @@ class IssuesField extends React.Component {
      options: [],
      selectedOptions: this.props.value
    };
-  }
-  componentWillMount() {
+
    Service.issues.get().then(options => {
      this.setState({ options: options.map(option => option.name) });
    });
  }
+
  render() {
    return (
      <DynamicCheckboxGroup
--- a/components/profile-about-tab/profile-about-tab.jsx
+++ b/components/profile-about-tab/profile-about-tab.jsx
@ -10,16 +10,16 @@ class ProfileAboutTab extends React.Component {
  renderLongBio() {
    if (!this.props.longBio) return null;

-    return this.props.longBio.split(`\n`).map(line => {
-      return (
+    return this.props.longBio
+      .split(`\n`)
+      .map(line => (
        <ReactMarkdown
          key={line}
          source={line}
          escapeHtml={true}
          skipHtml={true}
        />
-      );
-    });
+      ));
  }

  render() {
--- a/package-lock.json
+++ b/package-lock.json
@ -754,11 +754,6 @@
      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
      "dev": true
    },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-    },
    "asn1": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@ -2762,16 +2757,6 @@
        "sha.js": "^2.4.8"
      }
    },
-    "create-react-class": {
-      "version": "15.6.3",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
-      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
-      "requires": {
-        "fbjs": "^0.8.9",
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
    "cross-spawn": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@ -3302,14 +3287,6 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
    },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
    "end-of-stream": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@ -4007,27 +3984,6 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.18"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        }
-      }
-    },
    "fd-slicer": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@ -4912,6 +4868,67 @@
      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
      "dev": true
    },
+    "html-to-react": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.2.tgz",
+      "integrity": "sha512-TdTfxd95sRCo6QL8admCkE7mvNNrXtGoVr1dyS+7uvc8XCqAymnf/6ckclvnVbQNUo2Nh21VPwtfEHd0khiV7g==",
+      "requires": {
+        "domhandler": "^3.0",
+        "htmlparser2": "^4.0",
+        "lodash.camelcase": "^4.3.0",
+        "ramda": "^0.26"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        },
+        "domhandler": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.0.0.tgz",
+          "integrity": "sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==",
+          "requires": {
+            "dom-serializer": "^0.2.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0"
+          }
+        },
+        "entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
+          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+        },
+        "htmlparser2": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.0.0.tgz",
+          "integrity": "sha512-cChwXn5Vam57fyXajDtPXL1wTYc8JtLbr2TN76FYu05itVVVealxLowe2B3IEznJG4p9HAYn/0tJaRlGuEglFQ==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
    "htmlparser2": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@ -4972,11 +4989,6 @@
      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
      "dev": true
    },
-    "iconv-lite": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
-    },
    "ieee754": {
      "version": "1.1.12",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
@ -5565,15 +5577,6 @@
      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
    },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
    "isstream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@ -5803,6 +5806,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -6331,15 +6339,6 @@
      "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.1.0.tgz",
      "integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q=="
    },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
    "node-gyp": {
      "version": "3.8.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@ -8447,14 +8446,6 @@
      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
      "dev": true
    },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
    "promise-inflight": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@ -8610,6 +8601,11 @@
      "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
      "dev": true
    },
+    "ramda": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
+      "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -8676,15 +8672,13 @@
      }
    },
    "react": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
-      "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
+      "version": "16.12.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
+      "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==",
      "requires": {
-        "create-react-class": "^15.6.0",
-        "fbjs": "^0.8.9",
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
      }
    },
    "react-debounce-input": {
@ -8697,14 +8691,14 @@
      }
    },
    "react-dom": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
-      "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
+      "version": "16.12.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz",
+      "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==",
      "requires": {
-        "fbjs": "^0.8.9",
        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.18.0"
      }
    },
    "react-fast-compare": {
@ -8752,12 +8746,14 @@
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
    "react-markdown": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-3.6.0.tgz",
-      "integrity": "sha512-TV0wQDHHPCEeKJHWXFfEAKJ8uSEsJ9LgrMERkXx05WV/3q6Ig+59KDNaTmjcoqlCpE/sH5PqqLMh4t0QWKrJ8Q==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.2.2.tgz",
+      "integrity": "sha512-/STJiRFmJuAIUdeBPp/VyO5bcenTIqP3LXuC3gYvregmYGKjnszGiFc2Ph0LsWC17Un3y/CT8TfxnwJT7v9EJw==",
      "requires": {
+        "html-to-react": "^1.3.4",
        "mdast-add-list-metadata": "1.0.1",
-        "prop-types": "^15.6.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
        "remark-parse": "^5.0.0",
        "unified": "^6.1.5",
        "unist-util-visit": "^1.3.0",
@ -9440,6 +9436,15 @@
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
      "dev": true
    },
+    "scheduler": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
+      "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
    "schema-utils": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@ -9565,7 +9570,8 @@
    "setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "dev": true
    },
    "setprototypeof": {
      "version": "1.1.0",
@ -11254,11 +11260,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "ua-parser-js": {
-      "version": "0.7.18",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
-      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
-    },
    "unbzip2-stream": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz",
@ -12725,11 +12726,6 @@
        "source-map": "~0.6.1"
      }
    },
-    "whatwg-fetch": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
-      "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
-    },
    "which": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
--- a/package.json
+++ b/package.json
@ -97,13 +97,13 @@
    "postcss-cli": "^6.1.3",
    "prop-types": "^15.7.2",
    "qs": "^6.7.0",
-    "react": "^15.6.2",
+    "react": "^16.12.0",
    "react-debounce-input": "^3.2.2",
-    "react-dom": "^15.6.2",
+    "react-dom": "^16.12.0",
    "react-formbuilder": "^0.10.0",
    "react-ga": "^2.6.0",
    "react-helmet": "^5.2.1",
-    "react-markdown": "^3.6.0",
+    "react-markdown": "^4.2.2",
    "react-modal": "^3.11.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
--- a/pages/not-found.jsx
+++ b/pages/not-found.jsx
@ -3,22 +3,19 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import HintMessage from "../components/hint-message/hint-message.jsx";

-class NotFound extends React.Component {
-  componentWillMount() {
-    const { staticContext } = this.props;
+const NotFound = props => {
+  const { staticContext } = props;
  if (staticContext) {
    staticContext.pageNotFound = true;
  }
-  }

-  render() {
  return (
    <HintMessage
      iconComponent={<img src="/assets/svg/icon-404.svg" />}
-        header={this.props.header}
-        linkComponent={this.props.linkComponent}
+      header={props.header}
+      linkComponent={props.linkComponent}
    >
-        {this.props.children || (
+      {props.children || (
        <p>
          Check your URL or try a search. Still no luck?{" "}
          <a href="https://github.com/mozilla/network-pulse/issues/new">
@ -29,8 +26,7 @@ class NotFound extends React.Component {
      )}
    </HintMessage>
  );
-  }
-}
+};

 NotFound.propTypes = {
  header: PropTypes.string,