#178 Progress on preview UI, Swapping out server state into react-query

- Better error and load states for preview - Remove Zustand for server specific state and move it into react-query.
pacificclimate · Feb 13, 2024 · a51b224 · a51b224
1 parent 367da68
commit a51b224
Show file tree

Hide file tree

Showing 41 changed files with 757 additions and 848 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "1.5.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.20.2",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",
     "chroma-js": "^2.4.2",
@@ -40,6 +41,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.20.2",
     "husky": "^8.0.3",
     "jest-each": "^28.1.1",
     "lint-staged": "^15.2.0",

diff --git a/src/api/metadata.js b/src/api/metadata.js
diff --git a/src/components/controls/StationFilters/StationFilters.js b/src/components/controls/StationFilters/StationFilters.js
@@ -34,6 +34,9 @@ import DateSelector from "../../selectors/DateSelector";
 import OnlyWithClimatologyControl from "../../controls/OnlyWithClimatologyControl";
 import { commonSelectorStyles } from "../../selectors/styles";
 import { usePairedImmerByKey } from "../../../hooks";
+import { useNetworks } from "../../../state/query-hooks/use-networks";
+import { useVariables } from "../../../state/query-hooks/use-variables";
+import { useFrequencies } from "../../../state/query-hooks/use-frequencies";
 
 export const useStationFiltering = () => {
   const { normal, transitional, isPending, setState } = usePairedImmerByKey({
@@ -58,13 +61,12 @@ export const useStationFiltering = () => {
 function StationFilters({
   state,
   setState,
-  metadata: {
-    networks: allNetworks,
-    variables: allVariables,
-    frequencies: allFrequencies,
-  },
   rowClasses = { className: "mb-3" },
 }) {
+  const { data: allNetworks } = useNetworks();
+  const { data: allVariables } = useVariables();
+  const { data: allFrequencies } = useFrequencies();
+
   return (
     <React.Fragment>
       <Row {...rowClasses}>

diff --git a/src/components/daterange/index.js b/src/components/daterange/index.js
@@ -62,15 +62,15 @@ const getFormattedIntervals = (
   const formattedBlockedDates = blockedDates
     .sort((a, b) => a.start - b.start)
     .map((interval, index) => {
-      let { start, end, type } = interval;
+      let { start, end, type, color } = interval;
 
       if (isBefore(start, startTime)) start = startTime;
       if (isAfter(end, endTime)) end = endTime;
 
       const source = getConfig(start);
       const target = getConfig(end);
 
-      return { id: `${classPrefix}-${index}`, source, target, type };
+      return { id: `${classPrefix}-${index}`, source, target, type, color };
     });
 
   console.log("### formattedBlockedDates", formattedBlockedDates);
@@ -258,18 +258,21 @@ class DateRange extends React.Component {
             <Tracks left={false} right={false}>
               {({ getTrackProps }) => (
                 <>
-                  {dataIntervals.map(({ id, source, target, type }, index) => (
-                    <DataTrack
-                      key={id}
-                      source={source}
-                      target={target}
-                      getTrackProps={getTrackProps}
-                      count={dataIntervals.length}
-                      index={index}
-                      type={type}
-                      disabled
-                    />
-                  ))}
+                  {dataIntervals.map(
+                    ({ id, source, target, type, color }, index) => (
+                      <DataTrack
+                        key={id}
+                        source={source}
+                        target={target}
+                        getTrackProps={getTrackProps}
+                        count={dataIntervals.length}
+                        index={index}
+                        type={type}
+                        color={color}
+                        disabled
+                      />
+                    ),
+                  )}
                 </>
               )}
             </Tracks>

diff --git a/src/components/daterange/styles/index.scss b/src/components/daterange/styles/index.scss
@@ -60,11 +60,9 @@ $react-time-range--track--disabled: repeating-linear-gradient(
   z-index: 2;
   &__observation {
     @extend .react_time_range__data_track;
-    background-color: red;
   }
   &__climatology {
     @extend .react_time_range__data_track;
-    background-color: green;
   }
 }
 

diff --git a/src/components/daterange/sub/DataTrack.js b/src/components/daterange/sub/DataTrack.js
@@ -18,23 +18,33 @@ const baseHeight = 50;
  * @param {Object} params.index the index of this data track
  * @returns {Object} basicStyle
  **/
-const getTrackStyle = ({ source, target, count, index }) => {
+const getTrackStyle = ({ source, target, count, index, color }) => {
   const height = baseHeight / count / 2;
   const topPosition = -22 + (baseHeight / count) * index + height / 2;
+  console.log("### getTrackStyle", source, target, count, index, color);
   const basicStyle = {
     top: `${topPosition}px`,
     height: `${height}px`,
     left: `${source.percent}%`,
     width: `calc(${target.percent - source.percent}% - 1px)`,
+    backgroundColor: color,
   };
 
   return basicStyle;
 };
 
-const DataTrack = ({ source, target, getTrackProps, count, index, type }) => (
+const DataTrack = ({
+  source,
+  target,
+  getTrackProps,
+  count,
+  index,
+  type,
+  color,
+}) => (
   <div
     className={`react_time_range__data_track${type ? "__" + type : ""}`}
-    style={getTrackStyle({ source, target, count, index })}
+    style={getTrackStyle({ source, target, count, index, color })}
     {...getTrackProps()}
   />
 );

diff --git a/src/components/info/Disclaimer/Disclaimer.js b/src/components/info/Disclaimer/Disclaimer.js
@@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { Button, Modal } from "react-bootstrap";
 import "./Disclaimer.css";
 import { useStore } from "../../../state/state-store";
+import { useConfig } from "../../../state/query-hooks/use-config";
 
 function Disclaimer() {
-  const config = useStore((state) => state.config);
+  const { data: config } = useConfig();
   const [acknowledged, setAcknowledged] = useState(!config.disclaimer.enabled);
   const acknowledge = () => setAcknowledged(true);