Zustand

package.json

@@ -19,6 +19,7 @@
     "gh-pages": "^2.0.0",
     "html2canvas": "^1.0.0-alpha.12",
     "jquery": "^3.3.1",
+    "lodash": "^4.17.19",
     "lodash.debounce": "^4.0.8",
     "node": "^11.12.0",
     "query-string": "^6.6.0",
@@ -45,6 +46,7 @@
   "homepage": "https://danielacorner.github.io/pave__react",
   "devDependencies": {
     "@types/jest": "^24.0.13",
+    "@types/lodash": "^4.14.159",
     "@types/node": "^12.0.7",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",

src/App.tsx

@@ -1,49 +1,55 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme } from "@material-ui/core/styles";
 // import Navbar from './components/Navbar';
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
-import React, { useState } from 'react';
-import './App.css';
-import ContextProvider from './components/Context/ContextProvider';
-import AppWithContext from './AppWithContext';
-import { AddToHomeScreenBanner } from './components/AddToHomeScreenBanner';
-import { PictogramClipPathsDefs } from './components/Viz/PictogramClipPathsDefs';
-import { BeforeInstallPromptEvent } from './types';
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import React, { useState } from "react";
+import "./App.css";
+import AppWithContext from "./AppWithContext";
+import { AddToHomeScreenBanner } from "./components/AddToHomeScreenBanner";
+import { PictogramClipPathsDefs } from "./components/Viz/PictogramClipPathsDefs";
+import { BeforeInstallPromptEvent } from "./types";
+import useStore from "./components/store";
+import { useMount } from "./utils/constants";
 
-export const brightGreen = '#49ac52';
+export const brightGreen = "#49ac52";
 const theme = createMuiTheme({
   palette: {
     primary: {
       main: brightGreen,
-      contrastText: '#fff',
+      contrastText: "#fff",
     },
-    secondary: { main: '#64b5f6' },
+    secondary: { main: "#64b5f6" },
     contrastThreshold: 3,
   },
 });
 
 function App() {
   const [deferredPrompt, setDeferredPrompt] = useState(
-    null as null | BeforeInstallPromptEvent,
+    null as null | BeforeInstallPromptEvent
   );
+  const initializeClusterCenters = useStore(
+    (state) => state.initializeClusterCenters
+  );
+
+  useMount(() => {
+    initializeClusterCenters();
+  });
 
-  window.addEventListener('beforeinstallprompt', (event: any) => {
+  window.addEventListener("beforeinstallprompt", (event: any) => {
     // Prevent Chrome 67 and earlier from automatically showing the prompt
     event.preventDefault();
     // Stash the event so it can be triggered later.
     setDeferredPrompt(event);
   });
   return (
     <MuiThemeProvider theme={theme}>
-      <ContextProvider>
-        <PictogramClipPathsDefs />
-        <AppWithContext />
-        <AddToHomeScreenBanner
-          {...{
-            deferredPrompt,
-            setDeferredPrompt,
-          }}
-        />
-      </ContextProvider>
+      <PictogramClipPathsDefs />
+      <AppWithContext />
+      <AddToHomeScreenBanner
+        {...{
+          deferredPrompt,
+          setDeferredPrompt,
+        }}
+      />
     </MuiThemeProvider>
   );
 }

src/components/AppLayout.tsx

@@ -1,11 +1,5 @@
 // import queryString from 'query-string'
-import React, {
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-} from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import styled from "styled-components/macro";
 import {
@@ -15,15 +9,13 @@ import {
   SKILLS_LOGI,
   SKILLS_COMP,
   SKILLS_MATH,
-} from "../utils/constants";
-import { ControlsContext } from "./Context/ContextProvider";
-import FiltersPanel from "./Controls/FiltersPanel";
-import SortPanel, {
   STUDY,
   SALARY,
   STUDY_LABEL,
   SALARY_LABEL,
-} from "./Controls/SortPanel";
+} from "../utils/constants";
+import FiltersPanel from "./Controls/FiltersPanel";
+import SortPanel from "./Controls/SortPanel";
 import InfoDrawer from "./Viz/InfoDrawer";
 import Tooltip from "./Viz/Tooltip";
 import Viz from "./Viz/Viz";
@@ -33,6 +25,7 @@ import FORCE from "./FORCE";
 import { useWindowSize } from "./useWindowSize";
 import { NAV_HEIGHT } from "./Nav/Navbar";
 import ContainerDimensions from "react-container-dimensions";
+import useStore from "./store";
 
 const AppLayoutStyles = styled.div`
   position: relative;
@@ -109,14 +102,16 @@ const AppLayout = () => {
     x: { displayName: STUDY, dataLabel: STUDY_LABEL },
     y: { displayName: SALARY, dataLabel: SALARY_LABEL },
   });
-  const { state, handleResize, restartSimulation } = useContext(
-    ControlsContext
-  );
+  const getRadiusScale = useStore((state) => state.getRadiusScale);
+  const zScale = useStore((state) => state.zScale);
+  const uniqueClusterValues = useStore((state) => state.uniqueClusterValues);
+  const sortedByValue = useStore((state) => state.sortedByValue);
+  const handleResize = useStore((state) => state.handleResize);
+  const restartSimulation = useStore((state) => state.restartSimulation);
 
   const [isExpanded, setIsExpanded] = useState(
     INITIAL_SUBSKILL_FILTERS_EXPANDED_STATE
   );
-  const { getRadiusScale, zScale, uniqueClusterValues, sortedByValue } = state;
 
   const [isGraphView, setIsGraphView] = useState(false);
 
@@ -222,7 +217,7 @@ const AppLayout = () => {
       });
       startTooltipActive();
     },
-    [innerHeight, startTooltipActive]
+    [innerHeight]
   );
 
   const onClickNode = useCallback((event: Event, datum: any) => {