WIP: Feat/state managment

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^16.13.0",
     "react-map-gl": "^5.2.3",
     "react-scripts": "3.4.0",
+    "recoil": "0.0.7",
     "source-map-explorer": "^2.4.2",
     "styled-components": "^5.0.1",
     "styled-icons": "^10.2.1",

src/App.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createGlobalStyle, ThemeProvider } from "styled-components";
+import { RecoilRoot, useTransactionObservation_UNSTABLE } from "recoil";
 
 import MarvinFont from "./assets/fonts/MarvinVisionsTrial-Variable.ttf";
 import Main from "./components/main/Main";
@@ -46,7 +47,38 @@ body {
 }
 `;
 
-const App = () => {
+const initializeState = ({ set }) => {
+  const keys = Object.keys(localStorage).filter(
+    (key) => !key.includes("mapbox")
+  );
+
+  const promises = keys.map((key) => localStorage.getItem(key));
+  Promise.all(promises).then((values) => {
+    for (let i = 0; i < promises.length; i++) {
+      const key = keys[i];
+      const value = JSON.parse(values[i]).value;
+      set({ key }, value);
+    }
+  });
+};
+
+const Inner = () => {
+  useTransactionObservation_UNSTABLE(
+    ({
+      atomValues,
+      previousAtomValues,
+      atomInfo,
+      modifiedAtoms,
+      transactionMetadata,
+    }) => {
+      for (const modifiedAtom of modifiedAtoms) {
+        localStorage.setItem(
+          modifiedAtom,
+          JSON.stringify({ value: atomValues.get(modifiedAtom) })
+        );
+      }
+    }
+  );
   return (
     <ThemeProvider theme={THEME}>
       <Main />
@@ -55,4 +87,12 @@ const App = () => {
   );
 };
 
+const App = () => {
+  return (
+    <RecoilRoot initializeState={initializeState}>
+      <Inner />
+    </RecoilRoot>
+  );
+};
+
 export default App;

src/components/analytics/Analytics.js

@@ -1,27 +1,43 @@
 import React, { useEffect, useState } from "react";
+import { useRecoilValue } from "recoil";
 
 import styled from "./style";
 import RadialProgessBar from "../radialProgressBar/RadialProgressBar";
+import {
+  sectionsState,
+  currentSectionIndexState,
+  runnerAnalyticsState,
+  routeAnalyticsState,
+} from "../../model";
+
+const Analytics = ({ className }) => {
+  const runnerAnalytics = useRecoilValue(runnerAnalyticsState);
+  const routeAnalytics = useRecoilValue(routeAnalyticsState);
+  const sections = useRecoilValue(sectionsState);
+  const currentSectionIndex = useRecoilValue(currentSectionIndexState);
 
-const Analytics = ({
-  className,
-  runnerAnalytics,
-  routeAnalytics,
-  sections,
-  currentSectionIndex,
-}) => {
   const [data, setData] = useState();
   const [distanceToNextCheckpoint, setDistanceToNextCheckpoint] = useState(0);
 
   useEffect(() => {
-    if (currentSectionIndex < 0 || !runnerAnalytics || !sections) return;
+    if (
+      currentSectionIndex < 0 ||
+      runnerAnalytics.length === 0 ||
+      sections.length === 0
+    )
+      return;
 
     const remaining = sections[currentSectionIndex].toKm - runnerAnalytics[0];
     setDistanceToNextCheckpoint(remaining);
   }, [currentSectionIndex, sections, runnerAnalytics]);
 
   useEffect(() => {
-    if (!routeAnalytics || !runnerAnalytics) return;
+    if (
+      Object.keys(routeAnalytics).length === 0 ||
+      runnerAnalytics.length === 0
+    ) {
+      return;
+    }
 
     const updatedData = [
       {

src/components/home/Home.js

@@ -4,25 +4,28 @@ import { gpx } from "@mapbox/togeojson";
 import { UploadCloud, Check } from "@styled-icons/feather";
 import { csvParse } from "d3-dsv";
 import { formatDistanceToNow } from "date-fns";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import styled from "./style";
 import FileUpload from "../fileUpload/FileUpload";
 import { fileType } from "../fileReader/FileReader";
 import useResizeObserver from "../../hooks/useResizeObserver";
 import Graph from "../graph/Graph";
+import {
+  checkpointsState,
+  sectionsState,
+  locationsState,
+  nameState,
+  routeState,
+} from "../../model";
+
+const Home = ({ className, domain }) => {
+  const [route, setRoute] = useRecoilState(routeState);
+  const [checkpoints, setCheckpoints] = useRecoilState(checkpointsState);
+  const setName = useSetRecoilState(nameState);
+  const locations = useRecoilValue(locationsState);
+  const setSections = useSetRecoilState(sectionsState);
 
-const Home = ({
-  className,
-  setRoute,
-  setCheckpoints,
-  setSections,
-  route,
-  checkpoints,
-  domain,
-  locations,
-  setName,
-  name,
-}) => {
   const [step, setStep] = useState(0);
   const [ref, { contentRect }] = useResizeObserver();
 
@@ -40,8 +43,8 @@ const Home = ({
       handleFileRead: (filename, data) => {
         const xml = new xmldom.DOMParser().parseFromString(data);
         const geoJSON = gpx(xml);
-        setCheckpoints(null);
-        setSections(null);
+        setCheckpoints([]);
+        setSections([]);
         setRoute(geoJSON);
         const name = filename
           .substr(0, filename.lastIndexOf("."))
@@ -70,9 +73,9 @@ const Home = ({
   ];
 
   useEffect(() => {
-    if (!route && !checkpoints) setStep(0);
-    if (route && !checkpoints) setStep(1);
-    if (route && checkpoints) setStep(2);
+    if (Object.keys(route).length === 0 && checkpoints.length === 0) setStep(0);
+    if (Object.keys(route).length > 0 && checkpoints.length === 0) setStep(1);
+    if (Object.keys(route).length > 0 && checkpoints.length > 0) setStep(2);
   }, [checkpoints, route, setStep]);
 
   return (

src/components/live/Live.js

@@ -9,8 +9,10 @@ import {
 import * as scale from "d3-scale";
 import * as shape from "d3-shape";
 import * as d3Array from "d3-array";
+import { useRecoilValue } from "recoil";
 
 import styled from "./style";
+import { checkpointsState } from "../../model";
 
 const d3 = {
   scale,
@@ -32,7 +34,9 @@ const createYScale = (start, end, rangeMin, rangeMax) => {
     .range([rangeMin, rangeMax]);
 };
 
-const Live = ({ className, checkpoints, width, height }) => {
+const Live = ({ className, width, height }) => {
+  const checkpoints = useRecoilValue(checkpointsState);
+
   const [scales, setScales] = useState();
   const [intervals, setIntervals] = useState();
   const [checkpointsIntervals, setCheckpointsIntervals] = useState();