refactor: rename to MapProvider

Author: gadomski

src/app.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import "./app.css";
 import Header from "./components/header";
 import { Map } from "./components/map";
-import { LayersProvider } from "./components/map/provider";
+import { MapProvider } from "./components/map/provider";
 import { Panel } from "./components/panel";
 import { useStacValue } from "./components/stac/hooks";
 import { isUrl } from "./components/stac/utils";
@@ -48,7 +48,7 @@ export default function App() {
   }, [error]);
 
   return (
-    <LayersProvider>
+    <MapProvider>
       <Box zIndex={0} position={"absolute"} top={0} left={0}>
         <Map></Map>
       </Box>
@@ -69,7 +69,7 @@ export default function App() {
         </Box>
       )}
       <Toaster></Toaster>
-    </LayersProvider>
+    </MapProvider>
   );
 }
 

src/components/map.tsx

@@ -7,7 +7,7 @@ import {
   useControl,
   type MapRef,
 } from "react-map-gl/maplibre";
-import { useLayers } from "./map/context";
+import { useMap } from "./map/context";
 import { useColorModeValue } from "./ui/color-mode";
 
 function DeckGLOverlay(props: DeckProps) {
@@ -22,13 +22,13 @@ export function Map() {
     "positron-gl-style",
     "dark-matter-gl-style"
   );
-  const { layers, bounds } = useLayers();
+  const { layers, fitBounds } = useMap();
 
   useEffect(() => {
-    if (bounds && mapRef.current) {
-      mapRef.current.fitBounds(bounds, { padding: 200 });
+    if (fitBounds && mapRef.current) {
+      mapRef.current.fitBounds(fitBounds, { padding: 200 });
     }
-  }, [bounds]);
+  }, [fitBounds]);
 
   return (
     <MaplibreMap

src/components/map/context.ts

@@ -2,41 +2,39 @@ import { Layer } from "@deck.gl/core";
 import type { LngLatBounds } from "maplibre-gl";
 import { createContext, useContext, type Dispatch } from "react";
 
-export type LayersAction =
+export type MapAction =
   | {
       type: "set-layers";
       layers: Layer[];
       bbox?: number[];
     }
-  | { type: "set-bbox"; bbox: number[] };
+  | { type: "set-fit-bbox"; bbox: number[] };
 
-export type LayersState = {
+export type MapState = {
   layers: Layer[];
-  bounds?: LngLatBounds;
+  fitBounds?: LngLatBounds;
 };
 
-type LayersContextType = {
-  state: LayersState;
-  dispatch: Dispatch<LayersAction>;
+type MapContextType = {
+  state: MapState;
+  dispatch: Dispatch<MapAction>;
 };
 
-export const LayersContext = createContext<LayersContextType | null>(null);
+export const LayersContext = createContext<MapContextType | null>(null);
 
-export function useLayers() {
+export function useMap() {
   const context = useContext(LayersContext);
   if (context === null) {
-    throw new Error("useLayers must be used from within a LayersProvider");
+    throw new Error("useMap must be used from within a MapProvider");
   } else {
     return context.state;
   }
 }
 
-export function useLayersDispatch() {
+export function useMapDispatch() {
   const context = useContext(LayersContext);
   if (context === null) {
-    throw new Error(
-      "useLayersDispatch must be used from within a LayersProvider"
-    );
+    throw new Error("useLayersDispatch must be used from within a MapProvider");
   } else {
     return context.dispatch;
   }

src/components/map/provider.tsx

@@ -1,23 +1,23 @@
 import { LngLatBounds } from "maplibre-gl";
 import { type ReactNode, useReducer } from "react";
-import { type LayersAction, type LayersState, LayersContext } from "./context";
+import { type MapAction, type MapState, LayersContext } from "./context";
 
-export function LayersProvider({ children }: { children: ReactNode }) {
+export function MapProvider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(reducer, { layers: [] });
   return <LayersContext value={{ state, dispatch }}>{children}</LayersContext>;
 }
 
-function reducer(state: LayersState, action: LayersAction) {
+function reducer(state: MapState, action: MapAction) {
   switch (action.type) {
     case "set-layers":
       return {
         ...state,
         layers: action.layers,
-        bounds: (action.bbox && bboxToBounds(action.bbox)) || undefined,
+        fitBounds: (action.bbox && bboxToBounds(action.bbox)) || undefined,
         picked: undefined,
       };
-    case "set-bbox":
-      return { ...state, bounds: bboxToBounds(action.bbox) };
+    case "set-fit-bbox":
+      return { ...state, fitBounds: bboxToBounds(action.bbox) };
   }
 }
 

src/components/stac/catalog.tsx

@@ -13,7 +13,7 @@ import type { BBox } from "geojson";
 import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
 import { LuFolder } from "react-icons/lu";
 import type { StacCatalog, StacCollection, StacLink } from "stac-ts";
-import { useLayersDispatch } from "../map/context";
+import { useMapDispatch } from "../map/context";
 import { CollectionCard } from "./collection";
 import { ValueInfo } from "./shared";
 import { sanitizeBbox } from "./utils";
@@ -26,7 +26,7 @@ function Collections({
   setHref: Dispatch<SetStateAction<string>>;
 }) {
   const { collections, loading, error } = useCollections(href);
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
 
   useEffect(() => {
     const collectionBbox = [-180, -90, 180, 90];

src/components/stac/collection.tsx

@@ -15,14 +15,14 @@ import { useEffect, type Dispatch, type SetStateAction } from "react";
 import { LuFolderPlus, LuUpload, LuZoomIn } from "react-icons/lu";
 import type { StacCollection } from "stac-ts";
 import { RawJsonDialogButton } from "../json";
-import { useLayersDispatch } from "../map/context";
+import { useMapDispatch } from "../map/context";
 import { Tooltip } from "../ui/tooltip";
 import { AssetCard } from "./asset";
 import { ValueInfo } from "./shared";
 import { getSelfHref, sanitizeBbox } from "./utils";
 
 export function Collection({ collection }: { collection: StacCollection }) {
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
 
   useEffect(() => {
     const bbox = sanitizeBbox(collection.extent.spatial.bbox[0]);
@@ -70,7 +70,7 @@ export function CollectionCard({
   setHref: Dispatch<SetStateAction<string>>;
 }) {
   const selfHref = getSelfHref(collection);
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
   const thumbnail = Object.values(collection.assets || {}).find((asset) =>
     asset.roles?.includes("thumbnail")
   );
@@ -117,7 +117,7 @@ export function CollectionCard({
                   size={"xs"}
                   onClick={() =>
                     dispatch({
-                      type: "set-bbox",
+                      type: "set-fit-bbox",
                       bbox: collection.extent.spatial.bbox[0],
                     })
                   }

src/components/stac/item.tsx

@@ -3,12 +3,12 @@ import { GeoJsonLayer } from "@deck.gl/layers";
 import { useEffect } from "react";
 import { LuFile } from "react-icons/lu";
 import type { StacItem } from "stac-ts";
-import { useLayersDispatch } from "../map/context";
+import { useMapDispatch } from "../map/context";
 import { AssetCard } from "./asset";
 import { ValueInfo } from "./shared";
 
 export function Item({ item }: { item: StacItem }) {
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
 
   useEffect(() => {
     if (item.geometry) {

src/components/stac/stac-geoparquet.tsx

@@ -25,7 +25,7 @@ import {
   type SetStateAction,
 } from "react";
 import * as stacWasm from "../../stac-wasm";
-import { useLayersDispatch } from "../map/context";
+import { useMapDispatch } from "../map/context";
 import { toaster } from "../ui/toaster";
 import { useDuckDbQuery } from "./hooks";
 import type { StacValue } from "./types";
@@ -62,7 +62,7 @@ function Layer({
     path,
     select: "ST_AsWKB(geometry) as geometry, id",
   });
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
 
   useEffect(() => {
     if (table) {
@@ -123,7 +123,7 @@ function SummaryDataList({ path }: { path: string }) {
       "COUNT(*) as count, MIN(bbox.xmin) as xmin, MIN(bbox.ymin) as ymin, MAX(bbox.xmax) as xmax, MAX(bbox.ymax) as ymax",
   });
   const [summary, setSummary] = useState<Summary | undefined>();
-  const dispatch = useLayersDispatch();
+  const dispatch = useMapDispatch();
 
   useEffect(() => {
     if (table) {
@@ -137,7 +137,7 @@ function SummaryDataList({ path }: { path: string }) {
 
   useEffect(() => {
     if (summary?.bbox) {
-      dispatch({ type: "set-bbox", bbox: summary.bbox });
+      dispatch({ type: "set-fit-bbox", bbox: summary.bbox });
     }
   }, [summary?.bbox, dispatch]);