feat: create search app skeleton

refs #22

.vscode/settings.json

@@ -27,6 +27,7 @@
     "plss",
     "PROJECTCATEGORYFUNDING",
     "sgid",
+    "shapefile",
     "sitla",
     "srid",
     "tagname",

search.html

@@ -0,0 +1,5 @@
+<div class="agrc-container">
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/mainSearch.tsx"></script>
+</div>

src/App.tsx

@@ -100,7 +100,7 @@ export default function App() {
         <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
           <div className="relative flex-1">
             <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <MapContainer />
+              <MapContainer configuration="edit" />
             </ErrorBoundary>
             <Drawer
               type="tray"

src/AppSearch.tsx

@@ -0,0 +1,24 @@
+import esriConfig from '@arcgis/core/config.js';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { AreaOfInterest, MapContainer } from './components';
+
+const ErrorFallback = ({ error }: { error: Error }) => {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+};
+
+esriConfig.assetsPath = import.meta.env.MODE === 'production' ? '/wri/js/ugrc/assets' : '/js/ugrc/assets';
+
+export default function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <AreaOfInterest />
+      <MapContainer configuration="search" />
+    </ErrorBoundary>
+  );
+}

src/components/AreaOfInterest.tsx

@@ -0,0 +1,23 @@
+import { Button, ToggleButton } from '@ugrc/utah-design-system';
+import { useRef } from 'react';
+
+export const AreaOfInterest = () => {
+  const areaOfInterestNode = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="px-2">
+      <h2>Area of Interest</h2>
+      <div className="flex w-fit gap-2 py-3">
+        <span>
+          <ToggleButton onChange={(value) => (areaOfInterestNode.current!.value = value.toString())}>
+            Draw a polygon
+          </ToggleButton>
+        </span>
+        <span>
+          <Button isDisabled>Upload a shapefile</Button>
+        </span>
+      </div>
+      <input ref={areaOfInterestNode} id="aoiGeometry" type="text" className="hidden" />
+    </div>
+  );
+};

src/components/MapContainer.tsx

@@ -42,7 +42,7 @@ type SelectorOptions = {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 
-export const MapContainer = () => {
+export const MapContainer = ({ configuration }: { configuration: 'search' | 'edit' }) => {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView | null>(null);
@@ -101,7 +101,7 @@ export const MapContainer = () => {
     if (isReady) {
       // layers are stacked on top of each other in a reverse order from how they are listed
       // e.g. land ownership is on the very bottom and centroids are on the very top
-      addLayers([
+      const referenceLayers = [
         landOwnership,
         plss,
         streams,
@@ -114,14 +114,18 @@ export const MapContainer = () => {
         forestService,
         sageGrouse,
         stewardship,
-        polygons,
-        lines,
-        points,
-        centroids,
-      ]);
+      ];
+      const operationalLayers = [polygons, lines, points, centroids];
+
+      if (configuration === 'search') {
+        operationalLayers.forEach((x) => (x.visible = false));
+        addLayers(operationalLayers);
+      } else {
+        addLayers(referenceLayers.concat(operationalLayers));
+      }
     }
     setMapView(mapView.current!);
-  }, [isReady, mapView, addLayers, setMapView]);
+  }, [isReady, mapView, addLayers, setMapView, configuration]);
 
   return (
     <>

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './AreaOfInterest.tsx';
 export * from './CentroidToggle.tsx';
 export * from './FeatureData.tsx';
 export * from './Loaders.tsx';

src/mainSearch.tsx

@@ -0,0 +1,14 @@
+import '@arcgis/core/assets/esri/themes/light/main.css';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './AppSearch';
+import { MapProvider } from './components/contexts';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <MapProvider>
+      <App />
+    </MapProvider>
+  </React.StrictMode>,
+);

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
         input: {
           main: resolve(__dirname, 'map.html'),
           dev: resolve(__dirname, 'index.html'),
+          search: resolve(__dirname, 'search.html'),
         },
       },
     },