clearing district selections works, also FlyTo initial map view also …

…working

app/components/ClearFilter/ClearFilterButton.tsx

@@ -1,13 +1,10 @@
-import { ClearFilterBtnProps, ClearFilterBtn } from ".";
+// import { ClearFilterBtnProps, ClearFilterBtn } from ".";
 
-export interface ClearFileringBtnProps
-  extends Pick<ClearFilterBtnProps, "clearFiltering"> {
-    path: string | null;
-  }
+// export interface ClearFileringBtnProps
+//   extends Pick<ClearFilterBtnProps, "onClear"> {
+//     path: string | null;
+//   }
 
-export function ClearFilteringBtn({path} :ClearFileringBtnProps) {
-  return <ClearFilterBtn
-    path={
-      null
-    }
-}
+// export function ClearFilteringBtn({path} :ClearFileringBtnProps) {
+//   return <ClearFilterBtn />
+// }

app/components/ClearFilter/index.tsx

@@ -1,18 +1,34 @@
+import { useState } from "react";
 import { Button } from "@nycplanning/streetscape";
+import { useNavigate } from "@remix-run/react";
 
 export interface ClearFilterBtnProps {
-  clearFiltering: (path: string) => void;
-  path: string | null;
+  onClear: () => void;
+  buttonLabel?: string;
 }
 
-export function ClearFilterBtn({ clearFiltering, path }: ClearFilterBtnProps) {
+export function ClearFilterBtn({
+  onClear,
+  buttonLabel = "Reset Selections",
+}: ClearFilterBtnProps) {
+  const [isClearing, setIsClearing] = useState(false);
+  const navigate = useNavigate();
+
+  const handleClear = async () => {
+    setIsClearing(true);
+    try {
+      await onClear();
+      navigate("/");
+    } catch (error) {
+      console.error("Error clearing selections:", error);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
   return (
-    <Button
-      width="full"
-      mt={4}
-      onClick={path !== null ? () => clearFiltering(path) : () => undefined}
-    >
-      Clear Filtering
+    <Button width="full" mt={4} onClick={handleClear} isDisabled={isClearing}>
+      {buttonLabel}
     </Button>
   );
 }

app/components/atlas.client.tsx

@@ -18,15 +18,20 @@ import type { MapView, MapViewState } from "@deck.gl/core";
 export const MAX_ZOOM = 20;
 export const MIN_ZOOM = 10;
 
-const INITIAL_VIEW_STATE = {
+export const INITIAL_VIEW_STATE = {
   longitude: -74.0008,
   latitude: 40.7018,
   zoom: 10,
   bearing: 0,
   pitch: 0,
 };
 
-export function Atlas() {
+interface AtlasProps {
+  viewState: MapViewState;
+  setViewState: React.Dispatch<React.SetStateAction<MapViewState>>;
+}
+
+export function Atlas({ viewState, setViewState }: AtlasProps) {
   const capitalProjectsLayer = useCapitalProjectsLayer();
   const capitalProjectBudgetedGeoJsonLayer =
     useCapitalProjectBudgetedGeoJsonLayer();
@@ -52,8 +57,6 @@ export function Atlas() {
     style: widgetStyles,
   });
 
-  const [viewState, setViewState] = useState<MapViewState>(INITIAL_VIEW_STATE);
-
   return (
     <DeckGL<MapView>
       viewState={viewState}

app/root.tsx

@@ -18,7 +18,7 @@ import {
   useRouteError,
   useSearchParams,
 } from "@remix-run/react";
-import { Atlas } from "./components/atlas.client";
+import { Atlas, INITIAL_VIEW_STATE } from "./components/atlas.client";
 import { ClientOnly } from "remix-utils/client-only";
 import { Overlay } from "./components/Overlay";
 import {
@@ -43,7 +43,7 @@ import {
 } from "./components/GoToDistrictBtn";
 import { GoToCommunityDistrictBtn } from "./components/GoToDistrictBtn/GoToCommunityDistrictBtn";
 import { WelcomePanel } from "./components/WelcomePanel";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   analytics,
   initializeMatomoTagManager,
@@ -57,6 +57,7 @@ import {
   SearchParamChanges,
 } from "./utils/types";
 import { ClearFilterBtn } from "./components/ClearFilter";
+import { FlyToInterpolator, MapViewState } from "@deck.gl/core";
 
 export const links: LinksFunction = () => {
   return [
@@ -157,6 +158,7 @@ export default function App() {
     initializeMatomoTagManager("SmoWWpiD");
     initFullStoryAnalytics();
   }, []);
+  const [viewState, setViewState] = useState<MapViewState>(INITIAL_VIEW_STATE);
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -203,13 +205,28 @@ export default function App() {
 
   const goToNextDistrict = goToDistrict(pathname);
 
+  const clearSelections = () => {
+    setSearchParams({});
+    updateSearchParams({
+      districtType: null,
+      boroughId: null,
+      districtId: null,
+    });
+
+    setViewState({
+      ...INITIAL_VIEW_STATE,
+      transitionDuration: 2000,
+      transitionInterpolator: new FlyToInterpolator(),
+    });
+  };
+
   return (
     <Document>
       <StreetscapeProvider>
         <ClientOnly>
           {() => (
             <>
-              <Atlas />{" "}
+              <Atlas viewState={viewState} setViewState={setViewState} />{" "}
               <Overlay>
                 <Flex
                   direction={"column"}
@@ -268,7 +285,7 @@ export default function App() {
                     )}
                   </FilterMenu>
                   <WelcomePanel />
-                  <ClearFilterBtn />
+                  <ClearFilterBtn onClear={clearSelections} />
                 </Flex>
                 <Flex
                   direction={{ base: "column-reverse", lg: "column" }}