feat: get purpose values from feature service

.vscode/settings.json

@@ -28,11 +28,13 @@
     "srid",
     "tagname",
     "tailwindcss",
+    "tanstack",
     "topo",
     "ugrc",
     "usgs",
     "vite",
-    "wkid"
+    "wkid",
+    "wrimaps"
   ],
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"

package.json

@@ -37,9 +37,11 @@
   "dependencies": {
     "@arcgis/core": "^4.30.9",
     "@heroicons/react": "^2.1.5",
+    "@tanstack/react-query": "^5.52.1",
     "@ugrc/layer-selector": "^6.2.7",
     "@ugrc/utah-design-system": "^1.4.1",
     "firebase": "^10.13.0",
+    "ky": "^1.7.1",
     "react": "^18.3.1",
     "react-aria": "^3.34.3",
     "react-aria-components": "^1.3.3",
@@ -49,6 +51,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@tanstack/eslint-plugin-query": "^5.52.0",
     "@types/eslint__js": "^8.42.3",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",

src/components/Filter.tsx

@@ -1,24 +1,56 @@
 import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
+import { useQuery } from '@tanstack/react-query';
 import { Button, Checkbox, CheckboxGroup, TextField } from '@ugrc/utah-design-system';
+import ky from 'ky';
 import { useEffect } from 'react';
+import config from '../config';
 import { useMap } from './hooks';
 
-const secureServiceUrl = import.meta.env.VITE_PROXY_URL;
+const emptyDefinition = '1=0';
 
-// TODO!: replace partial list with actual list
-const purpose = ['Depletion estimate', 'Mark-Recapture', 'Disease certification', 'Genetics', 'Other'];
+type DomainValue = {
+  name: string;
+  code: string;
+};
+type Field = {
+  name: string;
+  domain: {
+    codedValues: DomainValue[];
+  };
+};
+type FeatureLayerDefinition = {
+  fields: Field[];
+};
+
+async function getPurposes(): Promise<DomainValue[]> {
+  // TODO: this should probably come from env var
+  // if we do end up staying with the public service, then it will need to be published to the test server (wrimaps.at.utah.gov)
+  const url = 'https://wrimaps.utah.gov/arcgis/rest/services/Electrofishing/Public/MapServer/1?f=json';
+  const responseJson = (await ky(url).json()) as FeatureLayerDefinition;
+
+  const purposeField = responseJson.fields.find(
+    (field: Field) => field.name === config.fieldNames.events.SURVEY_PURPOSE,
+  );
+
+  if (!purposeField) {
+    throw new Error(`${config.fieldNames.events.SURVEY_PURPOSE} field not found in ${url}`);
+  }
+
+  return purposeField.domain.codedValues;
+}
 
 export default function Filter() {
   const { addLayers, mapView } = useMap();
+  const purposeQuery = useQuery({ queryKey: ['purposes'], queryFn: getPurposes });
 
   useEffect(() => {
     if (!mapView) {
       return;
     }
 
     const stations = new FeatureLayer({
-      url: `${secureServiceUrl}/mapservice/0`,
-      id: 'stations',
+      url: 'https://wrimaps.utah.gov/arcgis/rest/services/Electrofishing/Public/MapServer/0',
+      definitionExpression: emptyDefinition,
     });
     addLayers([stations]);
   }, [addLayers, mapView]);
@@ -30,10 +62,10 @@ export default function Filter() {
         <div>
           <h3 className="text-lg font-semibold">Purpose</h3>
           <CheckboxGroup>
-            {purpose.map((p) => (
-              <div key={p} className="ml-2 flex gap-1">
-                <Checkbox type="checkbox" id={p} name={p} value={p} />
-                <label htmlFor={p}>{p}</label>
+            {purposeQuery.data?.map(({ name, code }) => (
+              <div key={code} className="ml-2 flex gap-1">
+                <Checkbox type="checkbox" id={code} name={code} value={code} />
+                <label htmlFor={code}>{name}</label>
               </div>
             ))}
           </CheckboxGroup>

src/config.js

@@ -3,6 +3,11 @@ const config = {
   WEB_MERCATOR_WKID: 3857,
   MARKER_FILL_COLOR: [234, 202, 0, 0.5],
   MARKER_OUTLINE_COLOR: [77, 42, 84, 1],
+  fieldNames: {
+    events: {
+      SURVEY_PURPOSE: 'SURVEY_PURPOSE',
+    },
+  },
 };
 
 export default config;

src/main.tsx

@@ -1,4 +1,5 @@
 import '@arcgis/core/assets/esri/themes/light/main.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -34,14 +35,18 @@ const MainErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetE
   );
 };
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ErrorBoundary FallbackComponent={MainErrorFallback} onReset={() => window.location.reload()}>
       <FirebaseAppProvider firebaseConfig={firebaseConfig}>
         <AnalyticsProvider>
-          <MapProvider>
-            <App />
-          </MapProvider>
+          <QueryClientProvider client={queryClient}>
+            <MapProvider>
+              <App />
+            </MapProvider>
+          </QueryClientProvider>
         </AnalyticsProvider>
       </FirebaseAppProvider>
     </ErrorBoundary>