chore: Upgrade React to v17 (#2045)

* chore: Upgrade React v17

* chore: Upgrade additional deps to reduce warnings

* fix: Restore react-table dep

* Bump react-avatar-editor, mobx-react

* Remove unmaintained @rehooks/window-scroll-position dep

* Bump react-waypoint dep for React 17 support

* fix: Syntax error in autotrack chunk name comment

app/components/DocumentBreadcrumb.js

@@ -105,7 +105,7 @@ const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
   }, [path, category, collection]);
 
   if (!collections.isLoaded) {
-    return;
+    return null;
   }
 
   if (onlyText === true) {

app/hooks/useWindowScrollPosition.js

@@ -0,0 +1,52 @@
+// @flow
+// Based on https://github.com/rehooks/window-scroll-position which is no longer
+// maintained.
+import { throttle } from "lodash";
+import { useState, useEffect } from "react";
+
+let supportsPassive = false;
+try {
+  var opts = Object.defineProperty({}, "passive", {
+    get: function () {
+      supportsPassive = true;
+    },
+  });
+  window.addEventListener("testPassive", null, opts);
+  window.removeEventListener("testPassive", null, opts);
+} catch (e) {}
+
+const getPosition = () => ({
+  x: window.pageXOffset,
+  y: window.pageYOffset,
+});
+
+const defaultOptions = {
+  throttle: 100,
+};
+
+export default function useWindowScrollPosition(options: {
+  throttle: number,
+}): { x: number, y: number } {
+  let opts = Object.assign({}, defaultOptions, options);
+
+  let [position, setPosition] = useState(getPosition());
+
+  useEffect(() => {
+    let handleScroll = throttle(() => {
+      setPosition(getPosition());
+    }, opts.throttle);
+
+    window.addEventListener(
+      "scroll",
+      handleScroll,
+      supportsPassive ? { passive: true } : false
+    );
+
+    return () => {
+      handleScroll.cancel();
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [opts.throttle]);
+
+  return position;
+}

app/index.js

@@ -81,7 +81,7 @@ window.addEventListener("load", async () => {
   if (!env.GOOGLE_ANALYTICS_ID || !window.ga) return;
 
   // https://github.com/googleanalytics/autotrack/issues/137#issuecomment-305890099
-  await import(/** webpackChunkName: "autotrack" */ "autotrack/autotrack.js");
+  await import(/* webpackChunkName: "autotrack" */ "autotrack/autotrack.js");
 
   window.ga("require", "outboundLinkTracker");
   window.ga("require", "urlChangeTracker");

app/scenes/Document/components/Contents.js

@@ -1,9 +1,9 @@
 // @flow
-import useWindowScrollPosition from "@rehooks/window-scroll-position";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import HelpText from "components/HelpText";
+import useWindowScrollPosition from "hooks/useWindowScrollPosition";
 
 const HEADING_OFFSET = 20;
 

package.json

@@ -73,7 +73,6 @@
     "@babel/preset-react": "^7.10.4",
     "@outlinewiki/koa-passport": "^4.1.4",
     "@outlinewiki/passport-azure-ad-oauth2": "^0.1.0",
-    "@rehooks/window-scroll-position": "^1.0.1",
     "@sentry/node": "^6.3.1",
     "@sentry/react": "^6.3.1",
     "@sentry/tracing": "^6.3.1",
@@ -101,7 +100,7 @@
     "exports-loader": "^0.6.4",
     "fetch-with-proxy": "^3.0.1",
     "file-loader": "^1.1.6",
-    "flow-typed": "^2.6.2",
+    "flow-typed": "^3.3.1",
     "focus-visible": "^5.1.0",
     "fractional-index": "^1.0.0",
     "fs-extra": "^4.0.2",
@@ -133,8 +132,8 @@
     "koa-static": "^4.0.1",
     "lodash": "^4.17.19",
     "mammoth": "^1.4.16",
-    "mobx": "4.6.0",
-    "mobx-react": "^6.2.5",
+    "mobx": "^4.15.4",
+    "mobx-react": "^6.3.1",
     "natural-sort": "^1.0.0",
     "nodemailer": "^6.4.16",
     "outline-icons": "^1.27.0",
@@ -149,22 +148,23 @@
     "quoted-printable": "^1.0.1",
     "randomstring": "1.1.5",
     "raw-loader": "^0.5.1",
-    "react": "^16.8.6",
+    "react": "^17.0.2",
     "react-autosize-textarea": "^6.0.0",
-    "react-avatar-editor": "^10.3.0",
+    "react-avatar-editor": "^11.1.0",
     "react-color": "^2.17.3",
     "react-dnd": "^14.0.1",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
-    "react-helmet": "^5.2.0",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
+    "react-is": "^17.0.2",
     "react-keydown": "^1.7.3",
-    "react-portal": "^4.0.0",
+    "react-portal": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-table": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-waypoint": "^9.0.2",
+    "react-virtualized-auto-sizer": "^1.0.5",
+    "react-waypoint": "^10.1.0",
     "react-window": "^1.8.6",
     "reakit": "^1.3.6",
     "regenerator-runtime": "^0.13.7",
@@ -181,7 +181,7 @@
     "socket.io-redis": "^5.4.0",
     "socketio-auth": "^0.1.1",
     "string-replace-to-array": "^1.0.3",
-    "styled-components": "^5.0.0",
+    "styled-components": "^5.2.3",
     "styled-components-breakpoint": "^2.1.1",
     "styled-normalize": "^8.0.4",
     "tiny-cookie": "^2.3.1",
@@ -216,7 +216,7 @@
     "koa-webpack-hot-middleware": "^1.0.3",
     "nodemon": "^1.19.4",
     "prettier": "^2.0.5",
-    "react-refresh": "^0.10.0",
+    "react-refresh": "^0.9.0",
     "rimraf": "^2.5.4",
     "terser-webpack-plugin": "^4.1.0",
     "url-loader": "^0.6.2",