From 05f631ca80b58d4f0c2252aaf97cd7b6032698de Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 18:11:16 -0600
Subject: [PATCH 1/5] Refactor useDelete and use params

---
 .../DeleteMapModal/DeleteMapModal.tsx         |  4 +-
 react/src/hooks/features/useDeleteFeature.ts  |  4 +-
 react/src/hooks/projects/useProjects.ts       | 12 ++++--
 react/src/requests.ts                         | 39 ++-----------------
 4 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/react/src/components/DeleteMapModal/DeleteMapModal.tsx b/react/src/components/DeleteMapModal/DeleteMapModal.tsx
index ee814844..4fb2db1e 100644
--- a/react/src/components/DeleteMapModal/DeleteMapModal.tsx
+++ b/react/src/components/DeleteMapModal/DeleteMapModal.tsx
@@ -20,13 +20,13 @@ const DeleteMapModal = ({
     isLoading: isDeletingProject,
     isError,
     isSuccess,
-  } = useDeleteProject(project.id);
+  } = useDeleteProject();
   const handleClose = () => {
     parentToggle();
   };
 
   const handleDeleteProject = () => {
-    deleteProject(undefined, {});
+    deleteProject({ projectId: project.id });
   };
 
   return (
diff --git a/react/src/hooks/features/useDeleteFeature.ts b/react/src/hooks/features/useDeleteFeature.ts
index 990a6cc1..63252e86 100644
--- a/react/src/hooks/features/useDeleteFeature.ts
+++ b/react/src/hooks/features/useDeleteFeature.ts
@@ -1,5 +1,5 @@
 import { useQueryClient } from 'react-query';
-import { useDeleteWithParams } from '@hazmapper/requests';
+import { useDelete } from '@hazmapper/requests';
 
 type DeleteFeatureParams = {
   projectId: number;
@@ -9,7 +9,7 @@ type DeleteFeatureParams = {
 export function useDeleteFeature() {
   const queryClient = useQueryClient();
 
-  return useDeleteWithParams<void, DeleteFeatureParams>({
+  return useDelete<void, DeleteFeatureParams>({
     endpoint: ({ projectId, featureId }) =>
       `/projects/${projectId}/features/${featureId}/`,
     options: {
diff --git a/react/src/hooks/projects/useProjects.ts b/react/src/hooks/projects/useProjects.ts
index 025cbc91..486ced4d 100644
--- a/react/src/hooks/projects/useProjects.ts
+++ b/react/src/hooks/projects/useProjects.ts
@@ -81,11 +81,15 @@ export function useProjectsWithDesignSafeInformation(): UseQueryResult<
   } as UseQueryResult<Project[]>;
 }
 
-export const useDeleteProject = (projectId: number) => {
+type DeleteProjectParams = {
+  projectId: number;
+};
+
+export const useDeleteProject = () => {
   const queryClient = useQueryClient();
-  const endpoint = `/projects/${projectId}/`;
-  return useDelete<void>({
-    endpoint,
+
+  return useDelete<void, DeleteProjectParams>({
+    endpoint: ({ projectId }) => `/projects/${projectId}/`,
     apiService: ApiService.Geoapi,
     options: {
       onSuccess: () => {
diff --git a/react/src/requests.ts b/react/src/requests.ts
index 11dc937a..ff1d6881 100644
--- a/react/src/requests.ts
+++ b/react/src/requests.ts
@@ -157,40 +157,7 @@ export function usePost<RequestType, ResponseType>({
   return useMutation<ResponseType, AxiosError, RequestType>(postUtil, options);
 }
 
-type UseDeleteParams<ResponseType> = {
-  endpoint: string;
-  options?: UseMutationOptions<ResponseType, AxiosError>;
-  apiService?: ApiService;
-};
-
-export function useDelete<ResponseType>({
-  endpoint,
-  options = {},
-  apiService = ApiService.Geoapi,
-}: UseDeleteParams<ResponseType>) {
-  const client = axios;
-  const state = store.getState();
-  const configuration = useAppConfiguration();
-
-  useEnsureAuthenticatedUserHasValidTapisToken();
-
-  const baseUrl = getBaseApiUrl(apiService, configuration);
-  const headers = getHeaders(apiService, state.auth);
-
-  const deleteUtil = async () => {
-    const response = await client.delete<ResponseType>(
-      `${baseUrl}${endpoint}`,
-      {
-        headers: headers,
-      }
-    );
-    return response.data;
-  };
-
-  return useMutation<ResponseType, AxiosError>(deleteUtil, options);
-}
-
-type UseDeleteWithParams<ResponseType, Variables> = {
+type UseDeleteParams<ResponseType, Variables> = {
   endpoint: string | ((variables: Variables) => string);
   options?: Omit<
     UseMutationOptions<ResponseType, AxiosError, Variables>,
@@ -199,11 +166,11 @@ type UseDeleteWithParams<ResponseType, Variables> = {
   apiService?: ApiService;
 };
 
-export function useDeleteWithParams<ResponseType, Variables>({
+export function useDelete<ResponseType, Variables>({
   endpoint,
   options = {},
   apiService = ApiService.Geoapi,
-}: UseDeleteWithParams<ResponseType, Variables>) {
+}: UseDeleteParams<ResponseType, Variables>) {
   const client = axios;
   const state = store.getState();
   const configuration = useAppConfiguration();

From 8364d1735380403ad7f5884e0859cca4797a0662 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 18:36:22 -0600
Subject: [PATCH 2/5] Rename isPublic to isPublicView for clarity

---
 react/src/AppRouter.tsx                       |  2 +-
 .../components/AssetsPanel/AssetsPanel.tsx    | 10 ++++-----
 .../FeatureFileTree/FeatureFileTree.test.tsx  |  6 ++---
 .../FeatureFileTree/FeatureFileTree.tsx       |  6 ++---
 .../ManageMapProjectModal.tsx                 |  6 ++---
 .../MapProjectNavBar.test.tsx                 |  4 ++--
 .../MapProjectNavBar/MapProjectNavBar.tsx     |  6 ++---
 react/src/hooks/features/useFeatures.ts       |  9 ++++----
 react/src/hooks/projects/useProjects.ts       |  6 ++---
 react/src/hooks/tileServers/useTileServers.ts |  8 +++----
 react/src/pages/MapProject/MapProject.tsx     | 22 +++++++++----------
 11 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/react/src/AppRouter.tsx b/react/src/AppRouter.tsx
index dab56191..5fe9e83b 100644
--- a/react/src/AppRouter.tsx
+++ b/react/src/AppRouter.tsx
@@ -65,7 +65,7 @@ function AppRouter() {
             </ProtectedRoute>
           }
         />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublic />} />
+        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublicView />} />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
         <Route
           path={ROUTES.STREETVIEW_CALLBACK}
diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx
index 64989237..333c49f2 100644
--- a/react/src/components/AssetsPanel/AssetsPanel.tsx
+++ b/react/src/components/AssetsPanel/AssetsPanel.tsx
@@ -56,9 +56,9 @@ interface Props {
   featureCollection: FeatureCollection;
 
   /**
-   * Whether or not the map project is public.
+   * Whether or not the map project is a public view.
    */
-  isPublic: boolean;
+  isPublicView: boolean;
 
   /**
    * active project id
@@ -70,7 +70,7 @@ interface Props {
  * A panel component that displays info on feature assets
  */
 const AssetsPanel: React.FC<Props> = ({
-  isPublic,
+  isPublicView,
   featureCollection,
   projectId,
 }) => {
@@ -81,8 +81,8 @@ const AssetsPanel: React.FC<Props> = ({
       </div>
       <div className={styles.middleSection}>
         <FeatureFileTree
-          projectId={projectId}
-          isPublic={isPublic}
+          projectId={project.id}
+          isPublicView={isPublicView}
           featureCollection={featureCollection}
         />
       </div>
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
index acf52002..9f9b40f1 100644
--- a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
@@ -26,7 +26,7 @@ const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
 describe('FeatureFileTree', () => {
   const defaultProps = {
     featureCollection: featureCollection,
-    isPublic: false,
+    isPublicView: false,
     projectId: 1,
   };
 
@@ -73,7 +73,7 @@ describe('FeatureFileTree', () => {
 
   it('does not show delete button for public projects', () => {
     const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublic={true} />,
+      <FeatureFileTree {...defaultProps} isPublicView={true} />,
       { route: '/?selectedFeature=1' }
     );
 
@@ -84,7 +84,7 @@ describe('FeatureFileTree', () => {
 
   it('does not show delete button when no feature is selected', () => {
     const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublic={true} />
+      <FeatureFileTree {...defaultProps} isPublicView={false} />
     );
 
     // Verify delete button is not present
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.tsx b/react/src/components/FeatureFileTree/FeatureFileTree.tsx
index 1652597f..c41d17a0 100644
--- a/react/src/components/FeatureFileTree/FeatureFileTree.tsx
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.tsx
@@ -31,7 +31,7 @@ interface FeatureFileTreeProps {
   /**
    * Whether or not the map project is public.
    */
-  isPublic: boolean;
+  isPublicView: boolean;
 
   /**
    * active project id
@@ -44,7 +44,7 @@ interface FeatureFileTreeProps {
  */
 const FeatureFileTree: React.FC<FeatureFileTreeProps> = ({
   featureCollection,
-  isPublic,
+  isPublicView,
   projectId,
 }) => {
   const { mutate: deleteFeature, isLoading } = useDeleteFeature();
@@ -169,7 +169,7 @@ const FeatureFileTree: React.FC<FeatureFileTreeProps> = ({
           <FeatureIcon featureType={featureNode.featureType} />
         )}
         <span className={styles.fileName}>{featureNode.name}</span>
-        {!isPublic && isSelected && (
+        {!isPublicView && isSelected && (
           <Button
             size="small"
             type="primary"
diff --git a/react/src/components/ManageMapProjectModal/ManageMapProjectModal.tsx b/react/src/components/ManageMapProjectModal/ManageMapProjectModal.tsx
index 5616709f..507574c0 100644
--- a/react/src/components/ManageMapProjectModal/ManageMapProjectModal.tsx
+++ b/react/src/components/ManageMapProjectModal/ManageMapProjectModal.tsx
@@ -4,11 +4,11 @@ import styles from './ManageMapProjectModal.module.css';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 interface ManageMapProjectModalProps {
-  isPublic: boolean;
+  isPublicView: boolean;
 }
 
 const ManageMapProjectModal: React.FC<ManageMapProjectModalProps> = ({
-  isPublic,
+  isPublicView,
 }) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -24,7 +24,7 @@ const ManageMapProjectModal: React.FC<ManageMapProjectModalProps> = ({
       <ModalHeader toggle={closeModal}>TODO</ModalHeader>
       <ModalBody>
         <div className={styles.root}>
-          Manage Map Project TODO, isPublic: {isPublic}
+          Manage Map Project TODO, isPublicView: {isPublicView}
         </div>
       </ModalBody>
     </Modal>
diff --git a/react/src/components/MapProjectNavBar/MapProjectNavBar.test.tsx b/react/src/components/MapProjectNavBar/MapProjectNavBar.test.tsx
index 633879b7..98d4a4b5 100644
--- a/react/src/components/MapProjectNavBar/MapProjectNavBar.test.tsx
+++ b/react/src/components/MapProjectNavBar/MapProjectNavBar.test.tsx
@@ -7,7 +7,7 @@ describe('MapProjectNavBar', () => {
   it('renders the public nav items for public maps', () => {
     const { getByText, queryByText } = render(
       <BrowserRouter>
-        <MapProjectNavBar isPublic={true} />
+        <MapProjectNavBar isPublicView={true} />
       </BrowserRouter>
     );
     expect(getByText('Assets')).toBeDefined();
@@ -22,7 +22,7 @@ describe('MapProjectNavBar', () => {
   it('renders all nav items for non-public maps', () => {
     const { getByText } = render(
       <BrowserRouter>
-        <MapProjectNavBar isPublic={false} />
+        <MapProjectNavBar isPublicView={false} />
       </BrowserRouter>
     );
 
diff --git a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
index 9898e54a..6d8cdd19 100644
--- a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
+++ b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
@@ -59,10 +59,10 @@ const navItems: NavItem[] = [
 ];
 
 interface NavBarPanelProps {
-  isPublic?: boolean;
+  isPublicView?: boolean;
 }
 
-const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublic = false }) => {
+const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView = false }) => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const activePanel = queryParams.get(queryPanelKey);
@@ -70,7 +70,7 @@ const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublic = false }) => {
   return (
     <div className={styles.root}>
       {navItems
-        .filter((item) => (isPublic ? item.showWhenPublic : true))
+        .filter((item) => (isPublicView ? item.showWhenPublic : true))
         .map((item) => {
           const updatedQueryParams = new URLSearchParams(location.search);
 
diff --git a/react/src/hooks/features/useFeatures.ts b/react/src/hooks/features/useFeatures.ts
index 2d69fc78..7bb0f5a7 100644
--- a/react/src/hooks/features/useFeatures.ts
+++ b/react/src/hooks/features/useFeatures.ts
@@ -4,18 +4,19 @@ import { useGet } from '@hazmapper/requests';
 
 interface UseFeaturesParams {
   projectId: number;
-  isPublic: boolean;
+  isPublicView: boolean;
   assetTypes: string[];
   options?: object;
 }
 
 export const useFeatures = ({
   projectId,
-  isPublic,
+  isPublicView,
   assetTypes,
   options = {},
 }: UseFeaturesParams): UseQueryResult<FeatureCollection> => {
-  const featuresRoute = isPublic ? 'public-projects' : 'projects';
+  // TODO can be reworked as /projects can be used and /public-projects can be removed since we are no longer a WSO2 API
+  const featuresRoute = isPublicView ? 'public-projects' : 'projects';
   let endpoint = `/${featuresRoute}/${projectId}/features/`;
   if (assetTypes?.length) {
     endpoint += `?assetType=${assetTypes.join(',')}`;
@@ -32,7 +33,7 @@ export const useFeatures = ({
 
   const query = useGet<FeatureCollection>({
     endpoint,
-    key: ['activeProjectFeatures', { projectId, isPublic, assetTypes }],
+    key: ['activeProjectFeatures', { projectId, isPublicView, assetTypes }],
     options: { ...defaultQueryOptions, ...options },
   });
   return query;
diff --git a/react/src/hooks/projects/useProjects.ts b/react/src/hooks/projects/useProjects.ts
index 486ced4d..601a0da8 100644
--- a/react/src/hooks/projects/useProjects.ts
+++ b/react/src/hooks/projects/useProjects.ts
@@ -17,16 +17,16 @@ export const useProjects = (): UseQueryResult<Project[]> => {
 
 interface UseProjectParams {
   projectUUID?: string;
-  isPublic: boolean;
+  isPublicView: boolean;
   options: object;
 }
 
 export const useProject = ({
   projectUUID,
-  isPublic,
+  isPublicView,
   options,
 }: UseProjectParams): UseQueryResult<Project> => {
-  const projectRoute = isPublic ? 'public-projects' : 'projects';
+  const projectRoute = isPublicView ? 'public-projects' : 'projects';
   const endpoint = `/${projectRoute}/?uuid=${projectUUID}`;
   const query = useGet<Project>({
     endpoint,
diff --git a/react/src/hooks/tileServers/useTileServers.ts b/react/src/hooks/tileServers/useTileServers.ts
index a5378ef9..7eaccf60 100644
--- a/react/src/hooks/tileServers/useTileServers.ts
+++ b/react/src/hooks/tileServers/useTileServers.ts
@@ -4,21 +4,21 @@ import { TileServerLayer } from '@hazmapper/types';
 
 interface UseTileServerParams {
   projectId?: number;
-  isPublic: boolean;
+  isPublicView: boolean;
   options?: object;
 }
 
 export const useTileServers = ({
   projectId,
-  isPublic,
+  isPublicView,
   options = {},
 }: UseTileServerParams): UseQueryResult<TileServerLayer[]> => {
-  const tileServersRoute = isPublic ? 'public-projects' : 'projects';
+  const tileServersRoute = isPublicView ? 'public-projects' : 'projects';
   const endpoint = `/${tileServersRoute}/${projectId}/tile-servers/`;
 
   const query = useGet<TileServerLayer[]>({
     endpoint,
-    key: ['tile-servers', { projectId, isPublic }],
+    key: ['tile-servers', { projectId, isPublicView }],
     options,
   });
 
diff --git a/react/src/pages/MapProject/MapProject.tsx b/react/src/pages/MapProject/MapProject.tsx
index 8029ba16..8cf18dc3 100644
--- a/react/src/pages/MapProject/MapProject.tsx
+++ b/react/src/pages/MapProject/MapProject.tsx
@@ -19,13 +19,13 @@ interface MapProjectProps {
    * Whether or not the map project is public.
    * @default false
    */
-  isPublic?: boolean;
+  isPublicView?: boolean;
 }
 
 /**
  * A component that displays a map project including initial loading/error components
  */
-const MapProject: React.FC<MapProjectProps> = ({ isPublic = false }) => {
+const MapProject: React.FC<MapProjectProps> = ({ isPublicView = false }) => {
   const { projectUUID } = useParams();
 
   const {
@@ -34,7 +34,7 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublic = false }) => {
     error,
   } = useProject({
     projectUUID,
-    isPublic,
+    isPublicView,
     options: { enabled: !!projectUUID },
   });
 
@@ -61,7 +61,7 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublic = false }) => {
     );
   }
 
-  return <LoadedMapProject isPublic={isPublic} activeProject={activeProject} />;
+  return <LoadedMapProject isPublicView={isPublicView} activeProject={activeProject} />;
 };
 
 interface LoadedMapProject {
@@ -73,7 +73,7 @@ interface LoadedMapProject {
   /**
    * Whether or not the map project is public.
    */
-  isPublic;
+  isPublicView;
 }
 
 /**
@@ -81,7 +81,7 @@ interface LoadedMapProject {
  */
 const LoadedMapProject: React.FC<LoadedMapProject> = ({
   activeProject,
-  isPublic,
+  isPublicView,
 }) => {
   const [selectedAssetTypes, setSelectedAssetTypes] = useState<string[]>(
     Object.keys(assetTypeOptions)
@@ -112,7 +112,7 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
     error: featuresError,
   } = useFeatures({
     projectId: activeProject.id,
-    isPublic,
+    isPublicView,
     assetTypes: formattedAssetTypes,
   });
 
@@ -122,7 +122,7 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
     error: tileServerLayersError,
   } = useTileServers({
     projectId: activeProject.id,
-    isPublic,
+    isPublicView,
   });
 
   const location = useLocation();
@@ -157,8 +157,8 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
           <div className={styles.panelContainer}>
             {activePanel === Panel.Assets && (
               <AssetsPanel
-                projectId={activeProject.id}
-                isPublic={isPublic}
+                project={activeProject}
+                isPublicView={isPublicView}
                 featureCollection={featureCollection}
               />
             )}
@@ -175,7 +175,7 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
           </div>
         )}
         {activePanel === Panel.Manage && (
-          <ManageMapProjectModal isPublic={isPublic} />
+          <ManageMapProjectModal isPublicView={isPublicView} />
         )}
         <div className={styles.map}>
           <Map

From f2dffb712c703b5e6b94ec6b68c23bde2da77cf1 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 18:36:47 -0600
Subject: [PATCH 3/5] Downloaded geojson file is named after project name

---
 .../AssetsPanel/AssetsPanel.test.tsx          |  5 ++--
 .../components/AssetsPanel/AssetsPanel.tsx    | 28 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/react/src/components/AssetsPanel/AssetsPanel.test.tsx b/react/src/components/AssetsPanel/AssetsPanel.test.tsx
index f39c6990..f971ceb6 100644
--- a/react/src/components/AssetsPanel/AssetsPanel.test.tsx
+++ b/react/src/components/AssetsPanel/AssetsPanel.test.tsx
@@ -2,6 +2,7 @@ import React, { act } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import AssetsPanel from './AssetsPanel';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
+import { projectMock } from '@hazmapper/__fixtures__/projectFixtures';
 import { useFeatures } from '@hazmapper/hooks';
 
 jest.mock('@hazmapper/hooks', () => ({
@@ -18,8 +19,8 @@ jest.mock('@hazmapper/components/FeatureFileTree', () => {
 describe('AssetsPanel', () => {
   const defaultProps = {
     featureCollection,
-    projectId: 1,
-    isPublic: false,
+    project: projectMock,
+    isPublicView: false,
   };
 
   beforeEach(() => {
diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx
index 333c49f2..84745e97 100644
--- a/react/src/components/AssetsPanel/AssetsPanel.tsx
+++ b/react/src/components/AssetsPanel/AssetsPanel.tsx
@@ -1,22 +1,26 @@
 import React from 'react';
 import styles from './AssetsPanel.module.css';
 import FeatureFileTree from '@hazmapper/components/FeatureFileTree';
-import { FeatureCollection } from '@hazmapper/types';
+import { FeatureCollection, Project } from '@hazmapper/types';
 import { Button } from '@tacc/core-components';
 import { useFeatures } from '@hazmapper/hooks';
 
+const getFilename = (projectName: string) => {
+  // Convert to lowercase filename based on projectName
+  const sanitizedString = projectName.toLowerCase().replace(/[^a-z0-9]/g, '_');
+  return `${sanitizedString}.json`;
+};
+
 interface DownloadFeaturesButtonProps {
-  projectId: number;
-  isPublic: boolean;
+  project: Project;
 }
 
 const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
-  projectId,
-  isPublic,
+  project,
 }) => {
   const { isLoading: isDownloading, refetch: triggerDownload } = useFeatures({
-    projectId,
-    isPublic,
+    projectId: project.id,
+    isPublicView: project.public,
     assetTypes: [], // Empty array to get all features
     options: {
       enabled: false, // Only fetch when triggered by user clicking button
@@ -31,7 +35,7 @@ const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
         const url = window.URL.createObjectURL(blob);
         const link = document.createElement('a');
         link.href = url;
-        link.download = `hazmapper.json`;
+        link.download = getFilename(project.name);
 
         document.body.appendChild(link);
         link.click();
@@ -61,9 +65,9 @@ interface Props {
   isPublicView: boolean;
 
   /**
-   * active project id
+   * active project
    */
-  projectId: number;
+  project: Project;
 }
 
 /**
@@ -72,7 +76,7 @@ interface Props {
 const AssetsPanel: React.FC<Props> = ({
   isPublicView,
   featureCollection,
-  projectId,
+  project,
 }) => {
   return (
     <div className={styles.root}>
@@ -87,7 +91,7 @@ const AssetsPanel: React.FC<Props> = ({
         />
       </div>
       <div className={styles.bottomSection}>
-        <DownloadFeaturesButton projectId={projectId} isPublic={isPublic} />
+        <DownloadFeaturesButton project={project} />
       </div>
     </div>
   );

From 0a157c1a8f85fbeeb1d67796410333c1d5b09a7b Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 20:48:59 -0600
Subject: [PATCH 4/5] Reformat

---
 react/jest.setup.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/react/jest.setup.ts b/react/jest.setup.ts
index da882238..fb4c2a98 100644
--- a/react/jest.setup.ts
+++ b/react/jest.setup.ts
@@ -53,8 +53,9 @@ export function shouldIgnoreError(args: any[]): boolean {
 
 beforeAll(() => {
   // Establish mocking of APIs before all tests
-  server.listen({ onUnhandledRequest: 'error' });
-
+  server.listen({
+    onUnhandledRequest: 'error',
+  });
   const originalError = console.error;
 
   jest.spyOn(console, 'error').mockImplementation((...args: any[]) => {

From 5861549716da480a5821039af414c18819b97aa0 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 20:49:36 -0600
Subject: [PATCH 5/5] Rework tests to use msw and renderInTest

---
 react/src/AppRouter.tsx                       |  5 +-
 .../FeatureFileTree/FeatureFileTree.test.tsx  | 69 ++++++++-----------
 .../MapProjectNavBar/MapProjectNavBar.tsx     |  4 +-
 react/src/pages/MapProject/MapProject.tsx     |  7 +-
 react/src/test/testUtil.tsx                   |  3 +
 5 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/react/src/AppRouter.tsx b/react/src/AppRouter.tsx
index 5fe9e83b..5a16e3c1 100644
--- a/react/src/AppRouter.tsx
+++ b/react/src/AppRouter.tsx
@@ -65,7 +65,10 @@ function AppRouter() {
             </ProtectedRoute>
           }
         />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublicView />} />
+        <Route
+          path={ROUTES.PUBLIC_PROJECT}
+          element={<MapProject isPublicView />}
+        />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
         <Route
           path={ROUTES.STREETVIEW_CALLBACK}
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
index 9f9b40f1..d1640b57 100644
--- a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
+import { server, renderInTest } from '@hazmapper/test/testUtil';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
-import { useDeleteFeature } from '@hazmapper/hooks';
-
-// Mock the hooks
-jest.mock('@hazmapper/hooks', () => ({
-  useDeleteFeature: jest.fn(),
-}));
+import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 
 jest.mock('react-resize-detector', () => ({
   useResizeDetector: () => ({
@@ -17,14 +13,8 @@ jest.mock('react-resize-detector', () => ({
   }),
 }));
 
-const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
-  return {
-    ...render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>),
-  };
-};
-
 describe('FeatureFileTree', () => {
-  const defaultProps = {
+  const defaultTreeProps = {
     featureCollection: featureCollection,
     isPublicView: false,
     projectId: 1,
@@ -32,16 +22,11 @@ describe('FeatureFileTree', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: jest.fn(),
-      isLoading: false,
-    }));
   });
 
   it('renders feature list correctly', () => {
-    const { getByText } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />
+    const { getByText } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />
     );
 
     expect(getByText('foo')).toBeDefined();
@@ -49,32 +34,38 @@ describe('FeatureFileTree', () => {
     expect(getByText('image2.JPG')).toBeDefined();
   });
 
-  it('handles feature deletion for non-public projects', () => {
-    const deleteFeatureMock = jest.fn();
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: deleteFeatureMock,
-      isLoading: false,
-    }));
+  it('handles feature deletion for non-public projects', async () => {
+    const featureId = 1;
+    let wasDeleted = false;
+
+    server.use(
+      http.delete(
+        `${testDevConfiguration.geoapiUrl}/projects/${defaultTreeProps.projectId}/features/${featureId}/`,
+        () => {
+          wasDeleted = true;
+          return HttpResponse.json({}, { status: 200 });
+        }
+      )
+    );
 
-    const { getByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />,
-      { route: '/?selectedFeature=1' }
+    const { getByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />,
+      `/?selectedFeature=${featureId}`
     );
 
     // Find and click delete button (as featured is selected)
     const deleteButton = getByTestId('delete-feature-button');
     fireEvent.click(deleteButton);
 
-    expect(deleteFeatureMock).toHaveBeenCalledWith({
-      projectId: 1,
-      featureId: 1,
+    await waitFor(() => {
+      expect(wasDeleted).toBeTruthy();
     });
   });
 
   it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={true} />,
-      { route: '/?selectedFeature=1' }
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+      '/?selectedFeature=1'
     );
 
     // Verify delete button is not present
@@ -83,8 +74,8 @@ describe('FeatureFileTree', () => {
   });
 
   it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={false} />
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
     );
 
     // Verify delete button is not present
diff --git a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
index 6d8cdd19..9f78fc65 100644
--- a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
+++ b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
@@ -62,7 +62,9 @@ interface NavBarPanelProps {
   isPublicView?: boolean;
 }
 
-const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView = false }) => {
+const MapProjectNavBar: React.FC<NavBarPanelProps> = ({
+  isPublicView = false,
+}) => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const activePanel = queryParams.get(queryPanelKey);
diff --git a/react/src/pages/MapProject/MapProject.tsx b/react/src/pages/MapProject/MapProject.tsx
index 8cf18dc3..5220149c 100644
--- a/react/src/pages/MapProject/MapProject.tsx
+++ b/react/src/pages/MapProject/MapProject.tsx
@@ -61,7 +61,12 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublicView = false }) => {
     );
   }
 
-  return <LoadedMapProject isPublicView={isPublicView} activeProject={activeProject} />;
+  return (
+    <LoadedMapProject
+      isPublicView={isPublicView}
+      activeProject={activeProject}
+    />
+  );
 };
 
 interface LoadedMapProject {
diff --git a/react/src/test/testUtil.tsx b/react/src/test/testUtil.tsx
index c03a4985..db33b37a 100644
--- a/react/src/test/testUtil.tsx
+++ b/react/src/test/testUtil.tsx
@@ -17,6 +17,9 @@ export const testQueryClient = new QueryClient({
       staleTime: 0,
       useErrorBoundary: true,
     },
+    mutations: {
+      retry: false,
+    },
   },
 });