Loading configuration...
;
}
diff --git a/src/components/main/App/app-initialization.js b/src/components/main/App/use-initialize-app.js
similarity index 74%
rename from src/components/main/App/app-initialization.js
rename to src/components/main/App/use-initialize-app.js
index c6a97d6a..d7750a15 100644
--- a/src/components/main/App/app-initialization.js
+++ b/src/components/main/App/use-initialize-app.js
@@ -3,8 +3,10 @@ import { useEffect } from "react";
import L from "leaflet";
import { setLethargicMapScrolling } from "../../../utils/leaflet-extensions";
import { setTimingEnabled } from "../../../utils/timing";
+import { useConfig } from "../../../state/query-hooks/use-config";
function initializeApp(config) {
+ console.log("### initializeApp", config);
if (config === null) {
return;
}
@@ -38,8 +40,16 @@ function initializeApp(config) {
setTimingEnabled(config.timingEnabled);
}
-export default function useInitializeApp(config) {
+/**
+ * This hook loads the config and initializes the app. Primarily setting up Map, Scrolling behaviour and debug timing.
+ *
+ * @returns {void}
+ */
+export default function useInitializeApp() {
+ const { data } = useConfig();
useEffect(() => {
- initializeApp(config);
- }, [config]);
+ if (data) {
+ initializeApp(data);
+ }
+ }, [data]);
}
diff --git a/src/components/main/Body/Body.js b/src/components/main/Body/Body.js
index aae93721..48b1eec3 100644
--- a/src/components/main/Body/Body.js
+++ b/src/components/main/Body/Body.js
@@ -1,10 +1,7 @@
import React, { useEffect, useMemo, useState } from "react";
-import { useImmerByKey } from "../../../hooks";
-import { Button, Card, Col, Row, Tab, Tabs } from "react-bootstrap";
+import { Col, Row, Tab, Tabs } from "react-bootstrap";
import Select from "react-select";
-import css from "../common.module.css";
-
import logger from "../../../logger";
import {
dataDownloadFilename,
@@ -28,48 +25,41 @@ import StationFilters, {
import baseMaps from "../../maps/baseMaps";
import { useStore } from "../../../state/state-store";
import { useShallow } from "zustand/react/shallow";
+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 css from "../common.module.css";
logger.configure({ active: true });
function Body() {
- const config = useStore((state) => state.config);
-
- // metadata are the data items that can be watched for changes and
- // should probably cause a re-render.
- const metadata = useStore(
- useShallow((state) => ({
- networks: state.networks,
- stations: state.stations,
- variables: state.variables,
- frequencies: state.frequencies,
- stationsLimit: state.stationsLimit,
- })),
- );
+ const { data: config } = useConfig();
+ const {
+ data: stations,
+ isLoading: isStationsLoading,
+ isError: isStationsError,
+ } = useStations();
+ const {
+ data: variables,
+ isLoading: isVariablesLoading,
+ isError: isVariablesError,
+ } = useVariables();
+ const {
+ data: frequencies,
+ isLoading: isFrequenciesLoading,
+ isError: isFrequenciesError,
+ } = useFrequencies();
// actions should be fixed functions on the store, so they shouldn't really change
const actions = useStore(
useShallow((state) => ({
setStationsLimit: state.setStationsLimit,
reloadStations: state.reloadStations,
- loadStations: state.loadStations,
- loadMetadata: state.loadMetadata,
- isConfigLoaded: state.isConfigLoaded,
})),
);
- // load data once on initial render after config is loaded
- useEffect(() => {
- if (actions.isConfigLoaded()) {
- actions.loadMetadata();
- }
- }, [config]);
-
- useEffect(() => {
- if (config) {
- actions.loadStations();
- }
- }, [config]);
-
// Station filtering state and setters
const {
normal: filterValuesNormal,
@@ -88,9 +78,9 @@ function Body() {
() =>
stationFilter({
filterValues: filterValuesTransitional,
- metadata,
+ metadata: { stations, variables },
}),
- [filterValuesTransitional, metadata],
+ [filterValuesTransitional, stations, variables],
);
const selectedStations = useMemo(
@@ -109,9 +99,8 @@ function Body() {
@@ -147,7 +136,6 @@ function Body() {
@@ -155,20 +143,17 @@ function Body() {
-
+
@@ -199,7 +184,7 @@ function Body() {
-
+
,
]}
diff --git a/src/components/main/Header/Header.js b/src/components/main/Header/Header.js
index 421824db..23199461 100644
--- a/src/components/main/Header/Header.js
+++ b/src/components/main/Header/Header.js
@@ -1,10 +1,10 @@
import React from "react";
import { Row, Col } from "react-bootstrap";
-import { useStore } from "../../../state/state-store";
import "./Header.css";
+import { useConfig } from "../../../state/query-hooks/use-config";
function Header() {
- const config = useStore((state) => state.config);
+ const { data: config } = useConfig();
return (
diff --git a/src/components/maps/StationMap/StationMap.js b/src/components/maps/StationMap/StationMap.js
index a26a5e17..da41c6fb 100644
--- a/src/components/maps/StationMap/StationMap.js
+++ b/src/components/maps/StationMap/StationMap.js
@@ -54,16 +54,16 @@ import { MapSpinner } from "pcic-react-leaflet-components";
import { useImmer } from "use-immer";
import { useStore } from "../../../state/state-store";
import { StationRefresh } from "../StationRefresh/StationRefresh";
+import { useConfig } from "../../../state/query-hooks/use-config";
logger.configure({ active: true });
const smtimer = getTimer("StationMarker timing");
smtimer.log();
function StationMap({
+ stations,
BaseMap,
initialViewport,
- stations,
- metadata,
onSetArea = () => {},
userShapeStyle = {
color: "#f49853",
@@ -76,7 +76,7 @@ function StationMap({
// should be true if and only if slow updates to the map are pending
// due to an external update.
}) {
- const config = useStore((state) => state.config);
+ const { data: config } = useConfig();
const userShapeLayerRef = useRef();
// TODO: Remove
@@ -121,7 +121,6 @@ function StationMap({
() => (
@@ -187,8 +186,6 @@ StationMap = React.memo(StationMap);
StationMap.propTypes = {
BaseMap: PropTypes.func.isRequired,
initialViewport: PropTypes.object.isRequired,
- stations: PropTypes.array.isRequired,
- metadata: PropTypes.object,
onSetArea: PropTypes.func,
};
diff --git a/src/components/maps/StationMarkers/StationMarkers.js b/src/components/maps/StationMarkers/StationMarkers.js
index ef053b18..ec6e27f7 100644
--- a/src/components/maps/StationMarkers/StationMarkers.js
+++ b/src/components/maps/StationMarkers/StationMarkers.js
@@ -16,6 +16,8 @@ import {
} from "../../../utils/station-info";
import chroma from "chroma-js";
import { getTimer } from "../../../utils/timing";
+import { useStations } from "../../../state/query-hooks/use-stations";
+import { useNetworks } from "../../../state/query-hooks/use-networks";
logger.configure({ active: true });
const timer = getTimer("StationMarkers timing");
@@ -27,14 +29,14 @@ const timer = getTimer("StationMarkers timing");
// triggers popup. Creates the popup (once; effectively memoized).
// `popup`: Lazily created popup to be rendered inside marker. Value `null`
// until `addPopup` called; value is the popup thereafter.
-const useLazyPopup = ({ station, metadata }) => {
+const useLazyPopup = ({ station }) => {
const markerRef = useRef();
const [popup, setPopup] = useState(null);
// Callback: create popup if not already created.
const addPopup = () => {
if (popup === null) {
- setPopup();
+ setPopup();
}
};
@@ -61,9 +63,8 @@ function LocationMarker({
location, // One location of the station (there may be several)
color, // Station colour; overrides default color in markerOptions
markerOptions = defaultMarkerOptions,
- metadata,
}) {
- const { markerRef, popup, addPopup } = useLazyPopup({ station, metadata });
+ const { markerRef, popup, addPopup } = useLazyPopup({ station });
return (
-
+
{popup}
);
@@ -83,7 +84,6 @@ LocationMarker.propTypes = {
station: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
color: PropTypes.string,
- metadata: PropTypes.object.isRequired,
markerOptions: PropTypes.object,
};
@@ -92,9 +92,8 @@ function MultiLocationMarker({
locations, // Unique locations for station.
color, // Station colour; applied to all location markers
polygonOptions, // Multi-location marker is a polygon; this is its format
- metadata,
}) {
- const { markerRef, popup, addPopup } = useLazyPopup({ station, metadata });
+ const { markerRef, popup, addPopup } = useLazyPopup({ station });
if (locations.length <= 1) {
return null;
@@ -107,7 +106,7 @@ function MultiLocationMarker({
positions={locations}
onClick={addPopup}
>
-
+
{popup}
);
@@ -116,20 +115,19 @@ MultiLocationMarker.propTypes = {
station: PropTypes.object.isRequired,
locations: PropTypes.array.isRequired,
color: PropTypes.string.isRequired,
- metadata: PropTypes.object.isRequired,
polygonOptions: PropTypes.object,
};
function OneStationMarkers({
station,
- metadata,
markerOptions = defaultMarkerOptions,
// TODO: Improve or remove
polygonOptions = {
color: "green",
},
}) {
- const network = stationNetwork(metadata.networks, station);
+ const { data: networks } = useNetworks();
+ const network = stationNetwork(networks, station);
const locationColor = network?.color;
const polygonColor = chroma(network?.color ?? polygonOptions.color)
.alpha(0.3)
@@ -148,7 +146,6 @@ function OneStationMarkers({
station={station}
location={location}
color={locationColor}
- metadata={metadata}
markerOptions={markerOptions}
key={location.id}
/>
@@ -160,7 +157,6 @@ function OneStationMarkers({
locations={uniqLatLngs}
color={polygonColor}
polygonOptions={polygonOptions}
- metadata={metadata}
/>