Skip to content

Commit d40fc15

Browse files
gadomskigadomski
authored
fix: less useState and useEffect (#90)
* fix: make filtered items a component-level variable * fix: less useeffect * refactor: definitions * fix: remove some use states * fix: remove more useeffects * fix: remove more usestates
1 parent 58c8f09 commit d40fc15

File tree

4 files changed

+113
-196
lines changed

4 files changed

+113
-196
lines changed

‎src/components/filter.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
Stack,
88
Text,
99
} from "@chakra-ui/react";
10-
import { useEffect, useState } from "react";
10+
import { useState } from "react";
1111
import useStacMap from "../hooks/stac-map";
1212
import DownloadButtons from "./download";
1313

@@ -16,18 +16,9 @@ export default function Filter({
1616
}: {
1717
temporalExtents: { start: Date; end: Date };
1818
}) {
19+
const { setTemporalFilter, filteredItems } = useStacMap();
1920
const [start, setStart] = useState<number>();
2021
const [end, setEnd] = useState<number>();
21-
const { setTemporalFilter, filteredItems } = useStacMap();
22-
23-
useEffect(() => {
24-
if (start !== undefined && end !== undefined) {
25-
setTemporalFilter({
26-
start: new Date(temporalExtents.start.getTime() + start * 1000),
27-
end: new Date(temporalExtents.start.getTime() + end * 1000),
28-
});
29-
}
30-
}, [temporalExtents, setTemporalFilter, start, end]);
3122

3223
return (
3324
<Stack gap={4}>
@@ -60,8 +51,14 @@ export default function Filter({
6051
1000,
6152
]}
6253
onValueChange={(e) => {
63-
setStart(e.value[0]);
64-
setEnd(e.value[1]);
54+
const start = e.value[0];
55+
const end = e.value[1];
56+
setStart(start);
57+
setEnd(end);
58+
setTemporalFilter({
59+
start: new Date(temporalExtents.start.getTime() + start * 1000),
60+
end: new Date(temporalExtents.start.getTime() + end * 1000),
61+
});
6562
}}
6663
>
6764
<Slider.Label>Temporal filter</Slider.Label>

‎src/components/map.tsx‎

Lines changed: 58 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,9 @@ import { MapboxOverlay } from "@deck.gl/mapbox";
55
import { GeoArrowPolygonLayer } from "@geoarrow/deck.gl-layers";
66
import bboxPolygon from "@turf/bbox-polygon";
77
import { featureCollection } from "@turf/helpers";
8-
import type {
9-
BBox,
10-
Feature,
11-
FeatureCollection,
12-
GeoJSON,
13-
Polygon,
14-
} from "geojson";
8+
import type { BBox, Feature, GeoJSON } from "geojson";
159
import "maplibre-gl/dist/maplibre-gl.css";
16-
import { useEffect, useRef, useState, type RefObject } from "react";
10+
import { useEffect, useRef, type RefObject } from "react";
1711
import {
1812
Map as MaplibreMap,
1913
useControl,
@@ -63,20 +57,8 @@ export default function Map() {
6357
bbox: valueBbox,
6458
filled,
6559
} = useStacValueLayerProperties(value, collections);
66-
const [bbox, setBbox] = useState<BBox>();
6760
const small = useBreakpointValue({ base: true, md: false });
68-
69-
useEffect(() => {
70-
if (valueBbox) {
71-
setBbox(valueBbox);
72-
}
73-
}, [valueBbox]);
74-
75-
useEffect(() => {
76-
if (stacGeoparquetMetadata) {
77-
setBbox(stacGeoparquetMetadata.bbox);
78-
}
79-
}, [stacGeoparquetMetadata]);
61+
const bbox = valueBbox || stacGeoparquetMetadata?.bbox;
8062

8163
useEffect(() => {
8264
if (bbox && mapRef.current) {
@@ -222,92 +204,74 @@ function useStacValueLayerProperties(
222204
value: StacValue | undefined,
223205
collections: StacCollection[] | undefined,
224206
) {
225-
const [geojson, setGeojson] = useState<GeoJSON>();
226-
const [bbox, setBbox] = useState<BBox>();
227-
const [filled, setFilled] = useState(false);
228207
const { geojson: collectionsGeojson, bbox: collectionsBbox } =
229208
useCollectionsLayerProperties(collections);
230209

231-
useEffect(() => {
232-
if (value) {
233-
switch (value.type) {
234-
case "Catalog":
235-
setGeojson(collectionsGeojson);
236-
setBbox(collectionsBbox);
237-
setFilled(false);
238-
break;
239-
case "Collection":
240-
setGeojson(
210+
if (value) {
211+
switch (value.type) {
212+
case "Catalog":
213+
return {
214+
geojson: collectionsGeojson,
215+
bbox: collectionsBbox,
216+
filled: false,
217+
};
218+
case "Collection":
219+
return {
220+
geojson:
241221
value.extent?.spatial?.bbox &&
242-
bboxPolygon(sanitizeBbox(value.extent.spatial.bbox[0])),
243-
);
244-
setBbox(value.extent?.spatial?.bbox?.[0] as BBox);
245-
setFilled(true);
246-
break;
247-
case "Feature":
248-
setGeojson(value as GeoJSON);
249-
setBbox(value.bbox as BBox | undefined);
250-
setFilled(true);
251-
break;
252-
case "FeatureCollection":
253-
setGeojson(undefined);
254-
setBbox(undefined);
255-
setFilled(false);
256-
break;
257-
}
222+
bboxPolygon(sanitizeBbox(value.extent.spatial.bbox[0])),
223+
bbox: value.extent?.spatial?.bbox?.[0] as BBox,
224+
filled: true,
225+
};
226+
case "Feature":
227+
return {
228+
geojson: value as GeoJSON,
229+
bbox: value.bbox as BBox | undefined,
230+
filled: true,
231+
};
232+
case "FeatureCollection":
233+
return { geojson: undefined, bbox: undefined, filled: undefined };
258234
}
259-
}, [value, collectionsGeojson, bbox, collectionsBbox]);
260-
261-
return { geojson, bbox, filled };
235+
} else {
236+
return { geojson: undefined, bbox: undefined, filled: undefined };
237+
}
262238
}
263239

264240
function useCollectionsLayerProperties(
265241
collections: StacCollection[] | undefined,
266242
) {
267-
const [geojson, setGeojson] = useState<FeatureCollection<Polygon>>();
268-
const [bbox, setBbox] = useState<[number, number, number, number]>();
269-
270-
useEffect(() => {
271-
if (collections) {
272-
const bbox: [number, number, number, number] = [180, 90, -180, -90];
273-
const polygons = collections
274-
.map((collection) => {
275-
if (collection.extent?.spatial?.bbox) {
276-
const sanitizedBbox = sanitizeBbox(
277-
collection.extent.spatial.bbox[0],
278-
);
279-
if (sanitizedBbox[0] < bbox[0]) {
280-
bbox[0] = sanitizedBbox[0];
281-
}
282-
if (sanitizedBbox[1] < bbox[1]) {
283-
bbox[1] = sanitizedBbox[1];
284-
}
285-
if (sanitizedBbox[2] > bbox[2]) {
286-
bbox[2] = sanitizedBbox[2];
287-
}
288-
if (sanitizedBbox[3] > bbox[3]) {
289-
bbox[3] = sanitizedBbox[3];
290-
}
291-
return bboxPolygon(sanitizedBbox);
292-
} else {
293-
return undefined;
243+
if (collections) {
244+
const bbox: [number, number, number, number] = [180, 90, -180, -90];
245+
const polygons = collections
246+
.map((collection) => {
247+
if (collection.extent?.spatial?.bbox) {
248+
const sanitizedBbox = sanitizeBbox(collection.extent.spatial.bbox[0]);
249+
if (sanitizedBbox[0] < bbox[0]) {
250+
bbox[0] = sanitizedBbox[0];
251+
}
252+
if (sanitizedBbox[1] < bbox[1]) {
253+
bbox[1] = sanitizedBbox[1];
294254
}
295-
})
296-
.filter((bbox) => !!bbox);
297-
if (polygons.length > 0) {
298-
setGeojson(featureCollection(polygons));
299-
setBbox(bbox);
300-
} else {
301-
setGeojson(undefined);
302-
setBbox(undefined);
303-
}
255+
if (sanitizedBbox[2] > bbox[2]) {
256+
bbox[2] = sanitizedBbox[2];
257+
}
258+
if (sanitizedBbox[3] > bbox[3]) {
259+
bbox[3] = sanitizedBbox[3];
260+
}
261+
return bboxPolygon(sanitizedBbox);
262+
} else {
263+
return undefined;
264+
}
265+
})
266+
.filter((bbox) => !!bbox);
267+
if (polygons.length > 0) {
268+
return { geojson: featureCollection(polygons), bbox };
304269
} else {
305-
setGeojson(undefined);
306-
setBbox(undefined);
270+
return { geojson: undefined, bbox: undefined };
307271
}
308-
}, [collections]);
309-
310-
return { geojson, bbox };
272+
} else {
273+
return { geojson: undefined, bbox: undefined };
274+
}
311275
}
312276

313277
function sanitizeBbox(bbox: number[]) {

‎src/components/panel.tsx‎

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
LuMousePointerClick,
1616
LuSearch,
1717
} from "react-icons/lu";
18-
import type { StacLink } from "stac-ts";
1918
import useStacMap from "../hooks/stac-map";
2019
import useStacValue from "../hooks/stac-value";
2120
import Filter from "./filter";
@@ -25,12 +24,17 @@ import Value from "./value";
2524

2625
export default function Panel() {
2726
const { href, value, picked, collections, temporalExtents } = useStacMap();
28-
const [tab, setTab] = useState<string>("value");
29-
const [search, setSearch] = useState(false);
30-
const [catalogHref, setCatalogHref] = useState<string>();
31-
const [rootHref, setRootHref] = useState<string>();
27+
const rootHref =
28+
value?.type == "Collection"
29+
? value.links.find((link) => link.rel == "root")?.href
30+
: undefined;
3231
const { value: root } = useStacValue(rootHref);
33-
const [searchLinks, setSearchLinks] = useState<StacLink[]>();
32+
const [tab, setTab] = useState<string>("value");
33+
const catalogHref =
34+
value?.type == "Catalog" &&
35+
value.links.find((link) => link.rel == "self")?.href;
36+
const searchLinks = root?.links?.filter((link) => link.rel == "search");
37+
const search = !!catalogHref || !!(searchLinks && searchLinks.length > 0);
3438

3539
useEffect(() => {
3640
if (href) {
@@ -44,32 +48,6 @@ export default function Panel() {
4448
}
4549
}, [picked]);
4650

47-
useEffect(() => {
48-
if (value?.type == "Catalog") {
49-
setCatalogHref(value.links.find((link) => link.rel == "self")?.href);
50-
} else {
51-
setCatalogHref(undefined);
52-
}
53-
54-
if (value?.type == "Collection") {
55-
setRootHref(value.links.find((link) => link.rel == "root")?.href);
56-
} else {
57-
setRootHref(undefined);
58-
}
59-
}, [value]);
60-
61-
useEffect(() => {
62-
if (root) {
63-
setSearchLinks(root.links?.filter((link) => link.rel == "search"));
64-
} else {
65-
setSearchLinks(undefined);
66-
}
67-
}, [root]);
68-
69-
useEffect(() => {
70-
setSearch(!!catalogHref || !!(searchLinks && searchLinks.length > 0));
71-
}, [catalogHref, searchLinks]);
72-
7351
return (
7452
<Tabs.Root
7553
bg={"bg.muted"}

0 commit comments

Comments
 (0)