task/WG-432 rework hooks, maps and feature tree to minimize renders

react/jest.config.cjs

@@ -38,6 +38,8 @@ module.exports = {
     // Exclude secrets and other files
     '!src/secret_local*ts',
     '!src/types/react*.ts',
+    // Exclude questionaiire files as mostly 3rd party
+    '!src/components/QuestionnaireModal/questionnaireBuilder.ts',
     // Exclude build/dist directories
     '!dist/**/*',
     '!build/**/*',

react/src/components/AssetsPanel/AssetsPanel.test.tsx

@@ -7,8 +7,11 @@ import {
   createSpyHandler,
   server,
   renderInTest,
+  WithUseFeaturesComponent,
+  renderInTestWaitForQueries,
 } from '@hazmapper/test/testUtil';
 import { geoapi_project_features } from '@hazmapper/test/handlers';
+import '@testing-library/jest-dom';
 
 // Mock FeatureFileTree component since it's a complex component and tested elswhere
 jest.mock('@hazmapper/components/FeatureFileTree', () => {
@@ -19,7 +22,6 @@ jest.mock('@hazmapper/components/FeatureFileTree', () => {
 
 describe('AssetsPanel', () => {
   const defaultProps = {
-    featureCollection,
     project: projectMock,
     isPublicView: false,
   };
@@ -48,16 +50,29 @@ describe('AssetsPanel', () => {
     const { handler, spy } = createSpyHandler(geoapi_project_features);
     server.use(handler);
 
-    renderInTest(<AssetsPanel {...defaultProps} />);
+    await renderInTestWaitForQueries(
+      <WithUseFeaturesComponent>
+        <AssetsPanel {...defaultProps} />
+      </WithUseFeaturesComponent>
+    );
+
+    const exportButton = screen
+      .getByText('Export to GeoJSON')
+      .closest('button') as HTMLButtonElement;
+
+    // Wait for Export button to be enabled before clicking
+    await waitFor(() => {
+      expect(exportButton).not.toBeDisabled();
+    });
 
     // Click export button
     await act(async () => {
       fireEvent.click(screen.getByText('Export to GeoJSON'));
     });
 
-    // Wait for the API call to get features
+    // Wait for the API call to get features for download (so second request)
     await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledTimes(2);
     });
 
     // Verify the geojson blob was created with correct content

react/src/components/AssetsPanel/AssetsPanel.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import styles from './AssetsPanel.module.css';
 import FeatureFileTree from '@hazmapper/components/FeatureFileTree';
-import { FeatureCollection, Project, TapisFilePath } from '@hazmapper/types';
+import { Project, TapisFilePath } from '@hazmapper/types';
 import { Flex, Layout, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import {
   useFeatures,
+  useCurrentFeatures,
   useImportFeature,
   useNotification,
 } from '@hazmapper/hooks';
@@ -21,14 +22,14 @@ const getFilename = (projectName: string) => {
 interface DownloadFeaturesButtonProps {
   project: Project;
   isPublicView: boolean;
-  disabled: boolean;
 }
 
 const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
   project,
   isPublicView,
-  disabled,
 }) => {
+  const { data: featureCollection } = useCurrentFeatures();
+
   const { isLoading: isDownloading, refetch } = useFeatures({
     projectId: project.id,
     isPublicView: isPublicView,
@@ -61,25 +62,20 @@ const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
       }
     });
   };
-
   return (
     <Button
       loading={isDownloading}
+      data-testid="exportGeoJson"
       onClick={() => triggerDownload()}
       type="primary"
-      disabled={disabled}
+      disabled={featureCollection === undefined || !featureCollection.features}
     >
       Export to GeoJSON
     </Button>
   );
 };
 
 interface Props {
-  /**
-   * Features of map
-   */
-  featureCollection: FeatureCollection;
-
   /**
    * Whether or not the map project is a public view.
    */
@@ -94,11 +90,7 @@ interface Props {
 /**
  * A panel component that displays info on feature assets
  */
-const AssetsPanel: React.FC<Props> = ({
-  isPublicView,
-  featureCollection,
-  project,
-}) => {
+const AssetsPanel: React.FC<Props> = ({ isPublicView, project }) => {
   const notification = useNotification();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -139,17 +131,12 @@ const AssetsPanel: React.FC<Props> = ({
           </Header>
         )}
         <Content className={styles.middleSection}>
-          <FeatureFileTree
-            projectId={project.id}
-            isPublicView={isPublicView}
-            featureCollection={featureCollection}
-          />
+          <FeatureFileTree projectId={project.id} isPublicView={isPublicView} />
         </Content>
         <Footer className={styles.bottomSection}>
           <DownloadFeaturesButton
             project={project}
             isPublicView={isPublicView}
-            disabled={featureCollection?.features.length === 0}
           />
         </Footer>
       </Flex>

react/src/components/FeatureFileTree/FeatureFileTree.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { fireEvent, waitFor, act } from '@testing-library/react';
+import { fireEvent, waitFor, act, screen } 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 {
+  server,
+  renderInTestWaitForQueries,
+  WithUseFeaturesComponent,
+} from '@hazmapper/test/testUtil';
 import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 
 jest.mock('react-resize-detector', () => ({
@@ -15,7 +18,6 @@ jest.mock('react-resize-detector', () => ({
 
 describe('FeatureFileTree', () => {
   const defaultTreeProps = {
-    featureCollection: featureCollection,
     isPublicView: false,
     projectId: 1,
   };
@@ -25,15 +27,15 @@ describe('FeatureFileTree', () => {
   });
 
   it('renders feature list correctly', async () => {
-    let rendered;
-    await act(async () => {
-      rendered = renderInTest(<FeatureFileTree {...defaultTreeProps} />);
-    });
+    await renderInTestWaitForQueries(
+      <WithUseFeaturesComponent>
+        <FeatureFileTree {...defaultTreeProps} />
+      </WithUseFeaturesComponent>
+    );
 
-    const { getByText } = rendered;
-    expect(getByText('foo')).toBeDefined();
-    expect(getByText('image1.JPG')).toBeDefined();
-    expect(getByText('image2.JPG')).toBeDefined();
+    expect(screen.getByText('foo')).toBeDefined();
+    expect(screen.getByText('image1.JPG')).toBeDefined();
+    expect(screen.getByText('image2.JPG')).toBeDefined();
   });
 
   it('handles feature deletion for non-public projects', async () => {
@@ -50,17 +52,15 @@ describe('FeatureFileTree', () => {
       )
     );
 
-    let rendered;
-    await act(async () => {
-      rendered = renderInTest(
-        <FeatureFileTree {...defaultTreeProps} />,
-        `/?selectedFeature=${featureId}`
-      );
-    });
+    await renderInTestWaitForQueries(
+      <WithUseFeaturesComponent>
+        <FeatureFileTree {...defaultTreeProps} />
+      </WithUseFeaturesComponent>,
+      `/?selectedFeature=${featureId}`
+    );
 
     // Find and click delete button (as featured is selected)
-    const { getByTestId } = rendered;
-    const deleteButton = getByTestId('delete-feature-button');
+    const deleteButton = screen.getByTestId('delete-feature-button');
     await act(async () => {
       fireEvent.click(deleteButton);
     });
@@ -71,31 +71,26 @@ describe('FeatureFileTree', () => {
   });
 
   it('does not show delete button for public projects', async () => {
-    let rendered;
-    await act(async () => {
-      rendered = renderInTest(
-        <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
-        '/?selectedFeature=1'
-      );
-    });
+    await renderInTestWaitForQueries(
+      <WithUseFeaturesComponent>
+        <FeatureFileTree {...defaultTreeProps} isPublicView={true} />
+      </WithUseFeaturesComponent>
+    );
 
     // Verify delete button is not present
-    const { queryByTestId } = rendered;
-    const deleteButton = queryByTestId('delete-feature-button');
+    const deleteButton = screen.queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });
 
   it('does not show delete button when no feature is selected', async () => {
-    let rendered;
-    await act(async () => {
-      rendered = renderInTest(
+    await renderInTestWaitForQueries(
+      <WithUseFeaturesComponent>
         <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
-      );
-    });
+      </WithUseFeaturesComponent>
+    );
 
     // Verify delete button is not present
-    const { queryByTestId } = rendered;
-    const deleteButton = queryByTestId('delete-feature-button');
+    const deleteButton = screen.queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });
 });