Get rid of react-faux-dom dependency

package.json

@@ -65,7 +65,6 @@
     "react": "^16.13.1",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.0.0",
-    "react-faux-dom": "^4.5.0",
     "react-router-dom": "^5.2.0",
     "react-tooltip": "^4.2.18",
     "resolve": "1.15.0",

src/components/Chart/Axes.tsx

@@ -1,33 +1,42 @@
 // TODO remove faux-dom and start using the React hook approach
-import ReactFauxDOM from 'react-faux-dom';
+import React, { useRef, useLayoutEffect } from 'react';
 import * as d3 from "d3";
 
 export const YAxis: React.FC<{
     scale: d3.ScaleLinear
 }> = ({ scale }) => {
-    const el = ReactFauxDOM.createElement('g');
     
+    const ref = useRef<SVGSVGElement>(null);
+
+    useLayoutEffect(() => {
         const axisGenerator = d3.axisLeft(scale).ticks(6);
 
-    d3.select(el).attr('class', 'y-axis')
+        d3.select(ref.current)
+            .attr('class', 'y-axis')
             .call(axisGenerator)
             .call(g => g.selectAll('.tick text').remove())
             .call(g => g.selectAll('.tick line').remove())
             .call(g => g.selectAll('.domain').remove());
-    return el.toReact();
+    }, [scale]);
+
+    return <g ref={ref} />;
 };
 
 export const XAxis: React.FC<{
     scale: d3.ScaleLinear
 }> = ({ scale }) => {
-    const el = ReactFauxDOM.createElement('g');
 
+    const ref = useRef<SVGSVGElement>(null);
+
+    useLayoutEffect(() => {
         const axisGenerator = d3.axisBottom(scale).ticks(6);
-    d3.select(el).attr('class', 'x-axis')
+        d3.select(ref.current)
+            .attr('class', 'x-axis')
             .call(axisGenerator)
             .call(g => g.selectAll('.tick text').remove())
             .call(g => g.selectAll('.tick line').remove())
             .call(g => g.selectAll('.domain').remove());
+    }, [scale]);
 
-    return el.toReact();
+    return <g ref={ref} />;
 };

yarn.lock

@@ -2995,14 +2995,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.3:
-  version "15.7.0"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
-  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-spawn@7.0.1:
   version "7.0.1"
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -4896,7 +4888,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8330,11 +8322,6 @@ qs@~6.5.2:
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=
 
-query-selector@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/query-selector/-/query-selector-1.0.9.tgz#917fd31b7379b53fd441e536af647552e01e7e9e"
-  integrity sha1-kX/TG3N5tT/UQeU2r2R1UuAefp4=
-
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -8442,16 +8429,6 @@ react-error-overlay@^6.0.7:
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha1-R07RHQT8a9o69kNEfYXpEn7Wtd4=
 
-react-faux-dom@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/react-faux-dom/-/react-faux-dom-4.5.0.tgz#3fbe3e4c17b48c3be7031d032e4e648e2e471add"
-  integrity sha512-T03fyZw/He4EYPqQpK5KJ9BQXNNMMgUo5DiwWkFG5wlpMDuiiYc4Q8WfeODjl3g2S2OBqy3+0VUr44sZkqz2Sw==
-  dependencies:
-    create-react-class "^15.6.3"
-    hoist-non-react-statics "^3.3.0"
-    query-selector "^1.0.9"
-    style-attr "^1.0.1"
-
 react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9667,11 +9644,6 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-style-attr@^1.0.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/style-attr/-/style-attr-1.3.0.tgz#2c1997a4865e25d7dbcb216be0ad715f005b9b17"
-  integrity sha512-srFr54gzEZoy73WgYfnbxCAtNCzF0Hn5RGzK7gi/0G6ttZd9v3WZFGY4ed5ABr43dbGjPNr4T46geUxxUP9i6w==
-
 style-loader@0.23.1:
   version "0.23.1"
   resolved "https://extranet.aoe.com/artifactory/api/npm/om3-npm/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"