WIP: Feat/state managment

.gitignore

@@ -11,6 +11,9 @@
 # production
 /build
 
+# webstorm
+.idea
+
 # misc
 .DS_Store
 .env

package.json

@@ -11,16 +11,19 @@
     "@vx/gradient": "^0.0.195",
     "d3-array": "^2.4.0",
     "d3-dsv": "^1.2.0",
+    "d3-ease": "^1.0.6",
     "d3-scale": "^3.2.1",
     "d3-shape": "^1.3.7",
     "date-fns": "^2.12.0",
     "deck.gl": "^8.1.1",
     "global": "^4.4.0",
     "now": "^17.1.1",
+    "positic": "1.0.10",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-map-gl": "^5.2.3",
     "react-scripts": "3.4.0",
+    "recoil": "0.0.11",
     "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, useRecoilTransactionObserver_UNSTABLE } from "recoil";
 
 import MarvinFont from "./assets/fonts/MarvinVisionsTrial-Variable.ttf";
 import Main from "./components/main/Main";
@@ -40,13 +41,36 @@ body {
  background: #1f252d; 
  margin:0;
  font-family: MyFont;
- font-weight: 170;
+ font-weight: 200;
  font-variation-settings: "opsz" 99;
  font-feature-settings: "ss02" 0,"ss03" 0,"ss06" 0;
 }
 `;
 
-const App = () => {
+const initializeState = ({ set }) => {
+  Object.entries(localStorage).forEach(([key, value]) => {
+    if (!key.includes("mapbox")) {
+      const parsedValue = JSON.parse(value).value;
+      set({ key }, parsedValue);
+    }
+  });
+};
+
+const Inner = () => {
+  useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
+    for (const modifiedAtom of snapshot.getNodes_UNSTABLE({
+      isModified: true,
+    })) {
+      const atomLoadable = snapshot.getLoadable(modifiedAtom);
+      if (atomLoadable.state === "hasValue") {
+
+        localStorage.setItem(
+          modifiedAtom.key,
+          JSON.stringify({ value: atomLoadable.contents })
+        );
+      }
+    }
+  });
   return (
     <ThemeProvider theme={THEME}>
       <Main />
@@ -55,4 +79,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 RadialProgressBar 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 = [
       {
@@ -43,7 +59,7 @@ const Analytics = ({
       },
       {
         label: "elevation loss",
-        color: "#DC0073",
+        color: "#bb3439",
         total: routeAnalytics.elevation.negative,
         runnerAnalytics: runnerAnalytics[2],
         percent:
@@ -57,15 +73,17 @@ const Analytics = ({
 
   return (
     <div className={className}>
-      <RadialProgessBar data={data} />
+      <RadialProgressBar data={data} />
       {currentSectionIndex >= 0 && (
         <div className="analytics">
-          <div className="item checkpoint">{`${distanceToNextCheckpoint.toFixed(
-            2
-          )} km to ${sections[currentSectionIndex].arrivalLocation}`}</div>
-          <div className="item distance">{`${runnerAnalytics[0].toFixed(
-            2
-          )} km ran`}</div>
+          <div className="item checkpoint">{`${(
+            distanceToNextCheckpoint / 1000
+          ).toFixed(2)} km to ${
+            sections[currentSectionIndex].arrivalLocation
+          }`}</div>
+          <div className="item distance">{`${(
+            runnerAnalytics[0] / 1000
+          ).toFixed(2)} km ran`}</div>
           <div className="item gain">{`${runnerAnalytics[1].toFixed(
             0
           )} m climbed`}</div>

src/components/analytics/style.js

@@ -51,7 +51,7 @@ export default (Component) => styled(Component)`
       &.loss {
         margin-left: ${(props) => props.theme.space[3] * 3}px;
         ::before {
-          background-color: #dc0073;
+          background-color: #bb3439;
         }
       }
       &.checkpoint {

src/components/fileUpload/FileUpload.js

@@ -10,7 +10,7 @@ const Input = styled.input`
 `;
 
 const Container = styled.div`
-  display: relative;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;