- #178 Continue use of react-query for server state management

- Update all of preview components to use react-query hooks. - Clean up old code, work into new state model. - Add multiple guards for missing data or loading states.
pacificclimate · Feb 14, 2024 · fa03f5d · fa03f5d
1 parent a51b224
commit fa03f5d
Show file tree

Hide file tree

Showing 22 changed files with 546 additions and 224 deletions.
diff --git a/public/config.yaml b/public/config.yaml
@@ -4,11 +4,11 @@ baseMap: BC
 # sdsUrl values will be replaced by dev or prod URLs when they become ready.
 # For now, we have demo instances inside the firewall.
 # Uses monsoon database
-sdsUrl: http://docker-dev02.pcic.uvic.ca:30512
+#sdsUrl: http://docker-dev02.pcic.uvic.ca:30512
 # Uses new database
 #sdsUrl: http://docker-dev02.pcic.uvic.ca:30562
 # Local instance
-#sdsUrl: http://localhost:5000
+sdsUrl: http://localhost:5000
 
 # Currently deployed metadata backends do not respond to provinces QP.
 # When they do, we can use stationsQpProvinces and lose stationFilters
@@ -34,3 +34,8 @@ pdpDataUrl: http://docker-dev02.pcic.uvic.ca:30514
 #stationStride: undefined
 #showReloadStationsButton: false
 #timingEnabled: false
+
+# Preview Options
+plotColor: "#1f77b4"
+dataRequestDurations: [1, 3, 6, 12] # months
+dataRequestDurationsDefault: 6 # months
diff --git a/src/components/daterange/sub/DataTrack.js b/src/components/daterange/sub/DataTrack.js
@@ -21,12 +21,11 @@ const baseHeight = 50;
 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)`,
+    width: `calc(${target.percent - source.percent}% + 1px)`,
     backgroundColor: color,
   };
 

diff --git a/src/components/main/App/App.js b/src/components/main/App/App.js
@@ -1,19 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Container } from "react-bootstrap";
 import Disclaimer from "../../info/Disclaimer";
 import Header from "../Header/Header";
-import useInitializeApp from "./use-initialize-app";
 import { Outlet } from "react-router-dom";
 
 import "./App.css";
-import { useConfig } from "../../../state/query-hooks/use-config";
-
-export default function App() {
-  const { isLoading, isError } = useConfig();
-  useInitializeApp();
+import { useConfigDefaults } from "../../../state/client-server-hooks/use-config-defaults";
+export const App = () => {
+  const { isLoading, isError } = useConfigDefaults();
 
   if (isError) {
-    return <div>{configErrorMessage}</div>;
+    return <div>An Error occoured while loading the app configuration.</div>;
   }
 
   if (isLoading) {
@@ -27,4 +24,6 @@ export default function App() {
       <Outlet />
     </Container>
   );
-}
+};
+
+export default App;
diff --git a/src/components/main/App/use-initialize-app.js b/src/components/main/App/use-initialize-app.js
diff --git a/src/components/main/Body/Body.js b/src/components/main/Body/Body.js
@@ -29,6 +29,7 @@ import { useConfig } from "../../../state/query-hooks/use-config";
 import { useStations } from "../../../state/query-hooks/use-stations";
 import { useVariables } from "../../../state/query-hooks/use-variables";
 import { useFrequencies } from "../../../state/query-hooks/use-frequencies";
+import { useNetworks } from "../../../state/query-hooks/use-networks";
 
 import css from "../common.module.css";
 
@@ -51,8 +52,12 @@ function Body() {
     isLoading: isFrequenciesLoading,
     isError: isFrequenciesError,
   } = useFrequencies();
+  const {
+    data: networks,
+    isLoading: networksLoading,
+    isError: networksError,
+  } = useNetworks();
 
-  // actions should be fixed functions on the store, so they shouldn't really change
   const actions = useStore(
     useShallow((state) => ({
       setStationsLimit: state.setStationsLimit,
@@ -117,7 +122,7 @@ function Body() {
                     <Select
                       options={config.stationDebugFetchLimitsOptions}
                       value={stnsLimit}
-                      onChange={setStnsLimit}
+                      onChange={actions.setStnsLimit}
                     />
                   </Col>
                 </Row>
@@ -184,7 +189,7 @@ function Body() {
             </Tab>
 
             <Tab eventKey={"Networks"} title={"Networks"}>
-              <NetworksMetadata />
+              <NetworksMetadata networks={networks} />
             </Tab>
           </Tabs>,
         ]}

diff --git a/src/components/main/Body/station-data-tab.js b/src/components/main/Body/station-data-tab.js
@@ -0,0 +1,37 @@
+// const StationDataTab = () => {
+//   return (
+//     <>
+//       <Row {...rowClasses}>
+//         <SelectionCounts
+//           allStations={stations}
+//           selectedStations={selectedStations}
+//         />
+//         <SelectionCriteria />
+//       </Row>
+
+//       <UnselectedThings
+//         selectedNetworksOptions={
+//           filterValuesNormal.selectedNetworksOptions
+//         }
+//         selectedVariablesOptions={
+//           filterValuesNormal.selectedVariablesOptions
+//         }
+//         selectedFrequenciesOptions={
+//           filterValuesNormal.selectedFrequenciesOptions
+//         }
+//       />
+
+//       <StationData
+//         filterValues={filterValuesNormal}
+//         selectedStations={selectedStations}
+//         dataDownloadUrl={dataDownloadUrl({
+//           config,
+//           filterValues: filterValuesNormal,
+//           polygon: area,
+//         })}
+//         dataDownloadFilename={dataDownloadFilename}
+//         rowClasses={rowClasses}
+//       />
+//     </>
+//   );
+// }
diff --git a/src/components/preview/StationPreview/GraphsBlock.js b/src/components/preview/StationPreview/GraphsBlock.js
@@ -3,40 +3,91 @@ import { Card, Col, Row } from "react-bootstrap";
 import map from "lodash/fp/map";
 import PreviewGraph from "./PreviewGraph";
 import { useStore } from "../../../state/state-store";
+import { useStation } from "../../../state/query-hooks/use-station";
+import { useStationVariables } from "../../../state/query-hooks/use-station-variables";
 
 const GraphsBlock = () => {
-  var { previewStation, previewStationVariables, showLegend } = useStore(
-    (state) => ({
-      previewStation: state.previewStation,
-      previewStationVariables: state.previewStationVariables,
-      showLegend: state.showLegend,
-    }),
-  );
+  const stationId = useStore((state) => state.stationId);
+  const showLegend = useStore((state) => state.showLegend);
+  const {
+    data: previewStation,
+    isLoading: isStationLoading,
+    isStationisError,
+  } = useStation(stationId);
+  const {
+    data: previewStationVariables,
+    isLoading: isVariableLoading,
+    isError: isVariableError,
+  } = useStationVariables(stationId);
+  const selectedStartDate = useStore((state) => state.selectedStartDate);
+  const selectedEndDate = useStore((state) => state.selectedEndDate);
 
   const graphWidth = showLegend ? 8 : 12;
   const legendWidth = showLegend ? 4 : 0;
 
+  if (isStationLoading || isVariableLoading) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>Loading...</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (isStationisError || isVariableError) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>Error loading station variable data.</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (!(previewStationVariables.variables?.length ?? 0 > 0)) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>No Variables available for this station.</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
   return (
     <>
-      {map((variable) => {
-        return (
-          <Row key={`${previewStation.id}-${variable.id}`} className="mb-1">
-            <Col xs={graphWidth} className="d-flex justify-content-center">
+      {map((variable) => (
+        <Row key={`${previewStation.id}-${variable.id}`} className="mb-1">
+          <Col xs={graphWidth} className="d-flex justify-content-center">
+            {selectedStartDate && selectedEndDate && (
               <PreviewGraph variableId={variable.id} />
-            </Col>
-            {showLegend && (
-              <Col xs={legendWidth} className="d-flex">
-                <Card style={{ width: "100%" }}>
-                  <Card.Body>
-                    <Card.Title>{variable.display_name}</Card.Title>
-                    <Card.Body>{variable.description}</Card.Body>
-                  </Card.Body>
-                </Card>
-              </Col>
             )}
-          </Row>
-        );
-      })(previewStationVariables)}
+          </Col>
+          {showLegend && (
+            <Col xs={legendWidth} className="d-flex">
+              <Card style={{ width: "100%" }}>
+                <Card.Body>
+                  <Card.Title>{variable.display_name}</Card.Title>
+                  <Card.Body>{variable.description}</Card.Body>
+                </Card.Body>
+              </Card>
+            </Col>
+          )}
+        </Row>
+      ))(previewStationVariables.variables)}
     </>
   );
 };

diff --git a/src/components/preview/StationPreview/HeaderBlock.js b/src/components/preview/StationPreview/HeaderBlock.js
@@ -1,14 +1,15 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import map from "lodash/fp/map";
 import { Accordion, Table, Row, Col, Spinner } from "react-bootstrap";
+import { useStation } from "../../../state/query-hooks/use-station";
 import { useStore } from "../../../state/state-store";
 
 export const HeaderBlock = () => {
-  const { previewStation } = useStore((state) => ({
-    previewStation: state.previewStation,
-  }));
+  const stationId = useStore((state) => state.stationId);
+  const { data: previewStation, isLoading, isError } = useStation(stationId);
 
-  if (!previewStation) {
+  if (isLoading) {
     return (
       <Row>
         <Col xs={12} className="d-flex justify-content-center">
@@ -20,6 +21,28 @@ export const HeaderBlock = () => {
     );
   }
 
+  if (isError) {
+    return (
+      <Row>
+        <Col xs={12}>
+          <h1>Error loading station data.</h1>
+          <Link to="/">Return to map</Link>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (!(previewStation.histories?.length ?? 0 > 0)) {
+    return (
+      <Row>
+        <Col xs={12}>
+          <h1>Station {previewStation.id} has no histories to display.</h1>
+          <Link to="/">Return to map</Link>
+        </Col>
+      </Row>
+    );
+  }
+
   return (
     <Row>
       <Col xs={12}>