Upgrade React (#69)

* Update react * Fix breaking changes
PolyCortex · Nov 9, 2020 · d6b9093 · d6b9093
1 parent a7f35c4
commit d6b9093
Show file tree

Hide file tree

Showing 3 changed files with 2,908 additions and 2,426 deletions.
diff --git a/web/package.json b/web/package.json
@@ -34,14 +34,14 @@
     "headroom.js": "^0.11.0",
     "luxon": "^1.25.0",
     "prop-types": "^15.7.2",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-hook-form": "^6.8.4",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "^6.11.0",
     "react-hooks-global-state": "^1.0.1",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "react-scripts": "3.4.0",
-    "react-waypoint": "^9.0.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.0",
+    "react-waypoint": "^9.0.3",
     "reactstrap": "^8.7.1",
     "rxjs": "^6.6.3",
     "yarn": "^1.22.4"

diff --git a/web/src/components/d3component.js b/web/src/components/d3component.js
@@ -3,19 +3,22 @@ import PropTypes from 'prop-types';
 import { Spinner, Row, Col } from 'reactstrap';
 
 const D3Component = React.memo(({ callback, data, useDiv = false }) => {
-  if (data === null)
-    return (
-      <Row>
-        <Col className="text-center">
-          <Spinner style={{ width: '3rem', height: '3rem' }} />
-        </Col>
-      </Row>
-    );
   const ref = useRef();
   useEffect(() => {
-    callback(ref.current, data);
+    data && callback(ref.current, data);
   });
-  return useDiv ? <div ref={ref} /> : <svg ref={ref} />;
+
+  return data === null ? (
+    <Row>
+      <Col className="text-center">
+        <Spinner style={{ width: '3rem', height: '3rem' }} />
+      </Col>
+    </Row>
+  ) : useDiv ? (
+    <div ref={ref} />
+  ) : (
+    <svg ref={ref} />
+  );
 });
 
 D3Component.propTypes = {