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] 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>
   );