From 78fa2fcfcde0f459650fc013b96620f3de596269 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Fri, 3 Jul 2020 15:35:43 +0200
Subject: [PATCH 01/25] feat: break into smaller bundles based on pages

---
 package.json                           |   1 -
 src/App.js                             |  86 +++-----
 src/components/HexapodPlot.js          |  36 +++-
 src/components/PoseTable.js            |  73 +++----
 src/components/generic/SmallWidgets.js |   3 +-
 src/components/pages/LandingPage.js    |  22 +-
 src/components/vars.js                 |  11 +-
 src/index.css                          |   1 +
 src/loadables.js                       |  55 +++++
 src/routes.js                          |  52 +++++
 yarn.lock                              | 287 +------------------------
 11 files changed, 222 insertions(+), 405 deletions(-)
 create mode 100644 src/loadables.js
 create mode 100644 src/routes.js

diff --git a/package.json b/package.json
index da0d069..41f2677 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
         "react-dom": "^16.13.1",
         "react-ga": "^3.0.0",
         "react-icons": "^3.10.0",
-        "react-markdown": "^4.3.1",
         "react-plotly.js": "^2.4.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.1",
diff --git a/src/App.js b/src/App.js
index 7fe7174..557f5fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,9 @@
 import React from "react"
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
+import { BrowserRouter as Router } from "react-router-dom"
 import ReactGA from "react-ga"
 import { VirtualHexapod, getNewPlotParams } from "./hexapod"
 import * as defaults from "./templates"
-import { SECTION_NAMES, PATHS } from "./components/vars"
+import { SECTION_NAMES } from "./components/vars"
 import {
     PoseTable,
     Nav,
@@ -12,12 +12,8 @@ import {
     DimensionsWidget,
     AlertBox,
 } from "./components"
-import {
-    ForwardKinematicsPage,
-    InverseKinematicsPage,
-    LandingPage,
-    LegPatternPage,
-} from "./components/pages"
+
+import Routes from "./routes"
 
 ReactGA.initialize("UA-170794768-1", {
     //debug: true,
@@ -169,61 +165,35 @@ class App extends React.Component {
         </div>
     )
 
-    /* * * * * * * * * * * * * *
-     * Pages
-     * * * * * * * * * * * * * */
-
-    showPage = () => (
-        <Switch>
-            <Route path="/" exact>
-                <LandingPage onMount={this.onPageLoad} />
-            </Route>
-            <Route path={PATHS.forwardKinematics.path}>
-                <ForwardKinematicsPage
-                    params={{ pose: this.state.hexapodParams.pose }}
-                    onUpdate={this.updatePose}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-            <Route path={PATHS.inverseKinematics.path}>
-                <InverseKinematicsPage
-                    params={{
-                        dimensions: this.state.hexapodParams.dimensions,
-                        ikParams: this.state.ikParams,
-                    }}
-                    onUpdate={this.updateIkParams}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-            <Route path={PATHS.legPatterns.path}>
-                <LegPatternPage
-                    params={{ patternParams: this.state.patternParams }}
-                    onUpdate={this.updatePatternPose}
-                    onMount={this.onPageLoad}
-                />
-            </Route>
-        </Switch>
-    )
-
     /* * * * * * * * * * * * * *
      * Layout
      * * * * * * * * * * * * * */
 
-    render = () => (
-        <Router>
-            <Nav />
-            <div className="main content">
-                <div className="sidebar column-container cell">
-                    {this.mightShowDimensions()}
-                    {this.showPage()}
-                    {this.mightShowPoseTable()}
-                    {this.mightShowMessage()}
+    render() {
+        return (
+            <Router>
+                <Nav />
+                <div className="main content">
+                    <div className="sidebar column-container cell">
+                        {this.mightShowDimensions()}
+                        <Routes
+                            patternParams={this.state.patternParams}
+                            hexapodParams={this.state.hexapodParams}
+                            ikParams={this.state.ikParams}
+                            onPageLoad={this.onPageLoad}
+                            updatePose={this.updatePose}
+                            updateIkParams={this.updateIkParams}
+                            updatePatternPose={this.updatePatternPose}
+                        />
+                        {this.mightShowPoseTable()}
+                        {this.mightShowMessage()}
+                    </div>
+                    {this.mightShowPlot()}
                 </div>
-                {this.mightShowPlot()}
-            </div>
-            {this.mightShowDetailedNav()}
-        </Router>
-    )
+                {this.mightShowDetailedNav()}
+            </Router>
+        )
+    }
 }
 
 export default App
diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index 1ab344d..ef37d8a 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -1,11 +1,37 @@
-import React from "react"
-import Plotly from "plotly.js-gl3d-dist-min"
-import createPlotlyComponent from "react-plotly.js/factory"
-const Plot = createPlotlyComponent(Plotly)
+import React, { useEffect, useState, useRef } from "react"
 
 const HexapodPlot = props => {
+    const [ready, setReady] = useState(false)
+    const ref = useRef()
+
+    useEffect(() => {
+        let cancel = false
+        async function load() {
+            const [Plotly, createPlotlyComponent] = await Promise.allSettled([
+                import("plotly.js-gl3d-dist-min"),
+                import("react-plotly.js/factory"),
+            ]).then(values => values.map(({ value }) => value))
+
+            ref.current = createPlotlyComponent.default(Plotly.default)
+
+            if (!cancel) {
+                setReady(true)
+            }
+        }
+        load()
+
+        return () => {
+            cancel = true
+        }
+    }, [])
+
+    if (!ready) {
+        return null
+    }
+
+    const PlotEl = ref.current
     return (
-        <Plot
+        <PlotEl
             data={props.data}
             layout={props.layout}
             useResizeHandler={true}
diff --git a/src/components/PoseTable.js b/src/components/PoseTable.js
index c252c9b..c40b638 100644
--- a/src/components/PoseTable.js
+++ b/src/components/PoseTable.js
@@ -1,52 +1,43 @@
 import React from "react"
-import ReactMarkdown from "react-markdown"
-import { POSITION_NAMES_LIST } from "../hexapod"
 
-const POSITION_ALIAS = {
-    rightMiddle: "rm",
-    rightFront: "rf",
-    leftFront: "lf",
-    leftMiddle: "lm",
-    leftBack: "lb",
-    rightBack: "rb",
-}
-
-const formatPose = pose =>
-    POSITION_NAMES_LIST.reduce((formattedPose, position) => {
-        const alias = POSITION_ALIAS[position]
-        const { alpha, beta, gamma } = pose[position]
-        formattedPose[alias] = {
-            alpha: Number(alpha).toFixed(2),
-            beta: Number(beta).toFixed(2),
-            gamma: Number(gamma).toFixed(2),
-        }
-        return formattedPose
-    }, {})
-
-const poseMessage = ({ rm, rf, lf, lm, lb, rb }) => `
-
-| POSITION    | ALPHA       | BETA        | GAMMA       |
-|-------------|:-----------:|:-----------:|:-----------:|
-| rightMiddle | ${rm.alpha} | ${rm.beta}  | ${rm.gamma} |
-| rightFront  | ${rf.alpha} | ${rf.beta}  | ${rf.gamma} |
-| leftFront   | ${lf.alpha} | ${lf.beta}  | ${lf.gamma} |
-| leftMiddle  | ${lm.alpha} | ${lm.beta}  | ${lm.gamma} |
-| leftBack    | ${lb.alpha} | ${lb.beta}  | ${lb.gamma} |
-| rightBack   | ${rb.alpha} | ${rb.beta}  | ${rb.gamma} |
+const TableHeader = React.memo(({ labels }) => (
+    <thead>
+        <tr>
+            {labels.map(label => (
+                <th key={label}>{label}</th>
+            ))}
+        </tr>
+    </thead>
+))
 
-`
+const TableRow = React.memo(({ label, alpha, beta, gamma }) => (
+    <tr>
+        <td>{label}</td>
+        <td>{Number(alpha).toFixed(2)}</td>
+        <td>{Number(beta).toFixed(2)}</td>
+        <td>{Number(gamma).toFixed(2)}</td>
+    </tr>
+))
 
-const poseTable = ({ pose }) => {
-    const formattedPose = formatPose(pose)
-    const { rm, rf, lf, lm, lb, rb } = formattedPose
-    const markdownMessage = poseMessage({ rm, rf, lf, lm, lb, rb })
+const PoseTable = ({ pose }) => {
+    const { rightMiddle, rightFront, leftFront, leftMiddle, leftBack, rightBack } = pose
     return (
         <div className="table-container">
-            <div className="cell" style={{}}>
-                <ReactMarkdown source={markdownMessage} />
+            <div className="cell">
+                <table>
+                    <TableHeader labels={["POSITION", "ALPHA", "BETA", "GAMMA"]} />
+                    <tbody>
+                        <TableRow label="rightMiddle" {...rightMiddle} />
+                        <TableRow label="rightFront" {...rightFront} />
+                        <TableRow label="leftFront" {...leftFront} />
+                        <TableRow label="leftMiddle" {...leftMiddle} />
+                        <TableRow label="leftBack" {...leftBack} />
+                        <TableRow label="rightBack" {...rightBack} />
+                    </tbody>
+                </table>
             </div>
         </div>
     )
 }
 
-export default poseTable
+export default PoseTable
diff --git a/src/components/generic/SmallWidgets.js b/src/components/generic/SmallWidgets.js
index a72d0b5..21de273 100644
--- a/src/components/generic/SmallWidgets.js
+++ b/src/components/generic/SmallWidgets.js
@@ -1,5 +1,4 @@
 import React from "react"
-import ReactMarkdown from "react-markdown"
 import { ICON_COMPONENTS } from "../vars"
 
 const AlertBox = ({ info }) => (
@@ -7,7 +6,7 @@ const AlertBox = ({ info }) => (
         <h2 className="red">
             {ICON_COMPONENTS.times} {info.subject}
         </h2>
-        <ReactMarkdown source={info.body} />
+        <pre>{info.body}</pre>
     </div>
 )
 
diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
index 6176fe7..cfe80a8 100644
--- a/src/components/pages/LandingPage.js
+++ b/src/components/pages/LandingPage.js
@@ -1,20 +1,18 @@
-import React from "react"
-import ReactMarkdown from "react-markdown"
+import React, { useLayoutEffect } from "react"
 import { NavDetailed } from ".."
-import { LANDING_PAGE_MESSAGE, SECTION_NAMES } from "../vars"
+import { LANDING_PAGE_TITLE, LANDING_PAGE_SUBTITLE, SECTION_NAMES } from "../vars"
 
-class LandingPage extends React.Component {
-    pageName = SECTION_NAMES.landingPage
+function LandingPage({ onMount }) {
+    useLayoutEffect(() => {
+        onMount(SECTION_NAMES.landingPage)
+    }, [onMount])
 
-    componentDidMount() {
-        this.props.onMount(this.pageName)
-    }
-
-    render = () => (
+    return (
         <>
-            <div className="hexapod-img" />{" "}
+            <div className="hexapod-img" />
             <div id="landing">
-                <ReactMarkdown source={LANDING_PAGE_MESSAGE} />
+                <h1>{LANDING_PAGE_TITLE}</h1>
+                <p>{LANDING_PAGE_SUBTITLE}</p>
             </div>
             <NavDetailed />
         </>
diff --git a/src/components/vars.js b/src/components/vars.js
index fcea164..b331462 100644
--- a/src/components/vars.js
+++ b/src/components/vars.js
@@ -124,16 +124,13 @@ const URL_LINKS = [KOFI_LINK_PROPERTIES, REPO_LINK_PROPERTIES]
  * LANDING PAGE
  *************/
 
-const LANDING_PAGE_MESSAGE = `
-
-# Mithi's Bare Minimum Hexapod Robot Simulator
-
-Enjoy your stay and share with your friends!
-`
+const LANDING_PAGE_TITLE = `Mithi's Bare Minimum Hexapod Robot Simulator`
+const LANDING_PAGE_SUBTITLE = `Enjoy your stay and share with your friends!`
 
 export {
     ICON_COMPONENTS,
-    LANDING_PAGE_MESSAGE,
+    LANDING_PAGE_TITLE,
+    LANDING_PAGE_SUBTITLE,
     SECTION_NAMES,
     ANGLE_NAMES,
     DIMENSION_NAMES,
diff --git a/src/index.css b/src/index.css
index 0c73126..8bf4f9f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -91,6 +91,7 @@ th {
 
 th,
 td {
+    min-width: 50px;
     border-bottom: 1px solid rgba(41, 128, 185, 0.5);
     font-size: 12px;
     line-height: 16px;
diff --git a/src/loadables.js b/src/loadables.js
new file mode 100644
index 0000000..55af651
--- /dev/null
+++ b/src/loadables.js
@@ -0,0 +1,55 @@
+import React, { lazy, Suspense } from "react"
+
+const LazyLanding = lazy(() =>
+    import(
+        /* webpackChunkName: "Landing", webpackPreload: true */ "./components/pages/LandingPage"
+    )
+)
+
+const LazyForwardKinematicsPage = lazy(() =>
+    import(
+        /* webpackChunkName: "FwdKinematics", webpackPrefetch: true */ "./components/pages/ForwardKinematicsPage"
+    )
+)
+const LazyInverseKinematicsPage = lazy(() =>
+    import(
+        /* webpackChunkName: "InvKinematics", webpackPrefetch: true */ "./components/pages/InverseKinematicsPage"
+    )
+)
+const LazyLegPatternPage = lazy(() =>
+    import(
+        /* webpackChunkName: "LegPattern", webpackPrefetch: true */ "./components/pages/LegPatternPage"
+    )
+)
+
+export function SuspenseLandingPage(props) {
+    return (
+        <Suspense fallback={null}>
+            <LazyLanding {...props} />
+        </Suspense>
+    )
+}
+
+export function SuspenseForwardKinematicsPage(props) {
+    return (
+        <Suspense fallback={null}>
+            <LazyForwardKinematicsPage {...props} />
+        </Suspense>
+    )
+}
+
+export function SuspenseInverseKinematicsPage(props) {
+    return (
+        <Suspense fallback={null}>
+            <LazyInverseKinematicsPage {...props} />
+        </Suspense>
+    )
+}
+
+export function SuspenseLegPatternPage(props) {
+    return (
+        <Suspense fallback={null}>
+            <LazyLegPatternPage {...props} />
+        </Suspense>
+    )
+}
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..ef65983
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,52 @@
+import React from "react"
+import { Route, Switch } from "react-router-dom"
+import { PATHS } from "./components/vars"
+
+import {
+    SuspenseLandingPage,
+    SuspenseForwardKinematicsPage,
+    SuspenseInverseKinematicsPage,
+    SuspenseLegPatternPage,
+} from "./loadables"
+
+export const Routes = ({
+    onPageLoad,
+    hexapodParams,
+    ikParams,
+    patternParams,
+    updatePose,
+    updateIkParams,
+    updatePatternPose,
+}) => (
+    <Switch>
+        <Route path="/" exact>
+            <SuspenseLandingPage onMount={onPageLoad} />
+        </Route>
+        <Route path={PATHS.forwardKinematics.path}>
+            <SuspenseForwardKinematicsPage
+                params={{ pose: hexapodParams.pose }}
+                onUpdate={updatePose}
+                onMount={onPageLoad}
+            />
+        </Route>
+        <Route path={PATHS.inverseKinematics.path}>
+            <SuspenseInverseKinematicsPage
+                params={{
+                    dimensions: hexapodParams.dimensions,
+                    ikParams: ikParams,
+                }}
+                onUpdate={updateIkParams}
+                onMount={onPageLoad}
+            />
+        </Route>
+        <Route path={PATHS.legPatterns.path}>
+            <SuspenseLegPatternPage
+                params={{ patternParams: patternParams }}
+                onUpdate={updatePatternPose}
+                onMount={onPageLoad}
+            />
+        </Route>
+    </Switch>
+)
+
+export default Routes
diff --git a/yarn.lock b/yarn.lock
index 2d4ca6d..8877214 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2383,11 +2383,6 @@ babylon@^6.18.0:
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
-bail@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
-  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2840,21 +2835,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-character-entities-legacy@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
-  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
-
-character-entities@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
-  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
-
-character-reference-invalid@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
-  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -3019,11 +2999,6 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
-collapse-white-space@^1.0.2:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
-  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
-
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3824,7 +3799,7 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-serializer@0, dom-serializer@^0.2.1:
+dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
   integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
@@ -3861,13 +3836,6 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domhandler@^3.0, domhandler@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
-  integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
-  dependencies:
-    domelementtype "^2.0.1"
-
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -3884,15 +3852,6 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16"
-  integrity sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==
-  dependencies:
-    dom-serializer "^0.2.1"
-    domelementtype "^2.0.1"
-    domhandler "^3.0.0"
-
 dot-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
@@ -4469,7 +4428,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@~3.0.2:
+extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -5206,16 +5165,6 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
-html-to-react@^1.3.4:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.3.tgz#1430a1cb581ef29533892ec70a2fdc4554b17ffd"
-  integrity sha512-txe09A3vxW8yEZGJXJ1is5gGDfBEVACmZDSgwDyH5EsfRdOubBwBCg63ZThZP0xBn0UE4FyvMXZXmohusCxDcg==
-  dependencies:
-    domhandler "^3.0"
-    htmlparser2 "^4.1.0"
-    lodash.camelcase "^4.3.0"
-    ramda "^0.27"
-
 html-webpack-plugin@4.0.0-beta.11:
   version "4.0.0-beta.11"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
@@ -5240,16 +5189,6 @@ htmlparser2@^3.3.0:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
-htmlparser2@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78"
-  integrity sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^3.0.0"
-    domutils "^2.0.0"
-    entities "^2.0.0"
-
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -5437,7 +5376,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5563,19 +5502,6 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-alphabetical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
-  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
-
-is-alphanumerical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
-  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-
 is-arguments@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
@@ -5605,7 +5531,7 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -5653,11 +5579,6 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
-is-decimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
-  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
-
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -5739,11 +5660,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-hexadecimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
-  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -5785,7 +5701,7 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
-is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
+is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
@@ -5848,21 +5764,11 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-whitespace-character@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
-  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
-is-word-character@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
-  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
-
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -6710,11 +6616,6 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6822,11 +6723,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-escapes@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
-  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6836,13 +6732,6 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-mdast-add-list-metadata@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
-  integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
-  dependencies:
-    unist-util-visit-parents "1.1.2"
-
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -7653,18 +7542,6 @@ parse-color@^1.0.0:
   dependencies:
     color-convert "~0.5.0"
 
-parse-entities@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
-  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
@@ -8802,11 +8679,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-ramda@^0.27:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.0.tgz#915dc29865c0800bf3f69b8fd6c279898b59de43"
-  integrity sha512-pVzZdDpWwWqEVVLshWUHjNwuVP7SfcmPraYuqocJp1yo2U1R7P+5QAfDhdItkuoGqIBnBYrtPp7rEPqDn9HlZA==
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8906,25 +8778,11 @@ react-icons@^3.10.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-markdown@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.3.1.tgz#39f0633b94a027445b86c9811142d05381300f2f"
-  integrity sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==
-  dependencies:
-    html-to-react "^1.3.4"
-    mdast-add-list-metadata "1.0.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"
-    xtend "^4.0.1"
-
 react-plotly.js@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/react-plotly.js/-/react-plotly.js-2.4.0.tgz#7a8fd89ffa126daa36a5855890282960e2e4eaf0"
@@ -9214,27 +9072,6 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remark-parse@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
-  integrity sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==
-  dependencies:
-    collapse-white-space "^1.0.2"
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    is-word-character "^1.0.0"
-    markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    trim "0.0.1"
-    trim-trailing-lines "^1.0.0"
-    unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
-    xtend "^4.0.1"
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -9256,16 +9093,11 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
-replace-ext@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
-  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
-
 request-promise-core@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
@@ -10012,11 +9844,6 @@ stack-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
-state-toggle@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
-  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -10499,21 +10326,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-trim-trailing-lines@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
-  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
-
-trim@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
-  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
-
-trough@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
-  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
-
 ts-pnp@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
@@ -10593,14 +10405,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-unherit@^1.0.4:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
-  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
-  dependencies:
-    inherits "^2.0.0"
-    xtend "^4.0.0"
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -10624,18 +10428,6 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
-unified@^6.1.5:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
-  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
-  dependencies:
-    bail "^1.0.0"
-    extend "^3.0.0"
-    is-plain-obj "^1.1.0"
-    trough "^1.0.0"
-    vfile "^2.0.0"
-    x-is-string "^0.1.0"
-
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -10670,42 +10462,6 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
-unist-util-is@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
-  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
-
-unist-util-remove-position@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
-  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
-  dependencies:
-    unist-util-visit "^1.1.0"
-
-unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
-  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
-
-unist-util-visit-parents@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
-  integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==
-
-unist-util-visit-parents@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
-  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
-  dependencies:
-    unist-util-is "^3.0.0"
-
-unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
-  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
-  dependencies:
-    unist-util-visit-parents "^2.0.0"
-
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
@@ -10865,28 +10621,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vfile-location@^2.0.0:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
-  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
-
-vfile-message@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
-  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
-  dependencies:
-    unist-util-stringify-position "^1.1.1"
-
-vfile@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
-  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
-  dependencies:
-    is-buffer "^1.1.4"
-    replace-ext "1.0.0"
-    unist-util-stringify-position "^1.0.0"
-    vfile-message "^1.0.0"
-
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -11338,11 +11072,6 @@ ws@^6.1.2, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-x-is-string@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
-  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -11360,7 +11089,7 @@ xregexp@^4.3.0:
   dependencies:
     "@babel/runtime-corejs3" "^7.8.3"
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
+xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

From 7b95d181aa455ac478857fd072b4d696a373d51b Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 6 Jul 2020 15:55:05 +0200
Subject: [PATCH 02/25] feat: lazy load Hexapod and use semantic routing to
 display components

---
 src/App.js                                    |  86 +++++----------
 src/components/HexapodPlot.js                 |  42 ++++----
 src/components/Nav.js                         |  18 ++--
 src/components/PoseTable.js                   |   3 +-
 src/components/generic/SmallWidgets.js        |  17 +--
 src/components/index.js                       |   3 +-
 src/components/vars.js                        |   7 ++
 src/index.css                                 |  11 ++
 src/loadables.js                              |  26 ++++-
 src/routes.js                                 | 100 ++++++++++++------
 src/tests/components/App.test.js              |  44 +++++---
 .../components/__snapshots__/App.test.js.snap |   1 -
 12 files changed, 208 insertions(+), 150 deletions(-)

diff --git a/src/App.js b/src/App.js
index 557f5fa..332c42b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,10 @@
 import React from "react"
-import { BrowserRouter as Router } from "react-router-dom"
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
 import ReactGA from "react-ga"
 import { VirtualHexapod, getNewPlotParams } from "./hexapod"
 import * as defaults from "./templates"
-import { SECTION_NAMES } from "./components/vars"
-import {
-    PoseTable,
-    Nav,
-    NavDetailed,
-    HexapodPlot,
-    DimensionsWidget,
-    AlertBox,
-} from "./components"
+import { SECTION_NAMES, PATH_LINKS } from "./components/vars"
+import { Nav, NavDetailed } from "./components"
 
 import Routes from "./routes"
 
@@ -24,8 +17,7 @@ ReactGA.initialize("UA-170794768-1", {
 class App extends React.Component {
     state = {
         currentPage: SECTION_NAMES.LandingPage,
-        inHexapodPage: false,
-        showPoseMessage: true,
+        showPoseMessage: false,
         showInfo: false,
         info: {},
 
@@ -55,7 +47,6 @@ class App extends React.Component {
         if (pageName === SECTION_NAMES.landingPage) {
             this.setState({
                 currentPage: pageName,
-                inHexapodPage: false,
                 showInfo: false,
                 showPoseMessage: false,
             })
@@ -64,7 +55,6 @@ class App extends React.Component {
 
         this.setState({
             currentPage: pageName,
-            inHexapodPage: true,
             showInfo: false,
             showPoseMessage: false,
             ikParams: defaults.DEFAULT_IK_PARAMS,
@@ -128,43 +118,6 @@ class App extends React.Component {
         this.setState({ patternParams })
     }
 
-    /* * * * * * * * * * * * * *
-     * Control display of widgets
-     * * * * * * * * * * * * * */
-
-    mightShowMessage = () =>
-        this.state.showInfo ? <AlertBox info={this.state.info} /> : null
-
-    mightShowDetailedNav = () => (this.state.inHexapodPage ? <NavDetailed /> : null)
-
-    mightShowPoseTable = () => {
-        if (this.state.showPoseMessage) {
-            return <PoseTable pose={this.state.hexapodParams.pose} />
-        }
-    }
-
-    mightShowDimensions = () => {
-        if (this.state.inHexapodPage) {
-            return (
-                <DimensionsWidget
-                    params={{ dimensions: this.state.hexapodParams.dimensions }}
-                    onUpdate={this.updateDimensions}
-                />
-            )
-        }
-    }
-
-    mightShowPlot = () => (
-        <div className={this.state.inHexapodPage ? "plot border" : "no-display"}>
-            <HexapodPlot
-                data={this.state.plot.data}
-                layout={this.state.plot.layout}
-                onRelayout={this.logCameraView}
-                revision={this.state.plot.revisionCounter}
-            />
-        </div>
-    )
-
     /* * * * * * * * * * * * * *
      * Layout
      * * * * * * * * * * * * * */
@@ -173,24 +126,33 @@ class App extends React.Component {
         return (
             <Router>
                 <Nav />
-                <div className="main content">
-                    <div className="sidebar column-container cell">
-                        {this.mightShowDimensions()}
+                <Switch>
+                    <Route path={PATH_LINKS.map(({ path }) => path)} exact>
                         <Routes
-                            patternParams={this.state.patternParams}
+                            onPageLoad={this.onPageLoad}
+                            showPoseMessage={this.state.showPoseMessage}
+                            showInfo={this.state.showInfo}
+                            info={this.state.info}
+                            data={this.state.plot.data}
+                            layout={this.state.plot.layout}
+                            onRelayout={this.logCameraView}
+                            revision={this.state.plot.revisionCounter}
                             hexapodParams={this.state.hexapodParams}
+                            patternParams={this.state.patternParams}
                             ikParams={this.state.ikParams}
-                            onPageLoad={this.onPageLoad}
                             updatePose={this.updatePose}
                             updateIkParams={this.updateIkParams}
                             updatePatternPose={this.updatePatternPose}
+                            updateDimensions={this.updateDimensions}
                         />
-                        {this.mightShowPoseTable()}
-                        {this.mightShowMessage()}
-                    </div>
-                    {this.mightShowPlot()}
-                </div>
-                {this.mightShowDetailedNav()}
+                    </Route>
+                    <Route>
+                        <div className="no-match">
+                            <h1>404</h1>
+                            <NavDetailed />
+                        </div>
+                    </Route>
+                </Switch>
             </Router>
         )
     }
diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index ef37d8a..8b5af24 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -1,24 +1,23 @@
-import React, { useEffect, useState, useRef } from "react"
+import React from "react"
+import createPlotlyComponent from "react-plotly.js/factory"
 
-const HexapodPlot = props => {
-    const [ready, setReady] = useState(false)
-    const ref = useRef()
-
-    useEffect(() => {
-        let cancel = false
-        async function load() {
-            const [Plotly, createPlotlyComponent] = await Promise.allSettled([
-                import("plotly.js-gl3d-dist-min"),
-                import("react-plotly.js/factory"),
-            ]).then(values => values.map(({ value }) => value))
-
-            ref.current = createPlotlyComponent.default(Plotly.default)
+const PlotlyPromise = import(
+    /* webpackChunkName: "Plotly-gl-3d", webpackPreload: true */ "plotly.js-gl3d-dist-min"
+).then(Plotly => Plotly.default)
 
+const HexapodPlot = props => {
+    const ref = React.useRef()
+    const [ready, setReady] = React.useState(false)
+
+    React.useEffect(() => {
+        let cancel
+        PlotlyPromise.then(Plotly => {
+            ref.current = createPlotlyComponent(Plotly)
+        }).then(() => {
             if (!cancel) {
                 setReady(true)
             }
-        }
-        load()
+        })
 
         return () => {
             cancel = true
@@ -26,12 +25,17 @@ const HexapodPlot = props => {
     }, [])
 
     if (!ready) {
-        return null
+        return (
+            <div>
+                <h2>Loading...</h2>
+            </div>
+        )
     }
 
-    const PlotEl = ref.current
+    const Plot = ref.current
+
     return (
-        <PlotEl
+        <Plot
             data={props.data}
             layout={props.layout}
             useResizeHandler={true}
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 8d227b2..76584c0 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom"
 const NAV_BULLETS_PREFIX = "navBullet"
 const NAV_DETAILED_PREFIX = "navDetailed"
 
-const BulletPageLink = ({ path, description }) => (
+const BulletPageLink = React.memo(({ path, description }) => (
     <li>
         <Link to={path} className="link-icon">
             <span>
@@ -13,9 +13,9 @@ const BulletPageLink = ({ path, description }) => (
             </span>
         </Link>
     </li>
-)
+))
 
-const BulletUrlLink = ({ path, description, icon }) => (
+const BulletUrlLink = React.memo(({ path, description, icon }) => (
     <li>
         <a
             href={path}
@@ -29,9 +29,9 @@ const BulletUrlLink = ({ path, description, icon }) => (
             }
         />
     </li>
-)
+))
 
-const NavBullets = () => (
+const NavBullets = React.memo(() => (
     <ul className="row-container no-bullet top-bar">
         {URL_LINKS.map(link => (
             <BulletUrlLink
@@ -45,9 +45,9 @@ const NavBullets = () => (
             <BulletPageLink key={NAV_BULLETS_PREFIX + link.path} path={link.path} />
         ))}
     </ul>
-)
+))
 
-const NavDetailed = () => (
+const NavDetailed = React.memo(() => (
     <footer>
         <nav id="nav">
             <ul className="column-container no-bullet">
@@ -70,8 +70,8 @@ const NavDetailed = () => (
             </ul>
         </nav>
     </footer>
-)
+))
 
-const Nav = () => <NavBullets />
+const Nav = React.memo(() => <NavBullets />)
 
 export { Nav, NavDetailed }
diff --git a/src/components/PoseTable.js b/src/components/PoseTable.js
index c40b638..519e19e 100644
--- a/src/components/PoseTable.js
+++ b/src/components/PoseTable.js
@@ -19,7 +19,8 @@ const TableRow = React.memo(({ label, alpha, beta, gamma }) => (
     </tr>
 ))
 
-const PoseTable = ({ pose }) => {
+const PoseTable = ({ pose, showPoseTable }) => {
+    if (!showPoseTable) return null
     const { rightMiddle, rightFront, leftFront, leftMiddle, leftBack, rightBack } = pose
     return (
         <div className="table-container">
diff --git a/src/components/generic/SmallWidgets.js b/src/components/generic/SmallWidgets.js
index 21de273..19172e7 100644
--- a/src/components/generic/SmallWidgets.js
+++ b/src/components/generic/SmallWidgets.js
@@ -1,14 +1,15 @@
 import React from "react"
 import { ICON_COMPONENTS } from "../vars"
 
-const AlertBox = ({ info }) => (
-    <div className="message">
-        <h2 className="red">
-            {ICON_COMPONENTS.times} {info.subject}
-        </h2>
-        <pre>{info.body}</pre>
-    </div>
-)
+const AlertBox = ({ showInfo, info }) =>
+    showInfo && (
+        <div className="message">
+            <h2 className="red">
+                {ICON_COMPONENTS.times} {info.subject}
+            </h2>
+            <pre>{info.body}</pre>
+        </div>
+    )
 
 const ToggleSwitch = ({ id, value, handleChange, showValue }) => (
     <div className="switch-container">
diff --git a/src/components/index.js b/src/components/index.js
index 5e8575d..b4e2ef6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,5 @@
 import { Nav, NavDetailed } from "./Nav"
-import HexapodPlot from "./HexapodPlot"
 import DimensionsWidget from "./DimensionsWidget"
 import PoseTable from "./PoseTable"
 import { AlertBox } from "./generic"
-export { PoseTable, Nav, NavDetailed, AlertBox, HexapodPlot, DimensionsWidget }
+export { PoseTable, Nav, NavDetailed, AlertBox, DimensionsWidget }
diff --git a/src/components/vars.js b/src/components/vars.js
index b331462..e411e8a 100644
--- a/src/components/vars.js
+++ b/src/components/vars.js
@@ -118,6 +118,12 @@ const PATH_LINKS = [
     PATHS.landingPage,
 ]
 
+const HEXAPOD_LINK_PATHS = [
+    PATHS.inverseKinematics.path,
+    PATHS.forwardKinematics.path,
+    PATHS.legPatterns.path,
+]
+
 const URL_LINKS = [KOFI_LINK_PROPERTIES, REPO_LINK_PROPERTIES]
 
 /*************
@@ -140,5 +146,6 @@ export {
     PATHS,
     URL_LINKS,
     PATH_LINKS,
+    HEXAPOD_LINK_PATHS,
     RANGE_PARAMS,
 }
diff --git a/src/index.css b/src/index.css
index 8bf4f9f..1fe7e7b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -144,6 +144,17 @@ tr:hover {
     font-size: 13px;
 }
 
+.no-match {
+    margin: 0 auto;
+    min-width: 300px;
+    width: 40%;
+    max-width: 900px;
+}
+
+.no-match h1 {
+    text-align: center;
+}
+
 #nav {
     margin-top: 20px;
 }
diff --git a/src/loadables.js b/src/loadables.js
index 55af651..e58badd 100644
--- a/src/loadables.js
+++ b/src/loadables.js
@@ -11,20 +11,30 @@ const LazyForwardKinematicsPage = lazy(() =>
         /* webpackChunkName: "FwdKinematics", webpackPrefetch: true */ "./components/pages/ForwardKinematicsPage"
     )
 )
+
 const LazyInverseKinematicsPage = lazy(() =>
     import(
         /* webpackChunkName: "InvKinematics", webpackPrefetch: true */ "./components/pages/InverseKinematicsPage"
     )
 )
+
 const LazyLegPatternPage = lazy(() =>
     import(
         /* webpackChunkName: "LegPattern", webpackPrefetch: true */ "./components/pages/LegPatternPage"
     )
 )
 
+const LazyHexapodPlot = lazy(() =>
+    import(
+        /* webpackChunkName: "Hexapod", webpackPreload: true */ "./components/HexapodPlot"
+    )
+)
+
+const Fallback = () => <h2>Loading...</h2>
+
 export function SuspenseLandingPage(props) {
     return (
-        <Suspense fallback={null}>
+        <Suspense fallback={<Fallback />}>
             <LazyLanding {...props} />
         </Suspense>
     )
@@ -32,7 +42,7 @@ export function SuspenseLandingPage(props) {
 
 export function SuspenseForwardKinematicsPage(props) {
     return (
-        <Suspense fallback={null}>
+        <Suspense fallback={<Fallback />}>
             <LazyForwardKinematicsPage {...props} />
         </Suspense>
     )
@@ -40,7 +50,7 @@ export function SuspenseForwardKinematicsPage(props) {
 
 export function SuspenseInverseKinematicsPage(props) {
     return (
-        <Suspense fallback={null}>
+        <Suspense fallback={<Fallback />}>
             <LazyInverseKinematicsPage {...props} />
         </Suspense>
     )
@@ -48,8 +58,16 @@ export function SuspenseInverseKinematicsPage(props) {
 
 export function SuspenseLegPatternPage(props) {
     return (
-        <Suspense fallback={null}>
+        <Suspense fallback={<Fallback />}>
             <LazyLegPatternPage {...props} />
         </Suspense>
     )
 }
+
+export function SuspenseHexapodPlot(props) {
+    return (
+        <Suspense fallback={<Fallback />}>
+            <LazyHexapodPlot {...props} />
+        </Suspense>
+    )
+}
diff --git a/src/routes.js b/src/routes.js
index ef65983..be8438e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,52 +1,92 @@
 import React from "react"
 import { Route, Switch } from "react-router-dom"
-import { PATHS } from "./components/vars"
+import { HEXAPOD_LINK_PATHS, PATHS } from "./components/vars"
+
+import { PoseTable, NavDetailed, DimensionsWidget, AlertBox } from "./components"
 
 import {
     SuspenseLandingPage,
     SuspenseForwardKinematicsPage,
     SuspenseInverseKinematicsPage,
     SuspenseLegPatternPage,
+    SuspenseHexapodPlot,
 } from "./loadables"
 
 export const Routes = ({
     onPageLoad,
+    showPoseMessage,
+    showInfo,
+    info,
+    data,
+    layout,
+    revision,
     hexapodParams,
-    ikParams,
     patternParams,
+    ikParams,
     updatePose,
     updateIkParams,
     updatePatternPose,
+    updateDimensions,
+    onRelayout,
 }) => (
-    <Switch>
-        <Route path="/" exact>
-            <SuspenseLandingPage onMount={onPageLoad} />
-        </Route>
-        <Route path={PATHS.forwardKinematics.path}>
-            <SuspenseForwardKinematicsPage
-                params={{ pose: hexapodParams.pose }}
-                onUpdate={updatePose}
-                onMount={onPageLoad}
-            />
-        </Route>
-        <Route path={PATHS.inverseKinematics.path}>
-            <SuspenseInverseKinematicsPage
-                params={{
-                    dimensions: hexapodParams.dimensions,
-                    ikParams: ikParams,
-                }}
-                onUpdate={updateIkParams}
-                onMount={onPageLoad}
-            />
-        </Route>
-        <Route path={PATHS.legPatterns.path}>
-            <SuspenseLegPatternPage
-                params={{ patternParams: patternParams }}
-                onUpdate={updatePatternPose}
-                onMount={onPageLoad}
-            />
+    <>
+        <div className="main content">
+            <div className="sidebar column-container cell">
+                <Route path={HEXAPOD_LINK_PATHS} exact>
+                    <DimensionsWidget
+                        params={{
+                            dimensions: hexapodParams.dimensions,
+                        }}
+                        onUpdate={updateDimensions}
+                    />
+                </Route>
+                <Switch>
+                    <Route path="/" exact>
+                        <SuspenseLandingPage onMount={onPageLoad} />
+                    </Route>
+                    <Route path={PATHS.forwardKinematics.path}>
+                        <SuspenseForwardKinematicsPage
+                            params={{ pose: hexapodParams.pose }}
+                            onUpdate={updatePose}
+                            onMount={onPageLoad}
+                        />
+                    </Route>
+                    <Route path={PATHS.inverseKinematics.path}>
+                        <SuspenseInverseKinematicsPage
+                            params={{
+                                dimensions: hexapodParams.dimensions,
+                                ikParams: ikParams,
+                            }}
+                            onUpdate={updateIkParams}
+                            onMount={onPageLoad}
+                        />
+                    </Route>
+                    <Route path={PATHS.legPatterns.path}>
+                        <SuspenseLegPatternPage
+                            params={{ patternParams: patternParams }}
+                            onUpdate={updatePatternPose}
+                            onMount={onPageLoad}
+                        />
+                    </Route>
+                </Switch>
+                <PoseTable pose={hexapodParams.pose} showPoseTable={showPoseMessage} />
+                <AlertBox showInfo={showInfo} info={info} />
+            </div>
+            <Route path={HEXAPOD_LINK_PATHS} exact>
+                <div className="plot border">
+                    <SuspenseHexapodPlot
+                        data={data}
+                        layout={layout}
+                        onRelayout={onRelayout}
+                        revision={revision}
+                    />
+                </div>
+            </Route>
+        </div>
+        <Route path={HEXAPOD_LINK_PATHS} exact>
+            <NavDetailed />
         </Route>
-    </Switch>
+    </>
 )
 
 export default Routes
diff --git a/src/tests/components/App.test.js b/src/tests/components/App.test.js
index df496f9..d0f4410 100644
--- a/src/tests/components/App.test.js
+++ b/src/tests/components/App.test.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen, fireEvent } from "@testing-library/react"
+import { render, screen, fireEvent, act } from "@testing-library/react"
 import App from "../../App"
 import { PATH_LINKS, URL_LINKS } from "../../components/vars"
 
@@ -151,40 +151,55 @@ const click = name => fireEvent.click(screen.getByRole("link", { name }))
 Application
  * * * */
 describe("AppFragment", () => {
-    test("Renders App snapshot correctly", () => {
-        const { asFragment } = render(<App />)
-        expect(asFragment()).toMatchSnapshot()
+    test("Renders App snapshot correctly", async () => {
+        let container
+        await act(async () => {
+            container = await render(<App />)
+        })
+        expect(container.asFragment()).toMatchSnapshot()
     })
 })
 
 describe("App", () => {
-    beforeEach(() => {
-        render(<App />)
+    beforeEach(async () => {
+        await act(async () => {
+            render(<App />)
+        })
     })
 
-    test("Navigates to Leg Patterns page", () => {
-        click("Leg Patterns")
+    test("Navigates to Leg Patterns page", async () => {
+        await act(async () => {
+            click("Leg Patterns")
+        })
         expectEachPage()
         expectToHaveDefaultLegPatternsPage()
     })
 
-    test("Navigates to Inverse Kinematics page", () => {
-        click("Inverse Kinematics")
+    test("Navigates to Inverse Kinematics page", async () => {
+        await act(async () => {
+            click("Inverse Kinematics")
+        })
         expectEachPage()
         expectToHaveDefaultInverseKinematics()
     })
 
-    test("Navigates to Forward Kinematics page", () => {
-        click("Forward Kinematics")
+    test("Navigates to Forward Kinematics page", async () => {
+        await act(async () => {
+            click("Forward Kinematics")
+        })
         expectEachPage({ numberOfResetButtons: 2, numberOfToggleSwitches: 2 })
         expectToHaveDefaultForwardKinematics()
     })
 
-    test("Navigates to Landing Page", () => {
-        click("Root")
+    test("Navigates to Landing Page", async () => {
+        await act(async () => {
+            click("Root")
+        })
+
         const heading = screen.getByRole("heading", {
             name: "Mithi's Bare Minimum Hexapod Robot Simulator",
         })
+
         expect(heading).toBeInTheDocument()
 
         const wrongHeadings = [
@@ -193,6 +208,7 @@ describe("App", () => {
             "Inverse Kinematics",
             "Forward Kinematics",
         ]
+
         wrongHeadings.forEach(name =>
             expect(screen.queryByRole("heading", { name })).toBeNull()
         )
diff --git a/src/tests/components/__snapshots__/App.test.js.snap b/src/tests/components/__snapshots__/App.test.js.snap
index b253522..6903ed6 100644
--- a/src/tests/components/__snapshots__/App.test.js.snap
+++ b/src/tests/components/__snapshots__/App.test.js.snap
@@ -179,7 +179,6 @@ exports[`AppFragment Renders App snapshot correctly 1`] = `
       <div
         class="hexapod-img"
       />
-       
       <div
         id="landing"
       >

From bb32e8d8a34099a9f0470bf316c58daeabc756d8 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 6 Jul 2020 19:28:28 +0200
Subject: [PATCH 03/25] chore: Add jsdom-sixteen and bump up
 @testing-library/react

---
 package.json |   5 +-
 yarn.lock    | 399 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 303 insertions(+), 101 deletions(-)

diff --git a/package.json b/package.json
index 41f2677..d2dd0e3 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "dependencies": {
         "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.3.2",
+        "@testing-library/react": "^10.4.4",
         "@testing-library/user-event": "^7.1.2",
         "jest-canvas-mock": "^2.2.0",
         "plotly.js-gl3d-dist-min": "^1.54.2",
@@ -21,7 +21,7 @@
         "analyze": "source-map-explorer 'build/static/js/*.js'",
         "start": "react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
+        "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
         "eject": "react-scripts eject"
     },
     "eslintConfig": {
@@ -40,6 +40,7 @@
         ]
     },
     "devDependencies": {
+        "jest-environment-jsdom-sixteen": "^1.0.3",
         "prettier": "2.0.5"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index 8877214..dbf0b8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1054,7 +1054,15 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-transform-typescript" "^7.9.0"
 
-"@babel/runtime-corejs3@^7.7.4", "@babel/runtime-corejs3@^7.8.3":
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.4.tgz#f29fc1990307c4c57b10dbd6ce667b27159d9e0d"
+  integrity sha512-BFlgP2SoLO9HJX9WBwN67gHWMBhDX/eDz64Jajd6mR/UAUzqrNMm99d4qHnVaKscAElZoFiPv+JpR/Siud5lXw==
+  dependencies:
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime-corejs3@^7.8.3":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz#3511797ddf9a3d6f3ce46b99cc835184817eaa4e"
   integrity sha512-+a2M/u7r15o3dV1NEizr9bRi+KUVnrs/qYxF0Z06DAPx/4VCWaz1WA7EcbE+uqGgt39lp5akWGmHsTseIkHkHg==
@@ -1069,13 +1077,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
   integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99"
+  integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@@ -1221,6 +1236,17 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
+"@jest/fake-timers@^25.1.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.5.0.tgz#46352e00533c024c90c2bc2ad9f2959f7f114185"
+  integrity sha512-9y2+uGnESw/oyOI3eww9yaxdZyHq7XvprfP/eeoCsjqKYts2yRlsHS/SgjPDV8FyMfn2nbMy8YzUk6nyvdLOpQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    jest-message-util "^25.5.0"
+    jest-mock "^25.5.0"
+    jest-util "^25.5.0"
+    lolex "^5.0.0"
+
 "@jest/reporters@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
@@ -1330,10 +1356,12 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@sheerun/mutationobserver-shim@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
-  integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==
+"@sinonjs/commons@^1.7.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
+  integrity sha512-wEj54PfsZ5jGSwMX68G8ZXFawcSglQSXqCftWX3ec8MDUzQdHgcKvw97awHbY0efQEL5iKUOAmmVtoYgmrSG4Q==
+  dependencies:
+    type-detect "4.0.8"
 
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
@@ -1438,18 +1466,16 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
-"@testing-library/dom@^6.15.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.16.0.tgz#04ada27ed74ad4c0f0d984a1245bb29b1fd90ba9"
-  integrity sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==
+"@testing-library/dom@^7.17.1":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.20.0.tgz#2bab85e90f0221a56256c5d4741c2a36b7c45f4d"
+  integrity sha512-TywaC+qDGm/Ro34kRYkFQPdT+pxSF4UjZGLIqcGfFQH5IGR43Y7sGLPnkieIW/GNsu337oxNsLUAgpI0JWhXHw==
   dependencies:
-    "@babel/runtime" "^7.8.4"
-    "@sheerun/mutationobserver-shim" "^0.3.2"
-    "@types/testing-library__dom" "^6.12.1"
-    aria-query "^4.0.2"
-    dom-accessibility-api "^0.3.0"
-    pretty-format "^25.1.0"
-    wait-for-expect "^3.0.2"
+    "@babel/runtime" "^7.10.3"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    dom-accessibility-api "^0.4.5"
+    pretty-format "^25.5.0"
 
 "@testing-library/jest-dom@^4.2.4":
   version "4.2.4"
@@ -1466,20 +1492,25 @@
     pretty-format "^24.0.0"
     redent "^3.0.0"
 
-"@testing-library/react@^9.3.2":
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.5.0.tgz#71531655a7890b61e77a1b39452fbedf0472ca5e"
-  integrity sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==
+"@testing-library/react@^10.4.4":
+  version "10.4.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.4.4.tgz#f05edf827df288c6c7b19fe96fff2b33cddbb809"
+  integrity sha512-SKDQ2jBdg9UQQYQragkvXOzNp4hnCdOvXyZ52rg+OXiiumVxkAutdvvRzBF4PrbvMQ27Z6gx0GVo2YQ1Mcip8g==
   dependencies:
-    "@babel/runtime" "^7.8.4"
-    "@testing-library/dom" "^6.15.0"
-    "@types/testing-library__react" "^9.1.2"
+    "@babel/runtime" "^7.10.3"
+    "@testing-library/dom" "^7.17.1"
+    semver "^7.3.2"
 
 "@testing-library/user-event@^7.1.2":
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
   integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==
 
+"@types/aria-query@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
+  integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
+
 "@types/babel__core@^7.1.0":
   version "7.1.8"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.8.tgz#057f725aca3641f49fc11c7a87a9de5ec588a5d7"
@@ -1571,59 +1602,16 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*":
-  version "15.7.3"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
-  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
-
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@*":
-  version "16.9.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
-  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*":
-  version "16.9.36"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.36.tgz#ade589ff51e2a903e34ee4669e05dbfa0c1ce849"
-  integrity sha512-mGgUb/Rk/vGx4NCvquRuSH0GHBQKb1OqpGS9cT9lFxlTLHZgkksgI60TuIxubmn7JuCb+sENHhQciqa0npm0AQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/testing-library__dom@*":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.2.tgz#2906f8a0dce58b0746c6ab606f786bd06fe6940e"
-  integrity sha512-8yu1gSwUEAwzg2OlPNbGq+ixhmSviGurBu1+ivxRKq1eRcwdjkmlwtPvr9VhuxTq2fNHBWN2po6Iem3Xt5A6rg==
-  dependencies:
-    pretty-format "^25.1.0"
-
-"@types/testing-library__dom@^6.12.1":
-  version "6.14.0"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz#1aede831cb4ed4a398448df5a2c54b54a365644e"
-  integrity sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==
-  dependencies:
-    pretty-format "^24.3.0"
-
-"@types/testing-library__react@^9.1.2":
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.3.tgz#35eca61cc6ea923543796f16034882a1603d7302"
-  integrity sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==
-  dependencies:
-    "@types/react-dom" "*"
-    "@types/testing-library__dom" "*"
-    pretty-format "^25.1.0"
-
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -1842,7 +1830,7 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-abab@^2.0.0:
+abab@^2.0.0, abab@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
@@ -1863,6 +1851,14 @@ acorn-globals@^4.1.0, acorn-globals@^4.3.0:
     acorn "^6.0.1"
     acorn-walk "^6.0.1"
 
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
 acorn-jsx@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
@@ -1873,6 +1869,11 @@ acorn-walk@^6.0.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
 acorn@^5.5.3:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
@@ -2035,13 +2036,13 @@ aria-query@^3.0.0:
     ast-types-flow "0.0.7"
     commander "^2.11.0"
 
-aria-query@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145"
-  integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w==
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
   dependencies:
-    "@babel/runtime" "^7.7.4"
-    "@babel/runtime-corejs3" "^7.7.4"
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
 
 arity-n@^1.0.4:
   version "1.0.4"
@@ -2512,7 +2513,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@~3.0.2:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -3533,11 +3534,16 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4:
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4, cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
 cssstyle@^1.0.0, cssstyle@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
@@ -3545,10 +3551,12 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
-  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+cssstyle@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
 
 cyclist@^1.0.1:
   version "1.0.1"
@@ -3584,6 +3592,15 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3610,6 +3627,11 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decimal.js@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231"
+  integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -3787,10 +3809,10 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz#511e5993dd673b97c87ea47dba0e3892f7e0c983"
-  integrity sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==
+dom-accessibility-api@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.5.tgz#d9c1cefa89f509d8cf132ab5d250004d755e76e3"
+  integrity sha512-HcPDilI95nKztbVikaN2vzwvmv0sE8Y2ZJFODy/m15n7mGXLeOKGiys9qWVbFbh+aq/KYj2lqMLybBOkYAEXqg==
 
 dom-converter@^0.2:
   version "0.2.0"
@@ -3829,6 +3851,13 @@ domexception@^1.0.1:
   dependencies:
     webidl-conversions "^4.0.2"
 
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
 domhandler@^2.3.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
@@ -4074,6 +4103,18 @@ escodegen@^1.11.0, escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+escodegen@^1.14.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-config-react-app@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
@@ -4949,7 +4990,7 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -5142,6 +5183,13 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
 html-entities@^1.2.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
@@ -5713,6 +5761,11 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-potential-custom-element-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
+  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+
 is-regex@^1.0.4, is-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
@@ -5967,6 +6020,16 @@ jest-environment-jsdom-fourteen@1.0.1:
     jest-util "^24.0.0"
     jsdom "^14.1.0"
 
+jest-environment-jsdom-sixteen@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-sixteen/-/jest-environment-jsdom-sixteen-1.0.3.tgz#e222228fac537ef15cca5ad470b19b47d9690165"
+  integrity sha512-CwMqDUUfSl808uGPWXlNA1UFkWFgRmhHvyAjhCmCry6mYq4b/nn80MMN7tglqo5XgrANIs/w+mzINPzbZ4ZZrQ==
+  dependencies:
+    "@jest/fake-timers" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    jsdom "^16.2.1"
+
 jest-environment-jsdom@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
@@ -6068,6 +6131,20 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
+  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^25.5.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
 jest-mock@^24.0.0, jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
@@ -6075,6 +6152,13 @@ jest-mock@^24.0.0, jest-mock@^24.9.0:
   dependencies:
     "@jest/types" "^24.9.0"
 
+jest-mock@^25.1.0, jest-mock@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.5.0.tgz#a91a54dabd14e37ecd61665d6b6e06360a55387a"
+  integrity sha512-eXWuTV8mKzp/ovHc5+3USJMYsTBhyQ+5A1Mak35dey/RG8GlM4YWVylZuGgVXinaW6tpvk/RSecmF37FKUlpXA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
@@ -6201,6 +6285,17 @@ jest-util@^24.0.0, jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
+jest-util@^25.1.0, jest-util@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
+  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    chalk "^3.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    make-dir "^3.0.0"
+
 jest-validate@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
@@ -6350,6 +6445,38 @@ jsdom@^14.1.0:
     ws "^6.1.2"
     xml-name-validator "^3.0.0"
 
+jsdom@^16.2.1:
+  version "16.2.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.2.2.tgz#76f2f7541646beb46a938f5dc476b88705bedf2b"
+  integrity sha512-pDFQbcYtKBHxRaP55zGXCJWgFHkDAYbKcsXEK/3Icu9nKYZkutUXfLBwbD+09XDutkYSHcgfQLZ0qvpAAm9mvg==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.0.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+    ws "^7.2.3"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -6656,6 +6783,13 @@ loglevel@^1.6.6:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
   integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
 
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -6685,7 +6819,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -6825,6 +6959,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -7198,7 +7340,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-nwsapi@^2.0.7, nwsapi@^2.1.3:
+nwsapi@^2.0.7, nwsapi@^2.1.3, nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
@@ -7577,6 +7719,11 @@ parse5@5.1.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
   integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
 
+parse5@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -7694,7 +7841,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -8495,7 +8642,7 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
+pretty-format@^24.0.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -8505,7 +8652,7 @@ pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
-pretty-format@^25.1.0:
+pretty-format@^25.5.0:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
   integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
@@ -9105,7 +9252,7 @@ request-promise-core@1.1.3:
   dependencies:
     lodash "^4.17.15"
 
-request-promise-native@^1.0.5:
+request-promise-native@^1.0.5, request-promise-native@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
   integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
@@ -9114,7 +9261,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.87.0, request@^2.88.0:
+request@^2.87.0, request@^2.88.0, request@^2.88.2:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -9374,6 +9521,13 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
+saxes@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -10126,7 +10280,7 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-tree@^3.2.2:
+symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
@@ -10319,6 +10473,15 @@ tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5
     psl "^1.1.28"
     punycode "^2.1.1"
 
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+  dependencies:
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -10326,6 +10489,13 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
 ts-pnp@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
@@ -10372,6 +10542,11 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
@@ -10626,7 +10801,7 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-w3c-hr-time@^1.0.1:
+w3c-hr-time@^1.0.1, w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
   integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
@@ -10642,10 +10817,12 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
-  integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
 
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
@@ -10684,6 +10861,16 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
 webpack-dev-middleware@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
@@ -10838,6 +11025,15 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+whatwg-url@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.1.0.tgz#c628acdcf45b82274ce7281ee31dd3c839791771"
+  integrity sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^5.0.0"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -11072,12 +11268,17 @@ ws@^6.1.2, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
+ws@^7.2.3:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
+  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xmlchars@^2.1.1:
+xmlchars@^2.1.1, xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==

From 971eb20d15d662c225736a3f6fc8c173add84c99 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 6 Jul 2020 19:29:24 +0200
Subject: [PATCH 04/25] test: Use waitFor to deal with Suspenseful modules

---
 src/tests/components/App.test.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/tests/components/App.test.js b/src/tests/components/App.test.js
index d0f4410..1952cb3 100644
--- a/src/tests/components/App.test.js
+++ b/src/tests/components/App.test.js
@@ -1,7 +1,7 @@
 import React from "react"
-import { render, screen, fireEvent, act } from "@testing-library/react"
+import { render, screen, fireEvent, act, waitFor } from "@testing-library/react"
 import App from "../../App"
-import { PATH_LINKS, URL_LINKS } from "../../components/vars"
+import { PATH_LINKS, URL_LINKS, LANDING_PAGE_TITLE } from "../../components/vars"
 
 /* * * *
  Navigation Footer
@@ -152,11 +152,9 @@ Application
  * * * */
 describe("AppFragment", () => {
     test("Renders App snapshot correctly", async () => {
-        let container
-        await act(async () => {
-            container = await render(<App />)
-        })
-        expect(container.asFragment()).toMatchSnapshot()
+        const { asFragment } = render(<App />)
+        await waitFor(() => screen.findByText(LANDING_PAGE_TITLE))
+        expect(asFragment()).toMatchSnapshot()
     })
 })
 

From fd2f65b22af069a021f85d46ad2aa023d800fa33 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 6 Jul 2020 19:29:57 +0200
Subject: [PATCH 05/25] test: Update test, the plot no longer renders hidden on
 landing page

---
 src/tests/components/__snapshots__/App.test.js.snap | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/tests/components/__snapshots__/App.test.js.snap b/src/tests/components/__snapshots__/App.test.js.snap
index 6903ed6..26139c3 100644
--- a/src/tests/components/__snapshots__/App.test.js.snap
+++ b/src/tests/components/__snapshots__/App.test.js.snap
@@ -364,13 +364,6 @@ exports[`AppFragment Renders App snapshot correctly 1`] = `
         </nav>
       </footer>
     </div>
-    <div
-      class="no-display"
-    >
-      <div
-        style="height: 100%; width: 100%;"
-      />
-    </div>
   </div>
 </DocumentFragment>
 `;

From 66fd770f0bdec4e32334f1b5325610c3d1069071 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Mon, 6 Jul 2020 19:31:08 +0200
Subject: [PATCH 06/25] feat: Start to load Plotly before first DOM commit

---
 src/components/HexapodPlot.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index 8b5af24..425fd30 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -1,16 +1,17 @@
-import React from "react"
+import React, { useLayoutEffect, useState } from "react"
 import createPlotlyComponent from "react-plotly.js/factory"
 
 const PlotlyPromise = import(
     /* webpackChunkName: "Plotly-gl-3d", webpackPreload: true */ "plotly.js-gl3d-dist-min"
 ).then(Plotly => Plotly.default)
 
-const HexapodPlot = props => {
+const HexapodPlot = ({ data, layout, onRelayout, revision }) => {
     const ref = React.useRef()
-    const [ready, setReady] = React.useState(false)
+    const [ready, setReady] = useState(false)
 
-    React.useEffect(() => {
+    useLayoutEffect(() => {
         let cancel
+
         PlotlyPromise.then(Plotly => {
             ref.current = createPlotlyComponent(Plotly)
         }).then(() => {
@@ -36,13 +37,13 @@ const HexapodPlot = props => {
 
     return (
         <Plot
-            data={props.data}
-            layout={props.layout}
+            data={data}
+            layout={layout}
             useResizeHandler={true}
             style={{ height: "100%", width: "100%" }}
             config={{ displaylogo: false, responsive: true }}
-            onRelayout={props.onRelayout}
-            revision={props.revision}
+            onRelayout={onRelayout}
+            revision={revision}
         />
     )
 }

From d178edbc7eb1ca047c98c9cdeb2aaaa27d3eb94c Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 10:38:15 +0200
Subject: [PATCH 07/25] chore: Configure jest collectCoverageFrom

---
 package.json | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/package.json b/package.json
index d2dd0e3..602afa4 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "start": "react-scripts start",
         "build": "react-scripts build",
         "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+        "test:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --collectCoverage --watchAll=false",
         "eject": "react-scripts eject"
     },
     "eslintConfig": {
@@ -42,5 +43,13 @@
     "devDependencies": {
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "prettier": "2.0.5"
+    },
+    "jest": {
+        "collectCoverageFrom": [
+            "src/{components,hexapod}/*.{js,jsx,ts,tsx}",
+            "src/loadables.js",
+            "src/App.js",
+            "src/routes.js"
+        ]
     }
 }

From fd9e0e952affa89aad371c86aa04bb0fe604d96b Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 10:45:12 +0200
Subject: [PATCH 08/25] feat: Implement a sleep util w/ test

---
 src/tests/utils.test.js | 11 +++++++++++
 src/utils.js            |  2 ++
 2 files changed, 13 insertions(+)
 create mode 100644 src/tests/utils.test.js
 create mode 100644 src/utils.js

diff --git a/src/tests/utils.test.js b/src/tests/utils.test.js
new file mode 100644
index 0000000..ac40be7
--- /dev/null
+++ b/src/tests/utils.test.js
@@ -0,0 +1,11 @@
+import { sleep } from "../utils"
+
+test("sleep a promise chain passing through data", () => {
+    const data = { msg: "I am msg", done: false }
+
+    return Promise.resolve(data)
+        .then(sleep(500))
+        .then(resp => {
+            expect(resp).toBe(data)
+        })
+})
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..ae01907
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,2 @@
+export const sleep = time => data =>
+    new Promise(accept => setTimeout(() => accept(data), time))

From f53cc02384cb22c61b5bc99ff70961b56cb20569 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 10:45:25 +0200
Subject: [PATCH 09/25] test: Pass testId to mocked Plotly div

---
 src/__mocks__/react-plotly.js/factory.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/__mocks__/react-plotly.js/factory.js b/src/__mocks__/react-plotly.js/factory.js
index 905f2f4..670b074 100644
--- a/src/__mocks__/react-plotly.js/factory.js
+++ b/src/__mocks__/react-plotly.js/factory.js
@@ -1,5 +1,7 @@
 import React from "react"
 
-const createPlotlyComponent = () => ({ style }) => <div style={style}></div>
+const createPlotlyComponent = () => ({ style, testId }) => (
+    <div style={style} data-testid={testId}></div>
+)
 
 export default createPlotlyComponent

From 9af715421284190412f407ade7351a2da7d615ff Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 10:46:59 +0200
Subject: [PATCH 10/25] feat: Lazy load Plotly with retry option

---
 src/components/HexapodPlot.js            | 71 ++++++++++++++++--------
 src/tests/components/HexapodPlot.test.js | 47 ++++++++++++++++
 2 files changed, 96 insertions(+), 22 deletions(-)
 create mode 100644 src/tests/components/HexapodPlot.test.js

diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index 425fd30..701a0a3 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -1,33 +1,55 @@
-import React, { useLayoutEffect, useState } from "react"
+import React, { useCallback, useLayoutEffect, useState, useRef } from "react"
 import createPlotlyComponent from "react-plotly.js/factory"
 
-const PlotlyPromise = import(
-    /* webpackChunkName: "Plotly-gl-3d", webpackPreload: true */ "plotly.js-gl3d-dist-min"
-).then(Plotly => Plotly.default)
+import { sleep } from "../utils"
 
-const HexapodPlot = ({ data, layout, onRelayout, revision }) => {
-    const ref = React.useRef()
+const PlotlyPromise = () =>
+    import(
+        /* webpackChunkName: "Plotly-gl-3d", webpackPreload: true */ "plotly.js-gl3d-dist-min"
+    ).then(Plotly => Plotly.default)
+
+export const HexapodPlot = ({ data, layout, onRelayout, revision, promise }) => {
+    const ref = useRef()
+    const loadingRef = useRef()
+    const promiseRef = useRef(promise)
     const [ready, setReady] = useState(false)
+    const [error, setError] = useState(false)
 
-    useLayoutEffect(() => {
-        let cancel
-
-        PlotlyPromise.then(Plotly => {
-            ref.current = createPlotlyComponent(Plotly)
-        }).then(() => {
-            if (!cancel) {
-                setReady(true)
-            }
-        })
-
-        return () => {
-            cancel = true
-        }
+    const loader = useCallback(() => {
+        setError(false)
+
+        promiseRef
+            .current()
+            .then(Plotly => {
+                ref.current = createPlotlyComponent(Plotly)
+            })
+            .then(sleep(250))
+            .then(() => {
+                if (loadingRef.current) {
+                    setReady(true)
+                }
+            })
+            .catch(() => setError(true))
     }, [])
 
-    if (!ready) {
+    useLayoutEffect(() => {
+        loader()
+    }, [loader])
+
+    if (error) {
         return (
             <div>
+                <h2>Error Loading Plotly</h2>
+                <button className="button" onClick={loader}>
+                    Retry
+                </button>
+            </div>
+        )
+    }
+
+    if (!ready) {
+        return (
+            <div ref={loadingRef}>
                 <h2>Loading...</h2>
             </div>
         )
@@ -44,8 +66,13 @@ const HexapodPlot = ({ data, layout, onRelayout, revision }) => {
             config={{ displaylogo: false, responsive: true }}
             onRelayout={onRelayout}
             revision={revision}
+            testId="plot"
         />
     )
 }
 
-export default HexapodPlot
+const HexapodPlotWithPlotlyPromise = props => (
+    <HexapodPlot {...props} promise={PlotlyPromise} />
+)
+
+export default HexapodPlotWithPlotlyPromise
diff --git a/src/tests/components/HexapodPlot.test.js b/src/tests/components/HexapodPlot.test.js
new file mode 100644
index 0000000..93b5a7a
--- /dev/null
+++ b/src/tests/components/HexapodPlot.test.js
@@ -0,0 +1,47 @@
+import React from "react"
+import { render, screen, waitFor, fireEvent, act } from "@testing-library/react"
+import { HexapodPlot } from "../../components/HexapodPlot"
+
+let PlotlyPromiseFactory = instruction => () => {
+    return new Promise((resolve, reject) => {
+        if (instruction.shouldFail) {
+            return reject()
+        }
+        return resolve()
+    })
+}
+
+test("HexapodPlot, retry when loading Plotly fails, ", async () => {
+    let instruction = {
+        shouldFail: true,
+    }
+
+    let promise = PlotlyPromiseFactory(instruction)
+
+    render(
+        <HexapodPlot
+            data={[]}
+            layout={[]}
+            revision={1}
+            onRelayout={() => {}}
+            promise={promise}
+        />
+    )
+
+    let retryBtn = await waitFor(() => screen.getByText(/Retry/i))
+    expect(retryBtn).toBeInTheDocument()
+
+    instruction.shouldFail = false
+
+    act(() => {
+        fireEvent.click(retryBtn)
+    })
+
+    let loadingMsg = await waitFor(() => screen.getByText(/Loading/i))
+
+    expect(loadingMsg).toBeInTheDocument()
+
+    let plot = await waitFor(() => screen.getByTestId("plot"))
+
+    expect(plot).toBeInTheDocument()
+})

From 2f5ccd487e879d09122e5a0226ddf27b16db9ce3 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 11:11:05 +0200
Subject: [PATCH 11/25] refactor: Shrink App's render method

---
 src/App.js                      | 37 +++++++++++++--------------------
 src/components/pages/NoMatch.js |  9 ++++++++
 2 files changed, 24 insertions(+), 22 deletions(-)
 create mode 100644 src/components/pages/NoMatch.js

diff --git a/src/App.js b/src/App.js
index 18d3170..dd3e15a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,8 @@ import ReactGA from "react-ga"
 import { VirtualHexapod, getNewPlotParams } from "./hexapod"
 import * as defaults from "./templates"
 import { SECTION_NAMES, PATH_LINKS } from "./components/vars"
-import { Nav, NavDetailed } from "./components"
+import { Nav } from "./components"
+import NoMatch from "./components/pages/NoMatch"
 
 import Routes from "./routes"
 
@@ -115,34 +116,26 @@ class App extends React.Component {
      * * * * * * * * * * * * * */
 
     render() {
+        const { plot, ...rest } = this.state
+        const routeProps = {
+            ...rest,
+            ...plot,
+            revision: plot.revisionCounter,
+            onRelayout: this.logCameraView,
+            updatePose: this.updatePose,
+            updateIkParams: this.updateIkParams,
+            updatePatternPose: this.updatePatternPose,
+            updateDimensions: this.updateDimensions,
+        }
         return (
             <Router>
                 <Nav />
                 <Switch>
                     <Route path={PATH_LINKS.map(({ path }) => path)} exact>
-                        <Routes
-                            onPageLoad={this.onPageLoad}
-                            showPoseMessage={this.state.showPoseMessage}
-                            showInfo={this.state.showInfo}
-                            info={this.state.info}
-                            data={this.state.plot.data}
-                            layout={this.state.plot.layout}
-                            onRelayout={this.logCameraView}
-                            revision={this.state.plot.revisionCounter}
-                            hexapodParams={this.state.hexapodParams}
-                            patternParams={this.state.patternParams}
-                            ikParams={this.state.ikParams}
-                            updatePose={this.updatePose}
-                            updateIkParams={this.updateIkParams}
-                            updatePatternPose={this.updatePatternPose}
-                            updateDimensions={this.updateDimensions}
-                        />
+                        <Routes {...routeProps} onPageLoad={this.onPageLoad} />
                     </Route>
                     <Route>
-                        <div className="no-match">
-                            <h1>404</h1>
-                            <NavDetailed />
-                        </div>
+                        <NoMatch />
                     </Route>
                 </Switch>
             </Router>
diff --git a/src/components/pages/NoMatch.js b/src/components/pages/NoMatch.js
new file mode 100644
index 0000000..b20595d
--- /dev/null
+++ b/src/components/pages/NoMatch.js
@@ -0,0 +1,9 @@
+import React from "react"
+import { NavDetailed } from "../Nav"
+
+export default () => (
+    <div className="no-match">
+        <h1>404</h1>
+        <NavDetailed />
+    </div>
+)

From f0c087ebd55d0bf2b36c9f186bc2cf113c34b421 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 11:15:59 +0200
Subject: [PATCH 12/25] test: fix coverage collect globbing pattern

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 602afa4..57446db 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     },
     "jest": {
         "collectCoverageFrom": [
-            "src/{components,hexapod}/*.{js,jsx,ts,tsx}",
+            "src/{components,hexapod}/**/*.{js,jsx,ts,tsx}",
             "src/loadables.js",
             "src/App.js",
             "src/routes.js"

From 429a4a9e52d7930c0f2f1075f94165d921fe61c7 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 15:16:17 +0200
Subject: [PATCH 13/25] feat: render HexapodPlot ASAP, but hide it if not
 needed

---
 src/components/HexapodPlot.js                 |  10 +-
 src/loadables.js                              |   2 +-
 src/routes.js                                 | 100 +++++++++---------
 .../components/__snapshots__/App.test.js.snap |   8 ++
 4 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index 701a0a3..4cfd68b 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -38,21 +38,17 @@ export const HexapodPlot = ({ data, layout, onRelayout, revision, promise }) =>
 
     if (error) {
         return (
-            <div>
+            <>
                 <h2>Error Loading Plotly</h2>
                 <button className="button" onClick={loader}>
                     Retry
                 </button>
-            </div>
+            </>
         )
     }
 
     if (!ready) {
-        return (
-            <div ref={loadingRef}>
-                <h2>Loading...</h2>
-            </div>
-        )
+        return <h2 ref={loadingRef}>Loading...</h2>
     }
 
     const Plot = ref.current
diff --git a/src/loadables.js b/src/loadables.js
index e58badd..a90b8bd 100644
--- a/src/loadables.js
+++ b/src/loadables.js
@@ -30,7 +30,7 @@ const LazyHexapodPlot = lazy(() =>
     )
 )
 
-const Fallback = () => <h2>Loading...</h2>
+const Fallback = () => null
 
 export function SuspenseLandingPage(props) {
     return (
diff --git a/src/routes.js b/src/routes.js
index be8438e..f825fca 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { Route, Switch } from "react-router-dom"
+import { Route, Switch, useRouteMatch } from "react-router-dom"
 import { HEXAPOD_LINK_PATHS, PATHS } from "./components/vars"
 
 import { PoseTable, NavDetailed, DimensionsWidget, AlertBox } from "./components"
@@ -28,52 +28,56 @@ export const Routes = ({
     updatePatternPose,
     updateDimensions,
     onRelayout,
-}) => (
-    <>
-        <div className="main content">
-            <div className="sidebar column-container cell">
-                <Route path={HEXAPOD_LINK_PATHS} exact>
-                    <DimensionsWidget
-                        params={{
-                            dimensions: hexapodParams.dimensions,
-                        }}
-                        onUpdate={updateDimensions}
-                    />
-                </Route>
-                <Switch>
-                    <Route path="/" exact>
-                        <SuspenseLandingPage onMount={onPageLoad} />
-                    </Route>
-                    <Route path={PATHS.forwardKinematics.path}>
-                        <SuspenseForwardKinematicsPage
-                            params={{ pose: hexapodParams.pose }}
-                            onUpdate={updatePose}
-                            onMount={onPageLoad}
-                        />
-                    </Route>
-                    <Route path={PATHS.inverseKinematics.path}>
-                        <SuspenseInverseKinematicsPage
+}) => {
+    const { path } = useRouteMatch()
+    return (
+        <>
+            <div className="main content">
+                <div className="sidebar column-container cell">
+                    <Route path={HEXAPOD_LINK_PATHS} exact>
+                        <DimensionsWidget
                             params={{
                                 dimensions: hexapodParams.dimensions,
-                                ikParams: ikParams,
                             }}
-                            onUpdate={updateIkParams}
-                            onMount={onPageLoad}
-                        />
-                    </Route>
-                    <Route path={PATHS.legPatterns.path}>
-                        <SuspenseLegPatternPage
-                            params={{ patternParams: patternParams }}
-                            onUpdate={updatePatternPose}
-                            onMount={onPageLoad}
+                            onUpdate={updateDimensions}
                         />
                     </Route>
-                </Switch>
-                <PoseTable pose={hexapodParams.pose} showPoseTable={showPoseMessage} />
-                <AlertBox showInfo={showInfo} info={info} />
-            </div>
-            <Route path={HEXAPOD_LINK_PATHS} exact>
-                <div className="plot border">
+                    <Switch>
+                        <Route path="/" exact>
+                            <SuspenseLandingPage onMount={onPageLoad} />
+                        </Route>
+                        <Route path={PATHS.forwardKinematics.path}>
+                            <SuspenseForwardKinematicsPage
+                                params={{ pose: hexapodParams.pose }}
+                                onUpdate={updatePose}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                        <Route path={PATHS.inverseKinematics.path}>
+                            <SuspenseInverseKinematicsPage
+                                params={{
+                                    dimensions: hexapodParams.dimensions,
+                                    ikParams: ikParams,
+                                }}
+                                onUpdate={updateIkParams}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                        <Route path={PATHS.legPatterns.path}>
+                            <SuspenseLegPatternPage
+                                params={{ patternParams: patternParams }}
+                                onUpdate={updatePatternPose}
+                                onMount={onPageLoad}
+                            />
+                        </Route>
+                    </Switch>
+                    <PoseTable
+                        pose={hexapodParams.pose}
+                        showPoseTable={showPoseMessage}
+                    />
+                    <AlertBox showInfo={showInfo} info={info} />
+                </div>
+                <div hidden={path === "/"} className="plot border">
                     <SuspenseHexapodPlot
                         data={data}
                         layout={layout}
@@ -81,12 +85,12 @@ export const Routes = ({
                         revision={revision}
                     />
                 </div>
+            </div>
+            <Route path={HEXAPOD_LINK_PATHS} exact>
+                <NavDetailed />
             </Route>
-        </div>
-        <Route path={HEXAPOD_LINK_PATHS} exact>
-            <NavDetailed />
-        </Route>
-    </>
-)
+        </>
+    )
+}
 
 export default Routes
diff --git a/src/tests/components/__snapshots__/App.test.js.snap b/src/tests/components/__snapshots__/App.test.js.snap
index 26139c3..8d270ae 100644
--- a/src/tests/components/__snapshots__/App.test.js.snap
+++ b/src/tests/components/__snapshots__/App.test.js.snap
@@ -364,6 +364,14 @@ exports[`AppFragment Renders App snapshot correctly 1`] = `
         </nav>
       </footer>
     </div>
+    <div
+      class="plot border"
+      hidden=""
+    >
+      <h2>
+        Loading...
+      </h2>
+    </div>
   </div>
 </DocumentFragment>
 `;

From ffc108a46d9838328202ec8f249021fb6374b464 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Tue, 7 Jul 2020 17:38:34 +0200
Subject: [PATCH 14/25] fix: Update ikParams and PatternPose function names

---
 src/App.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index dd3e15a..75b3455 100644
--- a/src/App.js
+++ b/src/App.js
@@ -123,8 +123,8 @@ class App extends React.Component {
             revision: plot.revisionCounter,
             onRelayout: this.logCameraView,
             updatePose: this.updatePose,
-            updateIkParams: this.updateIkParams,
-            updatePatternPose: this.updatePatternPose,
+            updateIkParams: this.updateIk,
+            updatePatternPose: this.updatePose,
             updateDimensions: this.updateDimensions,
         }
         return (

From da2d6f5ce6d04eb166380c5747bf953d2866d05c Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 09:36:40 +0200
Subject: [PATCH 15/25] feat: Redirect back to Root on 404

---
 src/App.js                      | 5 ++---
 src/components/pages/NoMatch.js | 9 ---------
 2 files changed, 2 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/pages/NoMatch.js

diff --git a/src/App.js b/src/App.js
index 75b3455..1a8e11b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,10 @@
 import React from "react"
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
+import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
 import ReactGA from "react-ga"
 import { VirtualHexapod, getNewPlotParams } from "./hexapod"
 import * as defaults from "./templates"
 import { SECTION_NAMES, PATH_LINKS } from "./components/vars"
 import { Nav } from "./components"
-import NoMatch from "./components/pages/NoMatch"
 
 import Routes from "./routes"
 
@@ -135,7 +134,7 @@ class App extends React.Component {
                         <Routes {...routeProps} onPageLoad={this.onPageLoad} />
                     </Route>
                     <Route>
-                        <NoMatch />
+                        <Redirect to="/" />
                     </Route>
                 </Switch>
             </Router>
diff --git a/src/components/pages/NoMatch.js b/src/components/pages/NoMatch.js
deleted file mode 100644
index b20595d..0000000
--- a/src/components/pages/NoMatch.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react"
-import { NavDetailed } from "../Nav"
-
-export default () => (
-    <div className="no-match">
-        <h1>404</h1>
-        <NavDetailed />
-    </div>
-)

From 5ad2a601ed919defba1b42ca4f8ab456f774c6fd Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 09:37:38 +0200
Subject: [PATCH 16/25] feat: Less aggressive preloading

---
 src/components/HexapodPlot.js | 4 +---
 src/loadables.js              | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/HexapodPlot.js b/src/components/HexapodPlot.js
index 4cfd68b..0368d56 100644
--- a/src/components/HexapodPlot.js
+++ b/src/components/HexapodPlot.js
@@ -4,9 +4,7 @@ import createPlotlyComponent from "react-plotly.js/factory"
 import { sleep } from "../utils"
 
 const PlotlyPromise = () =>
-    import(
-        /* webpackChunkName: "Plotly-gl-3d", webpackPreload: true */ "plotly.js-gl3d-dist-min"
-    ).then(Plotly => Plotly.default)
+    import("plotly.js-gl3d-dist-min").then(Plotly => Plotly.default)
 
 export const HexapodPlot = ({ data, layout, onRelayout, revision, promise }) => {
     const ref = useRef()
diff --git a/src/loadables.js b/src/loadables.js
index a90b8bd..fc86d03 100644
--- a/src/loadables.js
+++ b/src/loadables.js
@@ -26,7 +26,7 @@ const LazyLegPatternPage = lazy(() =>
 
 const LazyHexapodPlot = lazy(() =>
     import(
-        /* webpackChunkName: "Hexapod", webpackPreload: true */ "./components/HexapodPlot"
+        /* webpackChunkName: "Hexapod", webpackPrefetch: true */ "./components/HexapodPlot"
     )
 )
 

From 1f40226f2be170f689f75743fcb6a65694b5f76f Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 09:47:31 +0200
Subject: [PATCH 17/25] refactor: Remove duplicated function names

---
 src/App.js    | 3 +--
 src/routes.js | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1a8e11b..e56d07d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -122,8 +122,7 @@ class App extends React.Component {
             revision: plot.revisionCounter,
             onRelayout: this.logCameraView,
             updatePose: this.updatePose,
-            updateIkParams: this.updateIk,
-            updatePatternPose: this.updatePose,
+            updateIk: this.updateIk,
             updateDimensions: this.updateDimensions,
         }
         return (
diff --git a/src/routes.js b/src/routes.js
index 44b2784..ba3de78 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -24,9 +24,8 @@ export const Routes = ({
     hexapodParams,
     patternParams,
     ikParams,
+    updateIk,
     updatePose,
-    updateIkParams,
-    updatePatternPose,
     updateDimensions,
     onRelayout,
 }) => {
@@ -60,14 +59,14 @@ export const Routes = ({
                                     dimensions: hexapodParams.dimensions,
                                     ikParams: ikParams,
                                 }}
-                                onUpdate={updateIkParams}
+                                onUpdate={updateIk}
                                 onMount={onPageLoad}
                             />
                         </Route>
                         <Route path={PATHS.legPatterns.path}>
                             <SuspenseLegPatternPage
                                 params={{ patternParams: patternParams }}
-                                onUpdate={updatePatternPose}
+                                onUpdate={updatePose}
                                 onMount={onPageLoad}
                             />
                         </Route>

From c077bf24f4837ec60656f81e09c2b081d693c6c3 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 10:50:32 +0200
Subject: [PATCH 18/25] refactor: Various fixes, and code quality improvements

---
 src/App.js                                    | 37 ++++++++++---------
 src/components/Nav.js                         |  2 +-
 src/components/pages/ForwardKinematicsPage.js | 11 +++++-
 src/components/pages/InverseKinematicsPage.js | 11 +++++-
 src/components/pages/LandingPage.js           |  9 +++--
 src/components/pages/LegPatternPage.js        | 11 +++++-
 src/components/pages/WalkingGaitsPage.js      | 12 +++++-
 src/components/providers/Handlers.js          | 37 +++++++++++++++++++
 src/components/vars.js                        |  1 +
 src/routes.js                                 | 23 ++++++------
 src/tests/components/App.test.js              | 27 +++++++-------
 11 files changed, 130 insertions(+), 51 deletions(-)
 create mode 100644 src/components/providers/Handlers.js

diff --git a/src/App.js b/src/App.js
index e56d07d..af1e50f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,6 @@ ReactGA.initialize("UA-170794768-1", {
 
 class App extends React.Component {
     state = {
-        currentPage: SECTION_NAMES.LandingPage,
         showPoseMessage: false,
         showInfo: false,
         info: {},
@@ -40,25 +39,29 @@ class App extends React.Component {
 
     onPageLoad = pageName => {
         ReactGA.pageview(window.location.pathname + window.location.search)
-        this.setState({ currentPage: pageName })
 
         if (pageName === SECTION_NAMES.landingPage) {
-            this.setState({
-                currentPage: pageName,
+            return this.setState({
                 showInfo: false,
                 showPoseMessage: false,
             })
-            return
         }
 
-        this.setState({
-            currentPage: pageName,
-            showInfo: false,
-            showPoseMessage: false,
-            hexapodParams: { ...this.state.hexapodParams, pose: defaults.DEFAULT_POSE },
-        })
-
-        this.updatePlot(this.state.hexapodParams.dimensions, defaults.DEFAULT_POSE)
+        return this.setState(
+            {
+                showInfo: false,
+                showPoseMessage: false,
+                hexapodParams: {
+                    ...this.state.hexapodParams,
+                    pose: defaults.DEFAULT_POSE,
+                },
+            },
+            () =>
+                this.updatePlot(
+                    this.state.hexapodParams.dimensions,
+                    defaults.DEFAULT_POSE
+                )
+        )
     }
 
     /* * * * * * * * * * * * * *
@@ -67,7 +70,7 @@ class App extends React.Component {
 
     updatePlot = (dimensions, pose) => {
         const newHexapodModel = new VirtualHexapod(dimensions, pose)
-        this.updatePlotWithHexapod(newHexapodModel)
+        return this.updatePlotWithHexapod(newHexapodModel)
     }
 
     updatePlotWithHexapod = hexapod => {
@@ -76,7 +79,7 @@ class App extends React.Component {
         }
 
         const [data, layout] = getNewPlotParams(hexapod, this.state.plot.latestCameraView)
-        this.setState({
+        return this.setState({
             plot: {
                 ...this.state.plot,
                 data,
@@ -93,7 +96,7 @@ class App extends React.Component {
     logCameraView = relayoutData => {
         const newCameraView = relayoutData["scene.camera"]
         const plot = { ...this.state.plot, latestCameraView: newCameraView }
-        this.setState({ ...this.state, plot: plot })
+        return this.setState({ ...this.state, plot: plot })
     }
 
     /* * * * * * * * * * * * * *
@@ -102,7 +105,7 @@ class App extends React.Component {
 
     updateIk = (hexapod, updatedStateParams) => {
         this.updatePlotWithHexapod(hexapod)
-        this.setState({ ...updatedStateParams })
+        return this.setState({ ...updatedStateParams })
     }
 
     updateDimensions = dimensions =>
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 76584c0..3ce8230 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -72,6 +72,6 @@ const NavDetailed = React.memo(() => (
     </footer>
 ))
 
-const Nav = React.memo(() => <NavBullets />)
+const Nav = NavBullets
 
 export { Nav, NavDetailed }
diff --git a/src/components/pages/ForwardKinematicsPage.js b/src/components/pages/ForwardKinematicsPage.js
index 299f089..8db813b 100644
--- a/src/components/pages/ForwardKinematicsPage.js
+++ b/src/components/pages/ForwardKinematicsPage.js
@@ -3,6 +3,7 @@ import LegPoseWidget from "./LegPoseWidgets"
 import { Card, ToggleSwitch, BasicButton, NumberInputField, Slider } from "../generic"
 import { DEFAULT_POSE } from "../../templates"
 import { SECTION_NAMES, LEG_NAMES, RESET_LABEL } from "../vars"
+import { usePageLoad, useUpdatePose } from "../providers/Handlers"
 
 const renderTwoColumns = cells => (
     <>
@@ -97,4 +98,12 @@ class ForwardKinematicsPage extends Component {
     }
 }
 
-export default ForwardKinematicsPage
+const WithHandlers = props => {
+    const onMount = usePageLoad()
+    const onUpdate = useUpdatePose()
+    return <ForwardKinematicsPage {...props} onMount={onMount} onUpdate={onUpdate} />
+}
+
+WithHandlers.displayName = "WithHandlers(ForwardKinematicsPage)"
+
+export default WithHandlers
diff --git a/src/components/pages/InverseKinematicsPage.js b/src/components/pages/InverseKinematicsPage.js
index dba8ac7..93aa4de 100644
--- a/src/components/pages/InverseKinematicsPage.js
+++ b/src/components/pages/InverseKinematicsPage.js
@@ -3,6 +3,7 @@ import { sliderList, Card, BasicButton } from "../generic"
 import { solveInverseKinematics } from "../../hexapod"
 import { SECTION_NAMES, IK_SLIDERS_LABELS, RESET_LABEL } from "../vars"
 import { DEFAULT_IK_PARAMS } from "../../templates"
+import { usePageLoad, useUpdateIk } from "../providers/Handlers"
 
 const _updatedStateParamsUnsolved = message => ({
     showPoseMessage: false,
@@ -72,4 +73,12 @@ class InverseKinematicsPage extends Component {
     }
 }
 
-export default InverseKinematicsPage
+const WithHandlers = props => {
+    const onMount = usePageLoad()
+    const onUpdate = useUpdateIk()
+    return <InverseKinematicsPage {...props} onMount={onMount} onUpdate={onUpdate} />
+}
+
+WithHandlers.displayName = "WithHandlers(InverseKinematicsPage)"
+
+export default WithHandlers
diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
index cfe80a8..72c5f2f 100644
--- a/src/components/pages/LandingPage.js
+++ b/src/components/pages/LandingPage.js
@@ -1,11 +1,14 @@
 import React, { useLayoutEffect } from "react"
 import { NavDetailed } from ".."
 import { LANDING_PAGE_TITLE, LANDING_PAGE_SUBTITLE, SECTION_NAMES } from "../vars"
+import { usePageLoad } from "../providers/Handlers"
+
+function LandingPage() {
+    const onPageLoad = usePageLoad()
 
-function LandingPage({ onMount }) {
     useLayoutEffect(() => {
-        onMount(SECTION_NAMES.landingPage)
-    }, [onMount])
+        onPageLoad(SECTION_NAMES.landingPage)
+    }, [onPageLoad])
 
     return (
         <>
diff --git a/src/components/pages/LegPatternPage.js b/src/components/pages/LegPatternPage.js
index 64b8a54..534d06e 100644
--- a/src/components/pages/LegPatternPage.js
+++ b/src/components/pages/LegPatternPage.js
@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import { sliderList, Card, BasicButton } from "../generic"
 import { DEFAULT_POSE, DEFAULT_PATTERN_PARAMS } from "../../templates"
 import { SECTION_NAMES, ANGLE_NAMES, RESET_LABEL } from "../vars"
+import { usePageLoad, useUpdatePose } from "../providers/Handlers"
 
 class LegPatternPage extends Component {
     pageName = SECTION_NAMES.legPatterns
@@ -45,4 +46,12 @@ class LegPatternPage extends Component {
     )
 }
 
-export default LegPatternPage
+const WithHandlers = props => {
+    const onMount = usePageLoad()
+    const onUpdate = useUpdatePose()
+    return <LegPatternPage {...props} onMount={onMount} onUpdate={onUpdate} />
+}
+
+WithHandlers.displayName = "WithHandlers(LegPatternPage)"
+
+export default WithHandlers
diff --git a/src/components/pages/WalkingGaitsPage.js b/src/components/pages/WalkingGaitsPage.js
index 3db7e7d..2efcbd0 100644
--- a/src/components/pages/WalkingGaitsPage.js
+++ b/src/components/pages/WalkingGaitsPage.js
@@ -3,6 +3,8 @@ import { sliderList, Card, BasicButton, ToggleSwitch } from "../generic"
 import { SECTION_NAMES, RESET_LABEL } from "../vars"
 import getWalkSequence from "../../hexapod/solvers/walkSequenceSolver"
 
+import { usePageLoad, useUpdatePose } from "../providers/Handlers"
+
 const SLIDER_LABELS = [
     "tz",
     "tx",
@@ -179,4 +181,12 @@ class WalkingGaitsPage extends Component {
     }
 }
 
-export default WalkingGaitsPage
+const WithHandlers = props => {
+    const onMount = usePageLoad()
+    const onUpdate = useUpdatePose()
+    return <WalkingGaitsPage {...props} onMount={onMount} onUpdate={onUpdate} />
+}
+
+WithHandlers.displayName = "WithHandlers(WalkingGaitsPage)"
+
+export default WithHandlers
diff --git a/src/components/providers/Handlers.js b/src/components/providers/Handlers.js
new file mode 100644
index 0000000..a8b8af5
--- /dev/null
+++ b/src/components/providers/Handlers.js
@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useMemo } from "react"
+
+const HandlersCtx = createContext()
+
+export function HandlersProvider({
+    onPageLoad,
+    updateIk,
+    updatePose,
+    updateDimensions,
+    children,
+}) {
+    const value = useMemo(
+        () => ({
+            onPageLoad,
+            updateIk,
+            updatePose,
+            updateDimensions,
+        }),
+        [onPageLoad, updateIk, updatePose, updateDimensions]
+    )
+    return <HandlersCtx.Provider value={value}>{children}</HandlersCtx.Provider>
+}
+
+export const usePageLoad = () => {
+    const { onPageLoad } = useContext(HandlersCtx)
+    return useMemo(() => onPageLoad, [onPageLoad])
+}
+
+export const useUpdatePose = () => {
+    const { updatePose } = useContext(HandlersCtx)
+    return useMemo(() => updatePose, [updatePose])
+}
+
+export const useUpdateIk = () => {
+    const { updateIk } = useContext(HandlersCtx)
+    return useMemo(() => updateIk, [updateIk])
+}
diff --git a/src/components/vars.js b/src/components/vars.js
index ac23806..eec6146 100644
--- a/src/components/vars.js
+++ b/src/components/vars.js
@@ -130,6 +130,7 @@ const HEXAPOD_LINK_PATHS = [
     PATHS.inverseKinematics.path,
     PATHS.forwardKinematics.path,
     PATHS.legPatterns.path,
+    PATHS.walkingGaits.path,
 ]
 
 const URL_LINKS = [KOFI_LINK_PROPERTIES, REPO_LINK_PROPERTIES]
diff --git a/src/routes.js b/src/routes.js
index ba3de78..6029f13 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -13,8 +13,9 @@ import {
     SuspenseHexapodPlot,
 } from "./loadables"
 
+import { HandlersProvider } from "./components/providers/Handlers"
+
 export const Routes = ({
-    onPageLoad,
     showPoseMessage,
     showInfo,
     info,
@@ -24,6 +25,7 @@ export const Routes = ({
     hexapodParams,
     patternParams,
     ikParams,
+    onPageLoad,
     updateIk,
     updatePose,
     updateDimensions,
@@ -31,7 +33,12 @@ export const Routes = ({
 }) => {
     const { path } = useRouteMatch()
     return (
-        <>
+        <HandlersProvider
+            onPageLoad={onPageLoad}
+            updateIk={updateIk}
+            updatePose={updatePose}
+            updateDimensions={updateDimensions}
+        >
             <div className="main content">
                 <div className="sidebar column-container cell">
                     <Route path={HEXAPOD_LINK_PATHS} exact>
@@ -44,13 +51,11 @@ export const Routes = ({
                     </Route>
                     <Switch>
                         <Route path="/" exact>
-                            <SuspenseLandingPage onMount={onPageLoad} />
+                            <SuspenseLandingPage />
                         </Route>
                         <Route path={PATHS.forwardKinematics.path}>
                             <SuspenseForwardKinematicsPage
                                 params={{ pose: hexapodParams.pose }}
-                                onUpdate={updatePose}
-                                onMount={onPageLoad}
                             />
                         </Route>
                         <Route path={PATHS.inverseKinematics.path}>
@@ -59,15 +64,11 @@ export const Routes = ({
                                     dimensions: hexapodParams.dimensions,
                                     ikParams: ikParams,
                                 }}
-                                onUpdate={updateIk}
-                                onMount={onPageLoad}
                             />
                         </Route>
                         <Route path={PATHS.legPatterns.path}>
                             <SuspenseLegPatternPage
                                 params={{ patternParams: patternParams }}
-                                onUpdate={updatePose}
-                                onMount={onPageLoad}
                             />
                         </Route>
                         <Route path={PATHS.walkingGaits.path}>
@@ -75,8 +76,6 @@ export const Routes = ({
                                 params={{
                                     dimensions: hexapodParams.dimensions,
                                 }}
-                                onUpdate={updatePose}
-                                onMount={onPageLoad}
                             />
                         </Route>
                     </Switch>
@@ -98,7 +97,7 @@ export const Routes = ({
             <Route path={HEXAPOD_LINK_PATHS} exact>
                 <NavDetailed />
             </Route>
-        </>
+        </HandlersProvider>
     )
 }
 
diff --git a/src/tests/components/App.test.js b/src/tests/components/App.test.js
index 905ad24..c1acac8 100644
--- a/src/tests/components/App.test.js
+++ b/src/tests/components/App.test.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen, fireEvent, act } from "@testing-library/react"
+import { render, screen, fireEvent, act, waitFor } from "@testing-library/react"
 import App from "../../App"
 import { PATH_LINKS, URL_LINKS } from "../../components/vars"
 
@@ -145,7 +145,12 @@ const expectEachPage = (
     expectToHaveNav()
 }
 
-const click = name => fireEvent.click(screen.getByRole("link", { name }))
+const click = async name => {
+    const element = await waitFor(() => screen.getByRole("link", { name }))
+    await act(async () => {
+        await fireEvent.click(element)
+    })
+}
 
 /* * * *
 Application
@@ -159,33 +164,27 @@ describe("App", () => {
     })
 
     test("Navigates to Leg Patterns page", async () => {
-        await act(async () => {
-            click("Leg Patterns")
-        })
+        await click("Leg Patterns")
         expectEachPage()
         expectToHaveDefaultLegPatternsPage()
     })
 
     test("Navigates to Inverse Kinematics page", async () => {
-        await act(async () => {
-            click("Inverse Kinematics")
-        })
+        await click("Inverse Kinematics")
+
         expectEachPage()
         expectToHaveDefaultInverseKinematics()
     })
 
     test("Navigates to Forward Kinematics page", async () => {
-        await act(async () => {
-            click("Forward Kinematics")
-        })
+        await click("Forward Kinematics")
+
         expectEachPage({ numberOfResetButtons: 2, numberOfToggleSwitches: 2 })
         expectToHaveDefaultForwardKinematics()
     })
 
     test("Navigates to Landing Page", async () => {
-        await act(async () => {
-            click("Root")
-        })
+        await click("Root")
 
         const heading = screen.getByRole("heading", {
             name: "Mithi's Bare Minimum Hexapod Robot Simulator",

From f9b9bb6e565210258bc265fa7f8b5da513a0d53d Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 11:14:50 +0200
Subject: [PATCH 19/25] refactor: Build a hooks -> render props -> HoC pattern
 to increase code quality

---
 src/components/pages/ForwardKinematicsPage.js | 16 ++++------------
 src/components/pages/InverseKinematicsPage.js | 18 +++++-------------
 src/components/pages/LegPatternPage.js        | 16 ++++------------
 src/components/pages/WalkingGaitsPage.js      | 17 ++++-------------
 src/components/providers/Handlers.js          | 19 +++++++++++++------
 5 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/src/components/pages/ForwardKinematicsPage.js b/src/components/pages/ForwardKinematicsPage.js
index 8db813b..2c73b35 100644
--- a/src/components/pages/ForwardKinematicsPage.js
+++ b/src/components/pages/ForwardKinematicsPage.js
@@ -3,7 +3,7 @@ import LegPoseWidget from "./LegPoseWidgets"
 import { Card, ToggleSwitch, BasicButton, NumberInputField, Slider } from "../generic"
 import { DEFAULT_POSE } from "../../templates"
 import { SECTION_NAMES, LEG_NAMES, RESET_LABEL } from "../vars"
-import { usePageLoad, useUpdatePose } from "../providers/Handlers"
+import { withHandlers } from "../providers/Handlers"
 
 const renderTwoColumns = cells => (
     <>
@@ -37,7 +37,7 @@ class ForwardKinematicsPage extends Component {
     }
 
     reset = () => {
-        this.props.onUpdate(DEFAULT_POSE)
+        this.props.onUpdatePose(DEFAULT_POSE)
     }
 
     updatePose = (name, angle, value) => {
@@ -46,7 +46,7 @@ class ForwardKinematicsPage extends Component {
             ...pose,
             [name]: { ...pose[name], [angle]: value },
         }
-        this.props.onUpdate(newPose)
+        this.props.onUpdatePose(newPose)
     }
 
     toggleMode = () => {
@@ -98,12 +98,4 @@ class ForwardKinematicsPage extends Component {
     }
 }
 
-const WithHandlers = props => {
-    const onMount = usePageLoad()
-    const onUpdate = useUpdatePose()
-    return <ForwardKinematicsPage {...props} onMount={onMount} onUpdate={onUpdate} />
-}
-
-WithHandlers.displayName = "WithHandlers(ForwardKinematicsPage)"
-
-export default WithHandlers
+export default withHandlers(ForwardKinematicsPage)
diff --git a/src/components/pages/InverseKinematicsPage.js b/src/components/pages/InverseKinematicsPage.js
index 93aa4de..5c68f53 100644
--- a/src/components/pages/InverseKinematicsPage.js
+++ b/src/components/pages/InverseKinematicsPage.js
@@ -3,7 +3,7 @@ import { sliderList, Card, BasicButton } from "../generic"
 import { solveInverseKinematics } from "../../hexapod"
 import { SECTION_NAMES, IK_SLIDERS_LABELS, RESET_LABEL } from "../vars"
 import { DEFAULT_IK_PARAMS } from "../../templates"
-import { usePageLoad, useUpdateIk } from "../providers/Handlers"
+import { withHandlers } from "../providers/Handlers"
 
 const _updatedStateParamsUnsolved = message => ({
     showPoseMessage: false,
@@ -33,12 +33,12 @@ class InverseKinematicsPage extends Component {
 
         if (!result.obtainedSolution) {
             const stateParams = _updatedStateParamsUnsolved(result.message)
-            this.props.onUpdate(null, stateParams)
+            this.props.onUpdateIk(null, stateParams)
             return
         }
 
         const stateParams = _updatedStateParamsSolved(result.message)
-        this.props.onUpdate(result.hexapod, stateParams)
+        this.props.onUpdateIk(result.hexapod, stateParams)
     }
 
     reset = () => {
@@ -48,7 +48,7 @@ class InverseKinematicsPage extends Component {
             DEFAULT_IK_PARAMS
         )
         const stateParams = _updatedStateParamsSolved(result.message)
-        this.props.onUpdate(result.hexapod, stateParams)
+        this.props.onUpdateIk(result.hexapod, stateParams)
     }
 
     get sliders() {
@@ -73,12 +73,4 @@ class InverseKinematicsPage extends Component {
     }
 }
 
-const WithHandlers = props => {
-    const onMount = usePageLoad()
-    const onUpdate = useUpdateIk()
-    return <InverseKinematicsPage {...props} onMount={onMount} onUpdate={onUpdate} />
-}
-
-WithHandlers.displayName = "WithHandlers(InverseKinematicsPage)"
-
-export default WithHandlers
+export default withHandlers(InverseKinematicsPage)
diff --git a/src/components/pages/LegPatternPage.js b/src/components/pages/LegPatternPage.js
index 534d06e..9c5cbbe 100644
--- a/src/components/pages/LegPatternPage.js
+++ b/src/components/pages/LegPatternPage.js
@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { sliderList, Card, BasicButton } from "../generic"
 import { DEFAULT_POSE, DEFAULT_PATTERN_PARAMS } from "../../templates"
 import { SECTION_NAMES, ANGLE_NAMES, RESET_LABEL } from "../vars"
-import { usePageLoad, useUpdatePose } from "../providers/Handlers"
+import { withHandlers } from "../providers/Handlers"
 
 class LegPatternPage extends Component {
     pageName = SECTION_NAMES.legPatterns
@@ -21,12 +21,12 @@ class LegPatternPage extends Component {
             newPose[leg] = patternParams
         }
 
-        this.props.onUpdate(newPose)
+        this.props.onUpdatePose(newPose)
         this.setState({ patternParams })
     }
 
     reset = () => {
-        this.props.onUpdate(DEFAULT_POSE)
+        this.props.onUpdatePose(DEFAULT_POSE)
         this.setState({ patternParams: DEFAULT_PATTERN_PARAMS })
     }
 
@@ -46,12 +46,4 @@ class LegPatternPage extends Component {
     )
 }
 
-const WithHandlers = props => {
-    const onMount = usePageLoad()
-    const onUpdate = useUpdatePose()
-    return <LegPatternPage {...props} onMount={onMount} onUpdate={onUpdate} />
-}
-
-WithHandlers.displayName = "WithHandlers(LegPatternPage)"
-
-export default WithHandlers
+export default withHandlers(LegPatternPage)
diff --git a/src/components/pages/WalkingGaitsPage.js b/src/components/pages/WalkingGaitsPage.js
index 2efcbd0..4453f9f 100644
--- a/src/components/pages/WalkingGaitsPage.js
+++ b/src/components/pages/WalkingGaitsPage.js
@@ -2,8 +2,7 @@ import React, { Component } from "react"
 import { sliderList, Card, BasicButton, ToggleSwitch } from "../generic"
 import { SECTION_NAMES, RESET_LABEL } from "../vars"
 import getWalkSequence from "../../hexapod/solvers/walkSequenceSolver"
-
-import { usePageLoad, useUpdatePose } from "../providers/Handlers"
+import { withHandlers } from "../providers/Handlers"
 
 const SLIDER_LABELS = [
     "tz",
@@ -90,7 +89,7 @@ class WalkingGaitsPage extends Component {
             : this.state.totalStepCount - animationCount
 
         const pose = getPose(this.state.walkSequence, step)
-        this.props.onUpdate(pose)
+        this.props.onUpdatePose(pose)
         this.setState({ animationCount })
     }
 
@@ -102,7 +101,7 @@ class WalkingGaitsPage extends Component {
         const totalStepCount = 4 * gaitParams.stepCount
 
         const pose = getPose(walkSequence, this.state.animationCount)
-        this.props.onUpdate(pose)
+        this.props.onUpdatePose(pose)
         this.setState({ gaitParams, walkSequence, totalStepCount })
     }
 
@@ -181,12 +180,4 @@ class WalkingGaitsPage extends Component {
     }
 }
 
-const WithHandlers = props => {
-    const onMount = usePageLoad()
-    const onUpdate = useUpdatePose()
-    return <WalkingGaitsPage {...props} onMount={onMount} onUpdate={onUpdate} />
-}
-
-WithHandlers.displayName = "WithHandlers(WalkingGaitsPage)"
-
-export default WithHandlers
+export default withHandlers(WalkingGaitsPage)
diff --git a/src/components/providers/Handlers.js b/src/components/providers/Handlers.js
index a8b8af5..14f85b7 100644
--- a/src/components/providers/Handlers.js
+++ b/src/components/providers/Handlers.js
@@ -26,12 +26,19 @@ export const usePageLoad = () => {
     return useMemo(() => onPageLoad, [onPageLoad])
 }
 
-export const useUpdatePose = () => {
-    const { updatePose } = useContext(HandlersCtx)
-    return useMemo(() => updatePose, [updatePose])
+export const RenderWithHandlers = ({ children, ...rest }) => {
+    const {
+        onPageLoad: onMount,
+        updatePose: onUpdatePose,
+        updateIk: onUpdateIk,
+    } = useContext(HandlersCtx)
+    return children({ ...rest, onMount, onUpdatePose, onUpdateIk })
 }
 
-export const useUpdateIk = () => {
-    const { updateIk } = useContext(HandlersCtx)
-    return useMemo(() => updateIk, [updateIk])
+export const withHandlers = Component => props => {
+    return (
+        <RenderWithHandlers {...props}>
+            {enhanced => <Component {...enhanced} />}
+        </RenderWithHandlers>
+    )
 }

From 7d9f154bcb268442ce36a21a480684d35aed02a3 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 11:40:06 +0200
Subject: [PATCH 20/25] refactor: Hoist handlers Provider to App

---
 src/App.js                                    | 24 +++++----
 src/components/DimensionsWidget.js            |  7 +--
 src/components/pages/InverseKinematicsPage.js |  5 +-
 src/components/providers/Handlers.js          |  3 +-
 src/routes.js                                 | 54 +++++--------------
 5 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/src/App.js b/src/App.js
index af1e50f..5a1bb79 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import { SECTION_NAMES, PATH_LINKS } from "./components/vars"
 import { Nav } from "./components"
 
 import Routes from "./routes"
+import { HandlersProvider } from "./components/providers/Handlers"
 
 ReactGA.initialize("UA-170794768-1", {
     //debug: true,
@@ -119,21 +120,24 @@ class App extends React.Component {
 
     render() {
         const { plot, ...rest } = this.state
-        const routeProps = {
-            ...rest,
-            ...plot,
-            revision: plot.revisionCounter,
-            onRelayout: this.logCameraView,
-            updatePose: this.updatePose,
-            updateIk: this.updateIk,
-            updateDimensions: this.updateDimensions,
-        }
         return (
             <Router>
                 <Nav />
                 <Switch>
                     <Route path={PATH_LINKS.map(({ path }) => path)} exact>
-                        <Routes {...routeProps} onPageLoad={this.onPageLoad} />
+                        <HandlersProvider
+                            onPageLoad={this.onPageLoad}
+                            updateIk={this.updateIk}
+                            updatePose={this.updatePose}
+                            updateDimensions={this.updateDimensions}
+                        >
+                            <Routes
+                                {...plot}
+                                {...rest}
+                                revision={plot.revisionCounter}
+                                onRelayout={this.logCameraView}
+                            />
+                        </HandlersProvider>
                     </Route>
                     <Route>
                         <Redirect to="/" />
diff --git a/src/components/DimensionsWidget.js b/src/components/DimensionsWidget.js
index 96aa71b..e675853 100644
--- a/src/components/DimensionsWidget.js
+++ b/src/components/DimensionsWidget.js
@@ -3,6 +3,7 @@ import NumberInputField from "./generic/NumberInputField"
 import { Card, BasicButton, ToggleSwitch } from "./generic/SmallWidgets"
 import { DEFAULT_DIMENSIONS } from "../templates"
 import { SECTION_NAMES, DIMENSION_NAMES, RESET_LABEL, RANGE_PARAMS } from "./vars"
+import { withHandlers } from "./providers/Handlers"
 
 class DimensionsWidget extends Component {
     sectionName = SECTION_NAMES.dimensions
@@ -14,7 +15,7 @@ class DimensionsWidget extends Component {
 
     reset = () => {
         const dimensions = DEFAULT_DIMENSIONS
-        this.props.onUpdate(dimensions)
+        this.props.onUpdateDimensions(dimensions)
     }
 
     toggleMode = () => {
@@ -28,7 +29,7 @@ class DimensionsWidget extends Component {
 
     updateDimensions = (name, value) => {
         const dimensions = { ...this.props.params.dimensions, [name]: value }
-        this.props.onUpdate(dimensions)
+        this.props.onUpdateDimensions(dimensions)
     }
 
     updateFieldState = (name, value) => {
@@ -76,4 +77,4 @@ class DimensionsWidget extends Component {
     )
 }
 
-export default DimensionsWidget
+export default withHandlers(DimensionsWidget)
diff --git a/src/components/pages/InverseKinematicsPage.js b/src/components/pages/InverseKinematicsPage.js
index 5c68f53..ba97578 100644
--- a/src/components/pages/InverseKinematicsPage.js
+++ b/src/components/pages/InverseKinematicsPage.js
@@ -33,12 +33,11 @@ class InverseKinematicsPage extends Component {
 
         if (!result.obtainedSolution) {
             const stateParams = _updatedStateParamsUnsolved(result.message)
-            this.props.onUpdateIk(null, stateParams)
-            return
+            return this.props.onUpdateIk(null, stateParams)
         }
 
         const stateParams = _updatedStateParamsSolved(result.message)
-        this.props.onUpdateIk(result.hexapod, stateParams)
+        return this.props.onUpdateIk(result.hexapod, stateParams)
     }
 
     reset = () => {
diff --git a/src/components/providers/Handlers.js b/src/components/providers/Handlers.js
index 14f85b7..9cacc7a 100644
--- a/src/components/providers/Handlers.js
+++ b/src/components/providers/Handlers.js
@@ -31,8 +31,9 @@ export const RenderWithHandlers = ({ children, ...rest }) => {
         onPageLoad: onMount,
         updatePose: onUpdatePose,
         updateIk: onUpdateIk,
+        updateDimensions: onUpdateDimensions,
     } = useContext(HandlersCtx)
-    return children({ ...rest, onMount, onUpdatePose, onUpdateIk })
+    return children({ ...rest, onMount, onUpdatePose, onUpdateIk, onUpdateDimensions })
 }
 
 export const withHandlers = Component => props => {
diff --git a/src/routes.js b/src/routes.js
index 6029f13..990fbf2 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -13,8 +13,6 @@ import {
     SuspenseHexapodPlot,
 } from "./loadables"
 
-import { HandlersProvider } from "./components/providers/Handlers"
-
 export const Routes = ({
     showPoseMessage,
     showInfo,
@@ -24,65 +22,39 @@ export const Routes = ({
     revision,
     hexapodParams,
     patternParams,
-    ikParams,
-    onPageLoad,
-    updateIk,
-    updatePose,
-    updateDimensions,
     onRelayout,
 }) => {
     const { path } = useRouteMatch()
+    const { dimensions, pose } = hexapodParams
     return (
-        <HandlersProvider
-            onPageLoad={onPageLoad}
-            updateIk={updateIk}
-            updatePose={updatePose}
-            updateDimensions={updateDimensions}
-        >
+        <>
             <div className="main content">
                 <div className="sidebar column-container cell">
                     <Route path={HEXAPOD_LINK_PATHS} exact>
-                        <DimensionsWidget
-                            params={{
-                                dimensions: hexapodParams.dimensions,
-                            }}
-                            onUpdate={updateDimensions}
-                        />
+                        <DimensionsWidget params={{ dimensions }} />
                     </Route>
                     <Switch>
                         <Route path="/" exact>
                             <SuspenseLandingPage />
                         </Route>
+
                         <Route path={PATHS.forwardKinematics.path}>
-                            <SuspenseForwardKinematicsPage
-                                params={{ pose: hexapodParams.pose }}
-                            />
+                            <SuspenseForwardKinematicsPage params={{ pose }} />
                         </Route>
+
                         <Route path={PATHS.inverseKinematics.path}>
-                            <SuspenseInverseKinematicsPage
-                                params={{
-                                    dimensions: hexapodParams.dimensions,
-                                    ikParams: ikParams,
-                                }}
-                            />
+                            <SuspenseInverseKinematicsPage params={{ dimensions }} />
                         </Route>
+
                         <Route path={PATHS.legPatterns.path}>
-                            <SuspenseLegPatternPage
-                                params={{ patternParams: patternParams }}
-                            />
+                            <SuspenseLegPatternPage params={{ patternParams }} />
                         </Route>
+
                         <Route path={PATHS.walkingGaits.path}>
-                            <SuspenseWalkingGaitsPage
-                                params={{
-                                    dimensions: hexapodParams.dimensions,
-                                }}
-                            />
+                            <SuspenseWalkingGaitsPage params={{ dimensions }} />
                         </Route>
                     </Switch>
-                    <PoseTable
-                        pose={hexapodParams.pose}
-                        showPoseTable={showPoseMessage}
-                    />
+                    <PoseTable pose={pose} showPoseTable={showPoseMessage} />
                     <AlertBox showInfo={showInfo} info={info} />
                 </div>
                 <div hidden={path === "/"} className="plot border">
@@ -97,7 +69,7 @@ export const Routes = ({
             <Route path={HEXAPOD_LINK_PATHS} exact>
                 <NavDetailed />
             </Route>
-        </HandlersProvider>
+        </>
     )
 }
 

From 3dea50151d7ce804d6ba8adc28aca0d12f41b6b3 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 11:44:53 +0200
Subject: [PATCH 21/25] refactor: LegPattern Page does not need params props
 anymore

---
 src/routes.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes.js b/src/routes.js
index 990fbf2..20a4f9f 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -21,7 +21,6 @@ export const Routes = ({
     layout,
     revision,
     hexapodParams,
-    patternParams,
     onRelayout,
 }) => {
     const { path } = useRouteMatch()
@@ -47,7 +46,7 @@ export const Routes = ({
                         </Route>
 
                         <Route path={PATHS.legPatterns.path}>
-                            <SuspenseLegPatternPage params={{ patternParams }} />
+                            <SuspenseLegPatternPage />
                         </Route>
 
                         <Route path={PATHS.walkingGaits.path}>

From a4c652a18a73899316a75327a82b2896a56afc58 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 12:38:46 +0200
Subject: [PATCH 22/25] refactor: Breakout HexapodParams into a Provider
 pattern

---
 src/App.js                                    | 26 +++++++++---------
 src/components/DimensionsWidget.js            |  7 +++--
 src/components/PoseTable.js                   |  3 ++-
 src/components/pages/ForwardKinematicsPage.js |  5 +++-
 src/components/pages/InverseKinematicsPage.js |  6 ++++-
 src/components/pages/WalkingGaitsPage.js      |  5 +++-
 src/components/providers/HexapodParams.js     | 27 +++++++++++++++++++
 src/routes.js                                 | 19 ++++++-------
 src/tests/components/DimensionWidget.test.js  |  2 +-
 9 files changed, 68 insertions(+), 32 deletions(-)
 create mode 100644 src/components/providers/HexapodParams.js

diff --git a/src/App.js b/src/App.js
index 5a1bb79..56397fe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import { Nav } from "./components"
 
 import Routes from "./routes"
 import { HandlersProvider } from "./components/providers/Handlers"
+import { HexapodParamsProvider } from "./components/providers/HexapodParams"
 
 ReactGA.initialize("UA-170794768-1", {
     //debug: true,
@@ -119,25 +120,22 @@ class App extends React.Component {
      * * * * * * * * * * * * * */
 
     render() {
-        const { plot, ...rest } = this.state
+        const { hexapodParams, ...rest } = this.state
         return (
             <Router>
                 <Nav />
                 <Switch>
                     <Route path={PATH_LINKS.map(({ path }) => path)} exact>
-                        <HandlersProvider
-                            onPageLoad={this.onPageLoad}
-                            updateIk={this.updateIk}
-                            updatePose={this.updatePose}
-                            updateDimensions={this.updateDimensions}
-                        >
-                            <Routes
-                                {...plot}
-                                {...rest}
-                                revision={plot.revisionCounter}
-                                onRelayout={this.logCameraView}
-                            />
-                        </HandlersProvider>
+                        <HexapodParamsProvider {...hexapodParams}>
+                            <HandlersProvider
+                                onPageLoad={this.onPageLoad}
+                                updateIk={this.updateIk}
+                                updatePose={this.updatePose}
+                                updateDimensions={this.updateDimensions}
+                            >
+                                <Routes {...rest} onRelayout={this.logCameraView} />
+                            </HandlersProvider>
+                        </HexapodParamsProvider>
                     </Route>
                     <Route>
                         <Redirect to="/" />
diff --git a/src/components/DimensionsWidget.js b/src/components/DimensionsWidget.js
index e675853..c9d9780 100644
--- a/src/components/DimensionsWidget.js
+++ b/src/components/DimensionsWidget.js
@@ -4,8 +4,9 @@ import { Card, BasicButton, ToggleSwitch } from "./generic/SmallWidgets"
 import { DEFAULT_DIMENSIONS } from "../templates"
 import { SECTION_NAMES, DIMENSION_NAMES, RESET_LABEL, RANGE_PARAMS } from "./vars"
 import { withHandlers } from "./providers/Handlers"
+import { withHexapodParams } from "./providers/HexapodParams"
 
-class DimensionsWidget extends Component {
+export class DimensionsWidget extends Component {
     sectionName = SECTION_NAMES.dimensions
     state = { isFine: true, granularity: 1 }
 
@@ -77,4 +78,6 @@ class DimensionsWidget extends Component {
     )
 }
 
-export default withHandlers(DimensionsWidget)
+export default withHexapodParams(withHandlers(DimensionsWidget), ({ dimensions }) => ({
+    params: { dimensions },
+}))
diff --git a/src/components/PoseTable.js b/src/components/PoseTable.js
index 519e19e..eac20fa 100644
--- a/src/components/PoseTable.js
+++ b/src/components/PoseTable.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { withHexapodParams } from "./providers/HexapodParams"
 
 const TableHeader = React.memo(({ labels }) => (
     <thead>
@@ -41,4 +42,4 @@ const PoseTable = ({ pose, showPoseTable }) => {
     )
 }
 
-export default PoseTable
+export default withHexapodParams(PoseTable, ({ pose }) => ({ pose }))
diff --git a/src/components/pages/ForwardKinematicsPage.js b/src/components/pages/ForwardKinematicsPage.js
index 2c73b35..cc41644 100644
--- a/src/components/pages/ForwardKinematicsPage.js
+++ b/src/components/pages/ForwardKinematicsPage.js
@@ -4,6 +4,7 @@ import { Card, ToggleSwitch, BasicButton, NumberInputField, Slider } from "../ge
 import { DEFAULT_POSE } from "../../templates"
 import { SECTION_NAMES, LEG_NAMES, RESET_LABEL } from "../vars"
 import { withHandlers } from "../providers/Handlers"
+import { withHexapodParams } from "../providers/HexapodParams"
 
 const renderTwoColumns = cells => (
     <>
@@ -98,4 +99,6 @@ class ForwardKinematicsPage extends Component {
     }
 }
 
-export default withHandlers(ForwardKinematicsPage)
+export default withHexapodParams(withHandlers(ForwardKinematicsPage), ({ pose }) => ({
+    params: { pose },
+}))
diff --git a/src/components/pages/InverseKinematicsPage.js b/src/components/pages/InverseKinematicsPage.js
index ba97578..40edb07 100644
--- a/src/components/pages/InverseKinematicsPage.js
+++ b/src/components/pages/InverseKinematicsPage.js
@@ -4,6 +4,7 @@ import { solveInverseKinematics } from "../../hexapod"
 import { SECTION_NAMES, IK_SLIDERS_LABELS, RESET_LABEL } from "../vars"
 import { DEFAULT_IK_PARAMS } from "../../templates"
 import { withHandlers } from "../providers/Handlers"
+import { withHexapodParams } from "../providers/HexapodParams"
 
 const _updatedStateParamsUnsolved = message => ({
     showPoseMessage: false,
@@ -72,4 +73,7 @@ class InverseKinematicsPage extends Component {
     }
 }
 
-export default withHandlers(InverseKinematicsPage)
+export default withHexapodParams(
+    withHandlers(InverseKinematicsPage),
+    ({ dimensions }) => ({ params: { dimensions } })
+)
diff --git a/src/components/pages/WalkingGaitsPage.js b/src/components/pages/WalkingGaitsPage.js
index 4453f9f..0a3cf64 100644
--- a/src/components/pages/WalkingGaitsPage.js
+++ b/src/components/pages/WalkingGaitsPage.js
@@ -3,6 +3,7 @@ import { sliderList, Card, BasicButton, ToggleSwitch } from "../generic"
 import { SECTION_NAMES, RESET_LABEL } from "../vars"
 import getWalkSequence from "../../hexapod/solvers/walkSequenceSolver"
 import { withHandlers } from "../providers/Handlers"
+import { withHexapodParams } from "../providers/HexapodParams"
 
 const SLIDER_LABELS = [
     "tz",
@@ -180,4 +181,6 @@ class WalkingGaitsPage extends Component {
     }
 }
 
-export default withHandlers(WalkingGaitsPage)
+export default withHexapodParams(withHandlers(WalkingGaitsPage), ({ dimensions }) => ({
+    params: { dimensions },
+}))
diff --git a/src/components/providers/HexapodParams.js b/src/components/providers/HexapodParams.js
new file mode 100644
index 0000000..b0409df
--- /dev/null
+++ b/src/components/providers/HexapodParams.js
@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useMemo } from "react"
+
+const HexapodParamsCtx = createContext()
+
+export function HexapodParamsProvider({ dimensions, pose, children }) {
+    const value = useMemo(
+        () => ({
+            dimensions,
+            pose,
+        }),
+        [dimensions, pose]
+    )
+    return <HexapodParamsCtx.Provider value={value}>{children}</HexapodParamsCtx.Provider>
+}
+
+export const RenderWithSelectedParam = ({ children, selector, ...rest }) => {
+    const selected = selector(useContext(HexapodParamsCtx))
+    return children({ ...rest, ...selected })
+}
+
+export const withHexapodParams = (Component, selector) => props => {
+    return (
+        <RenderWithSelectedParam {...props} selector={selector}>
+            {enhanced => <Component {...enhanced} />}
+        </RenderWithSelectedParam>
+    )
+}
diff --git a/src/routes.js b/src/routes.js
index 20a4f9f..c9f804e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -17,20 +17,17 @@ export const Routes = ({
     showPoseMessage,
     showInfo,
     info,
-    data,
-    layout,
-    revision,
-    hexapodParams,
+    plot: { data, layout, revisionCounter },
     onRelayout,
 }) => {
     const { path } = useRouteMatch()
-    const { dimensions, pose } = hexapodParams
+
     return (
         <>
             <div className="main content">
                 <div className="sidebar column-container cell">
                     <Route path={HEXAPOD_LINK_PATHS} exact>
-                        <DimensionsWidget params={{ dimensions }} />
+                        <DimensionsWidget />
                     </Route>
                     <Switch>
                         <Route path="/" exact>
@@ -38,11 +35,11 @@ export const Routes = ({
                         </Route>
 
                         <Route path={PATHS.forwardKinematics.path}>
-                            <SuspenseForwardKinematicsPage params={{ pose }} />
+                            <SuspenseForwardKinematicsPage />
                         </Route>
 
                         <Route path={PATHS.inverseKinematics.path}>
-                            <SuspenseInverseKinematicsPage params={{ dimensions }} />
+                            <SuspenseInverseKinematicsPage />
                         </Route>
 
                         <Route path={PATHS.legPatterns.path}>
@@ -50,10 +47,10 @@ export const Routes = ({
                         </Route>
 
                         <Route path={PATHS.walkingGaits.path}>
-                            <SuspenseWalkingGaitsPage params={{ dimensions }} />
+                            <SuspenseWalkingGaitsPage />
                         </Route>
                     </Switch>
-                    <PoseTable pose={pose} showPoseTable={showPoseMessage} />
+                    <PoseTable showPoseTable={showPoseMessage} />
                     <AlertBox showInfo={showInfo} info={info} />
                 </div>
                 <div hidden={path === "/"} className="plot border">
@@ -61,7 +58,7 @@ export const Routes = ({
                         data={data}
                         layout={layout}
                         onRelayout={onRelayout}
-                        revision={revision}
+                        revision={revisionCounter}
                     />
                 </div>
             </div>
diff --git a/src/tests/components/DimensionWidget.test.js b/src/tests/components/DimensionWidget.test.js
index 7edf94b..565cb47 100644
--- a/src/tests/components/DimensionWidget.test.js
+++ b/src/tests/components/DimensionWidget.test.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
-import { DimensionsWidget } from "../../components"
+import { DimensionsWidget } from "../../components/DimensionsWidget"
 
 const DIMENSIONS = {
     front: 71,

From 30a110cd9e33275606572d68a6d5364894d331ac Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 14:13:39 +0200
Subject: [PATCH 23/25] fix: Update PoseTable source of props and AlertBox
 message body

---
 src/components/PoseTable.js            |  6 ++----
 src/components/generic/SmallWidgets.js | 17 ++++++++---------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/PoseTable.js b/src/components/PoseTable.js
index eac20fa..c40b638 100644
--- a/src/components/PoseTable.js
+++ b/src/components/PoseTable.js
@@ -1,5 +1,4 @@
 import React from "react"
-import { withHexapodParams } from "./providers/HexapodParams"
 
 const TableHeader = React.memo(({ labels }) => (
     <thead>
@@ -20,8 +19,7 @@ const TableRow = React.memo(({ label, alpha, beta, gamma }) => (
     </tr>
 ))
 
-const PoseTable = ({ pose, showPoseTable }) => {
-    if (!showPoseTable) return null
+const PoseTable = ({ pose }) => {
     const { rightMiddle, rightFront, leftFront, leftMiddle, leftBack, rightBack } = pose
     return (
         <div className="table-container">
@@ -42,4 +40,4 @@ const PoseTable = ({ pose, showPoseTable }) => {
     )
 }
 
-export default withHexapodParams(PoseTable, ({ pose }) => ({ pose }))
+export default PoseTable
diff --git a/src/components/generic/SmallWidgets.js b/src/components/generic/SmallWidgets.js
index 19172e7..fe22c96 100644
--- a/src/components/generic/SmallWidgets.js
+++ b/src/components/generic/SmallWidgets.js
@@ -1,15 +1,14 @@
 import React from "react"
 import { ICON_COMPONENTS } from "../vars"
 
-const AlertBox = ({ showInfo, info }) =>
-    showInfo && (
-        <div className="message">
-            <h2 className="red">
-                {ICON_COMPONENTS.times} {info.subject}
-            </h2>
-            <pre>{info.body}</pre>
-        </div>
-    )
+const AlertBox = ({ info }) => (
+    <div className="message">
+        <h2 className="red">
+            {ICON_COMPONENTS.times} {info.subject}
+        </h2>
+        <p>{info.body}</p>
+    </div>
+)
 
 const ToggleSwitch = ({ id, value, handleChange, showValue }) => (
     <div className="switch-container">

From edeb6e31c7b8c77208b5df3263f66bff13860db8 Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 14:14:07 +0200
Subject: [PATCH 24/25] refactor: Turn App into a functional component

---
 src/App.js                                    | 168 +++++++++---------
 src/components/pages/InverseKinematicsPage.js |  24 +--
 src/components/providers/Handlers.js          |  10 +-
 src/routes.js                                 |   4 +-
 4 files changed, 101 insertions(+), 105 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0b92ee2..e42695d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback, useReducer, useEffect, useRef } from "react"
 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
 import ReactGA from "react-ga"
 import { VirtualHexapod, getNewPlotParams } from "./hexapod"
@@ -16,114 +16,108 @@ ReactGA.initialize("UA-170794768-1", {
     gaOptions: { siteSpeedSampleRate: 100 },
 })
 
-class App extends React.Component {
-    state = {
-        hexapodParams: {
-            dimensions: defaults.DEFAULT_DIMENSIONS,
-            pose: defaults.DEFAULT_POSE,
-        },
-
-        plot: {
-            data: defaults.DATA,
-            layout: defaults.LAYOUT,
-            latestCameraView: defaults.CAMERA_VIEW,
-            revisionCounter: 0,
-        },
-    }
+const merge = (prev, next) => ({ ...prev, ...next })
+const mergeWithCounter = (prev, next) => ({
+    ...merge(prev, next),
+    counter: prev.counter + 1,
+})
 
-    /* * * * * * * * * * * * * *
-     * Handle page load
-     * * * * * * * * * * * * * */
+function App() {
+    const [hexapodParams, setHexaPod] = useReducer(merge, {
+        dimensions: defaults.DEFAULT_DIMENSIONS,
+        pose: defaults.DEFAULT_POSE,
+    })
 
-    onPageLoad = () => {
-        ReactGA.pageview(window.location.pathname + window.location.search)
+    const [plot, setPlot] = useReducer(mergeWithCounter, {
+        data: defaults.DATA,
+        layout: defaults.LAYOUT,
+        counter: 0,
+    })
 
-        this.setState(
-            {
-                hexapodParams: {
-                    ...this.state.hexapodParams,
-                    pose: defaults.DEFAULT_POSE,
-                },
-            },
-            () =>
-                this.updatePlot(
-                    this.state.hexapodParams.dimensions,
-                    defaults.DEFAULT_POSE
-                )
-        )
-    }
+    const cameraView = useRef()
+    cameraView.current = defaults.CAMERA_VIEW
 
     /* * * * * * * * * * * * * *
      * Handle plot update
      * * * * * * * * * * * * * */
 
-    updatePlotWithHexapod = hexapod => {
+    const updatePlotWithHexapod = useCallback(hexapod => {
         if (hexapod === null || hexapod === undefined || !hexapod.foundSolution) {
             return
         }
 
-        const [data, layout] = getNewPlotParams(hexapod, this.state.plot.latestCameraView)
-        return this.setState({
-            plot: {
-                ...this.state.plot,
-                data,
-                layout,
-                revisionCounter: this.state.plot.revisionCounter + 1,
-            },
-            hexapodParams: {
-                dimensions: hexapod.dimensions,
-                pose: hexapod.pose,
-            },
+        const [data, layout] = getNewPlotParams(hexapod, cameraView.current)
+
+        return setPlot({
+            data,
+            layout,
         })
-    }
+    }, [])
 
-    logCameraView = relayoutData => {
-        const newCameraView = relayoutData["scene.camera"]
-        const plot = { ...this.state.plot, latestCameraView: newCameraView }
-        return this.setState({ ...this.state, plot: plot })
-    }
+    /* * * * * * * * * * * * * *
+     * Every time the hexapod changes, update the plot!
+     * * * * * * * * * * * * * */
+    useEffect(() => {
+        const hexapod = new VirtualHexapod(hexapodParams.dimensions, hexapodParams.pose)
+        updatePlotWithHexapod(hexapod)
+    }, [hexapodParams, updatePlotWithHexapod])
 
-    updatePlot = (dimensions, pose) => {
-        const newHexapodModel = new VirtualHexapod(dimensions, pose)
-        this.updatePlotWithHexapod(newHexapodModel)
-    }
+    const logCameraView = useCallback(relayoutData => {
+        cameraView.current = relayoutData["scene.camera"] ?? defaults.CAMERA_VIEW
+    }, [])
 
-    updateDimensions = dimensions =>
-        this.updatePlot(dimensions, this.state.hexapodParams.pose)
+    const updateDimensions = useCallback(dimensions => setHexaPod({ dimensions }), [
+        setHexaPod,
+    ])
 
-    updatePose = pose => this.updatePlot(this.state.hexapodParams.dimensions, pose)
+    const updatePose = useCallback(pose => setHexaPod({ pose }), [setHexaPod])
+
+    const updateHexapod = useCallback(
+        hexapod => {
+            // bail-out if nothing comes through
+            if (hexapod) setHexaPod(hexapod)
+        },
+        [setHexaPod]
+    )
+
+    /* * * * * * * * * * * * * *
+     * Handle page load
+     * * * * * * * * * * * * * */
+
+    const onPageLoad = useCallback(() => {
+        ReactGA.pageview(window.location.pathname + window.location.search)
+
+        return setHexaPod({
+            pose: defaults.DEFAULT_POSE,
+        })
+    }, [setHexaPod])
 
     /* * * * * * * * * * * * * *
      * Layout
      * * * * * * * * * * * * * */
 
-    render() {
-        return (
-            <Router>
-                <Nav />
-                <Switch>
-                    <Route path={PATH_LINKS.map(({ path }) => path)} exact>
-                        <HexapodParamsProvider {...this.state.hexapodParams}>
-                            <HandlersProvider
-                                onPageLoad={this.onPageLoad}
-                                updatePose={this.updatePose}
-                                updatePlotWithHexapod={this.updatePlotWithHexapod}
-                                updateDimensions={this.updateDimensions}
-                            >
-                                <Routes
-                                    {...this.state.plot}
-                                    onRelayout={this.logCameraView}
-                                />
-                            </HandlersProvider>
-                        </HexapodParamsProvider>
-                    </Route>
-                    <Route>
-                        <Redirect to="/" />
-                    </Route>
-                </Switch>
-            </Router>
-        )
-    }
+    return (
+        <Router>
+            <Nav />
+            <Switch>
+                <Route path={PATH_LINKS.map(({ path }) => path)} exact>
+                    <HexapodParamsProvider {...hexapodParams}>
+                        <HandlersProvider
+                            onPageLoad={onPageLoad}
+                            updatePose={updatePose}
+                            updateHexapod={updateHexapod}
+                            updateDimensions={updateDimensions}
+                        >
+                            <Routes {...plot} onRelayout={logCameraView} />
+                        </HandlersProvider>
+                    </HexapodParamsProvider>
+                </Route>
+                <Route>
+                    <Redirect to="/" />
+                </Route>
+            </Switch>
+        </Router>
+    )
 }
 
 export default App
diff --git a/src/components/pages/InverseKinematicsPage.js b/src/components/pages/InverseKinematicsPage.js
index 6f21b35..8742c04 100644
--- a/src/components/pages/InverseKinematicsPage.js
+++ b/src/components/pages/InverseKinematicsPage.js
@@ -21,12 +21,13 @@ class InverseKinematicsPage extends Component {
         const result = solveInverseKinematics(this.props.params.dimensions, ikParams)
 
         if (!result.obtainedSolution) {
-            this.props.onUpdatePlot(null)
-            this.setState({ errorMessage: result.message, pose: null })
-            return
+            return this.setState(
+                { errorMessage: result.message, pose: null, ikParams },
+                () => this.props.onUpdateHexapod(null)
+            )
         }
 
-        this.update(result.hexapod, ikParams)
+        return this.update(result.hexapod, ikParams)
     }
 
     reset = () => {
@@ -38,13 +39,14 @@ class InverseKinematicsPage extends Component {
     }
 
     update = (hexapod, ikParams) => {
-        this.setState({
-            ikParams: ikParams,
-            errorMessage: null,
-            pose: hexapod.pose,
-        })
-
-        this.props.onUpdatePlot(hexapod)
+        return this.setState(
+            {
+                ikParams: ikParams,
+                errorMessage: null,
+                pose: hexapod.pose,
+            },
+            () => this.props.onUpdateHexapod(hexapod)
+        )
     }
 
     get sliders() {
diff --git a/src/components/providers/Handlers.js b/src/components/providers/Handlers.js
index 6f2ef04..e92107d 100644
--- a/src/components/providers/Handlers.js
+++ b/src/components/providers/Handlers.js
@@ -5,18 +5,18 @@ const HandlersCtx = createContext()
 export function HandlersProvider({
     onPageLoad,
     updatePose,
-    updatePlotWithHexapod,
+    updateHexapod,
     updateDimensions,
     children,
 }) {
     const value = useMemo(
         () => ({
             onPageLoad,
-            updatePlotWithHexapod,
+            updateHexapod,
             updatePose,
             updateDimensions,
         }),
-        [onPageLoad, updatePlotWithHexapod, updatePose, updateDimensions]
+        [onPageLoad, updateHexapod, updatePose, updateDimensions]
     )
     return <HandlersCtx.Provider value={value}>{children}</HandlersCtx.Provider>
 }
@@ -31,14 +31,14 @@ export const RenderWithHandlers = ({ children, ...rest }) => {
         onPageLoad: onMount,
         updatePose: onUpdatePose,
         updateDimensions: onUpdateDimensions,
-        updatePlotWithHexapod: onUpdatePlot,
+        updateHexapod: onUpdateHexapod,
     } = useContext(HandlersCtx)
     return children({
         ...rest,
         onMount,
         onUpdatePose,
         onUpdateDimensions,
-        onUpdatePlot,
+        onUpdateHexapod,
     })
 }
 
diff --git a/src/routes.js b/src/routes.js
index f10675b..10481b1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -13,7 +13,7 @@ import {
     SuspenseHexapodPlot,
 } from "./loadables"
 
-export const Routes = ({ data, layout, revisionCounter, onRelayout }) => {
+export const Routes = ({ data, layout, counter, onRelayout }) => {
     const { path } = useRouteMatch()
 
     return (
@@ -50,7 +50,7 @@ export const Routes = ({ data, layout, revisionCounter, onRelayout }) => {
                         data={data}
                         layout={layout}
                         onRelayout={onRelayout}
-                        revision={revisionCounter}
+                        revision={counter}
                     />
                 </div>
             </div>

From a51f61fb29c5f634abf174194bc623372beaf50b Mon Sep 17 00:00:00 2001
From: Joseph Chamochumbi <sephxd1234@gmail.com>
Date: Wed, 8 Jul 2020 14:35:26 +0200
Subject: [PATCH 25/25] refactor: Move away custom hooks

---
 src/App.js                               | 95 ++----------------------
 src/components/hooks/useHexapodParams.js | 50 +++++++++++++
 src/components/hooks/usePlot.js          | 43 +++++++++++
 3 files changed, 100 insertions(+), 88 deletions(-)
 create mode 100644 src/components/hooks/useHexapodParams.js
 create mode 100644 src/components/hooks/usePlot.js

diff --git a/src/App.js b/src/App.js
index e42695d..cc58e8b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,6 @@
-import React, { useCallback, useReducer, useEffect, useRef } from "react"
+import React, { useEffect } from "react"
 import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
-import ReactGA from "react-ga"
-import { VirtualHexapod, getNewPlotParams } from "./hexapod"
-import * as defaults from "./templates"
+import { VirtualHexapod } from "./hexapod"
 import { PATH_LINKS } from "./components/vars"
 import { Nav } from "./components"
 
@@ -10,104 +8,25 @@ import Routes from "./routes"
 import { HandlersProvider } from "./components/providers/Handlers"
 import { HexapodParamsProvider } from "./components/providers/HexapodParams"
 
-ReactGA.initialize("UA-170794768-1", {
-    //debug: true,
-    //testMode: process.env.NODE_ENV === 'test',
-    gaOptions: { siteSpeedSampleRate: 100 },
-})
-
-const merge = (prev, next) => ({ ...prev, ...next })
-const mergeWithCounter = (prev, next) => ({
-    ...merge(prev, next),
-    counter: prev.counter + 1,
-})
+import { useHexapodParams } from "./components/hooks/useHexapodParams"
+import { usePlot } from "./components/hooks/usePlot"
 
 function App() {
-    const [hexapodParams, setHexaPod] = useReducer(merge, {
-        dimensions: defaults.DEFAULT_DIMENSIONS,
-        pose: defaults.DEFAULT_POSE,
-    })
-
-    const [plot, setPlot] = useReducer(mergeWithCounter, {
-        data: defaults.DATA,
-        layout: defaults.LAYOUT,
-        counter: 0,
-    })
-
-    const cameraView = useRef()
-    cameraView.current = defaults.CAMERA_VIEW
-
-    /* * * * * * * * * * * * * *
-     * Handle plot update
-     * * * * * * * * * * * * * */
+    const { hexapodParams, ...handlers } = useHexapodParams()
+    const { plot, updatePlotWithHexapod, logCameraView } = usePlot()
 
-    const updatePlotWithHexapod = useCallback(hexapod => {
-        if (hexapod === null || hexapod === undefined || !hexapod.foundSolution) {
-            return
-        }
-
-        const [data, layout] = getNewPlotParams(hexapod, cameraView.current)
-
-        return setPlot({
-            data,
-            layout,
-        })
-    }, [])
-
-    /* * * * * * * * * * * * * *
-     * Every time the hexapod changes, update the plot!
-     * * * * * * * * * * * * * */
     useEffect(() => {
         const hexapod = new VirtualHexapod(hexapodParams.dimensions, hexapodParams.pose)
         updatePlotWithHexapod(hexapod)
     }, [hexapodParams, updatePlotWithHexapod])
 
-    const logCameraView = useCallback(relayoutData => {
-        cameraView.current = relayoutData["scene.camera"] ?? defaults.CAMERA_VIEW
-    }, [])
-
-    const updateDimensions = useCallback(dimensions => setHexaPod({ dimensions }), [
-        setHexaPod,
-    ])
-
-    const updatePose = useCallback(pose => setHexaPod({ pose }), [setHexaPod])
-
-    const updateHexapod = useCallback(
-        hexapod => {
-            // bail-out if nothing comes through
-            if (hexapod) setHexaPod(hexapod)
-        },
-        [setHexaPod]
-    )
-
-    /* * * * * * * * * * * * * *
-     * Handle page load
-     * * * * * * * * * * * * * */
-
-    const onPageLoad = useCallback(() => {
-        ReactGA.pageview(window.location.pathname + window.location.search)
-
-        return setHexaPod({
-            pose: defaults.DEFAULT_POSE,
-        })
-    }, [setHexaPod])
-
-    /* * * * * * * * * * * * * *
-     * Layout
-     * * * * * * * * * * * * * */
-
     return (
         <Router>
             <Nav />
             <Switch>
                 <Route path={PATH_LINKS.map(({ path }) => path)} exact>
                     <HexapodParamsProvider {...hexapodParams}>
-                        <HandlersProvider
-                            onPageLoad={onPageLoad}
-                            updatePose={updatePose}
-                            updateHexapod={updateHexapod}
-                            updateDimensions={updateDimensions}
-                        >
+                        <HandlersProvider {...handlers}>
                             <Routes {...plot} onRelayout={logCameraView} />
                         </HandlersProvider>
                     </HexapodParamsProvider>
diff --git a/src/components/hooks/useHexapodParams.js b/src/components/hooks/useHexapodParams.js
new file mode 100644
index 0000000..c7e0305
--- /dev/null
+++ b/src/components/hooks/useHexapodParams.js
@@ -0,0 +1,50 @@
+import { useCallback, useReducer } from "react"
+import ReactGA from "react-ga"
+import * as defaults from "../../templates"
+
+ReactGA.initialize("UA-170794768-1", {
+    //debug: true,
+    //testMode: process.env.NODE_ENV === 'test',
+    gaOptions: { siteSpeedSampleRate: 100 },
+})
+
+const merge = (prev, next) => ({ ...prev, ...next })
+
+export const useHexapodParams = () => {
+    const [hexapodParams, setHexaPod] = useReducer(merge, {
+        dimensions: defaults.DEFAULT_DIMENSIONS,
+        pose: defaults.DEFAULT_POSE,
+    })
+
+    /* * * * * * * * * * * * * *
+     * Every time the hexapod changes, update the plot!
+     * * * * * * * * * * * * * */
+
+    const updateDimensions = useCallback(dimensions => setHexaPod({ dimensions }), [
+        setHexaPod,
+    ])
+
+    const updatePose = useCallback(pose => setHexaPod({ pose }), [setHexaPod])
+
+    const updateHexapod = useCallback(
+        hexapod => {
+            // bail-out if nothing comes through
+            if (hexapod) setHexaPod(hexapod)
+        },
+        [setHexaPod]
+    )
+
+    /* * * * * * * * * * * * * *
+     * Handle page load
+     * * * * * * * * * * * * * */
+
+    const onPageLoad = useCallback(() => {
+        ReactGA.pageview(window.location.pathname + window.location.search)
+
+        return setHexaPod({
+            pose: defaults.DEFAULT_POSE,
+        })
+    }, [setHexaPod])
+
+    return { hexapodParams, onPageLoad, updateHexapod, updatePose, updateDimensions }
+}
diff --git a/src/components/hooks/usePlot.js b/src/components/hooks/usePlot.js
new file mode 100644
index 0000000..d1b0cab
--- /dev/null
+++ b/src/components/hooks/usePlot.js
@@ -0,0 +1,43 @@
+import { useCallback, useReducer, useRef } from "react"
+import { getNewPlotParams } from "../../hexapod"
+import * as defaults from "../../templates"
+
+const mergeWithCounter = (prev, next) => ({
+    ...prev,
+    ...next,
+    counter: prev.counter + 1,
+})
+
+export const usePlot = () => {
+    const [plot, setPlot] = useReducer(mergeWithCounter, {
+        data: defaults.DATA,
+        layout: defaults.LAYOUT,
+        counter: 0,
+    })
+
+    const cameraView = useRef()
+    cameraView.current = defaults.CAMERA_VIEW
+
+    /* * * * * * * * * * * * * *
+     * Handle plot update
+     * * * * * * * * * * * * * */
+
+    const updatePlotWithHexapod = useCallback(hexapod => {
+        if (hexapod === null || hexapod === undefined || !hexapod.foundSolution) {
+            return
+        }
+
+        const [data, layout] = getNewPlotParams(hexapod, cameraView.current)
+
+        return setPlot({
+            data,
+            layout,
+        })
+    }, [])
+
+    const logCameraView = useCallback(relayoutData => {
+        cameraView.current = relayoutData["scene.camera"] ?? defaults.CAMERA_VIEW
+    }, [])
+
+    return { plot, updatePlotWithHexapod, logCameraView }
+}