refactor: lift filtering state into context

agrc · Nov 19, 2024 · ae67556 · ae67556
1 parent b3a879b
commit ae67556
Show file tree

Hide file tree

Showing 12 changed files with 736 additions and 124 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,6 +18,7 @@
     "Geospatial",
     "gnis",
     "hostingchannels",
+    "Immer",
     "lods",
     "lucide",
     "noopener",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@ugrc/layer-selector": "^6.2.9",
     "@ugrc/utah-design-system": "^1.15.1",
     "firebase": "^11.0.2",
+    "immer": "^10.1.1",
     "ky": "^1.7.2",
     "lodash.startcase": "^4.4.0",
     "react": "^18.3.1",
@@ -44,7 +45,8 @@
     "react-error-boundary": "^4.1.2",
     "react-fast-compare": "^3.2.2",
     "react-stately": "^3.33.0",
-    "tailwind-variants": "^0.3.0"
+    "tailwind-variants": "^0.3.0",
+    "use-immer": "^0.10.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -62,6 +64,7 @@
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/coverage-v8": "^2.1.5",
     "autoprefixer": "^10.4.20",
     "cpy-cli": "^5.0.0",
     "eslint": "^9.14.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -15,6 +15,7 @@ import {
   ReferenceLayer,
   TagGroupLoader,
 } from './components';
+import { FilterProvider } from './components/contexts';
 import { featureTypes, projectStatus } from './components/data/filters.js';
 import { useMap } from './components/hooks';
 import config from './config.js';
@@ -64,27 +65,21 @@ export default function App() {
                 <h5 className="dark:text-zinc-200">Search tool</h5>
               </ErrorBoundary>
             </div>
-            <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                <h5 className="dark:text-zinc-200">Project Status</h5>
-                {featureLayers.length > 0 ? (
-                  <ProjectStatus layers={featureLayers} status={projectStatus} />
-                ) : (
-                  <TagGroupLoader />
-                )}
-                {featureLayers.length > 0 && <CentroidToggle />}
-              </ErrorBoundary>
-            </div>
-            <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                <h5 className="dark:text-zinc-200">Feature Type</h5>
-                {featureLayers.length > 0 ? (
-                  <FeatureData layers={featureLayers} featureTypes={featureTypes} />
-                ) : (
-                  <TagGroupLoader />
-                )}
-              </ErrorBoundary>
-            </div>
+            <FilterProvider featureLayers={featureLayers}>
+              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+                <ErrorBoundary FallbackComponent={ErrorFallback}>
+                  <h5 className="dark:text-zinc-200">Project Status</h5>
+                  {featureLayers.length > 0 ? <ProjectStatus status={projectStatus} /> : <TagGroupLoader />}
+                  {featureLayers.length > 0 && <CentroidToggle />}
+                </ErrorBoundary>
+              </div>
+              <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
+                <ErrorBoundary FallbackComponent={ErrorFallback}>
+                  <h5 className="dark:text-zinc-200">Feature Type</h5>
+                  {featureLayers.length > 0 ? <FeatureData featureTypes={featureTypes} /> : <TagGroupLoader />}
+                </ErrorBoundary>
+              </div>
+            </FilterProvider>
             <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
               <ErrorBoundary FallbackComponent={ErrorFallback}>
                 <h5 className="dark:text-zinc-200">Map Reference data</h5>