Refactor and clean up code duplication

app/src/AppRouter.tsx

@@ -32,8 +32,6 @@ const AppRouter: React.FC = () => {
         layout={AuthLayout}
         title={getTitle('Projects')}
       />
-      {/* Temporary map route for demo */}
-      <AppRoute protected path="/map" component={ProjectsRouter} layout={AuthLayout} title={getTitle('Map')} />
       <AppRoute title="*" path="*" component={() => <Redirect to="/page-not-found" />} />
     </Switch>
   );

app/src/components/layout/Header.tsx

@@ -23,10 +23,6 @@ const Header: React.FC = () => {
         <Link to="/projects" color={'inherit'}>
           Projects
         </Link>
-        {/* Temporary map link for demo */}
-        <Link to="/map" color={'inherit'}>
-          Map
-        </Link>
       </Toolbar>
     </AppBar>
   );

app/src/components/layout/__snapshots__/Header.test.tsx.snap

@@ -42,12 +42,6 @@ exports[`NotFoundPage renders correctly 1`] = `
       >
         Projects
       </a>
-      <a
-        color="inherit"
-        href="/map"
-      >
-        Map
-      </a>
     </div>
   </header>
 </DocumentFragment>

app/src/features/projects/ProjectsRouter.tsx

@@ -1,10 +1,8 @@
-import MapContainer from 'components/map/MapContainer';
 import CreateProjectPage from 'features/projects/CreateProjectPage';
 import ProjectsLayout from 'features/projects/ProjectsLayout';
 import ProjectsListPage from 'features/projects/list/ProjectsListPage';
 import ProjectPage from 'features/projects/view/ProjectPage';
-import { Feature } from 'geojson';
-import React, { useState } from 'react';
+import React from 'react';
 import { Redirect, Switch } from 'react-router';
 import AppRoute from 'utils/AppRoute';
 import PrivateRoute from 'utils/PrivateRoute';
@@ -58,19 +56,10 @@ const ProjectsRouter: React.FC<IProjectsRouterProps> = (props) => {
         component={ProjectPage}
         componentProps={props}
       />
-      {/* Temporary map route for demo */}
-      <PrivateRoute exact layout={ProjectsLayout} path="/map" component={MapPage} componentProps={props} />
       {/*  Catch any unknown routes, and re-direct to the not found page */}
       <AppRoute title="*" path="/projects/*" component={() => <Redirect to="/page-not-found" />} />
     </Switch>
   );
 };
 
 export default ProjectsRouter;
-
-// Temporary map page component for demo
-const MapPage: React.FC = () => {
-  const [geometry, setGeometry] = useState<Feature[]>([]);
-
-  return <MapContainer mapId="1" geometryState={{ geometry, setGeometry }} />;
-};

app/src/features/projects/view/ProjectAttachments.test.tsx

@@ -1,40 +1,12 @@
 import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
-import { IProjectWithDetails } from 'interfaces/project-interfaces';
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
 import React from 'react';
 import { Router } from 'react-router';
 import ProjectAttachments from './ProjectAttachments';
 
 const history = createMemoryHistory();
 
-const projectWithDetailsData: IProjectWithDetails = {
-  id: 1,
-  project: {
-    project_name: 'Test Project Name',
-    project_type: '1',
-    start_date: '1998-10-10',
-    end_date: '2021-02-26',
-    climate_change_initiatives: [],
-    project_activities: []
-  },
-  location: {
-    location_description: 'here and there',
-    regions: [],
-    geometry: []
-  },
-  objectives: {
-    objectives: 'Et ad et in culpa si',
-    caveats: 'sjwer bds'
-  },
-  coordinator: {
-    first_name: 'Amanda',
-    last_name: 'Christensen',
-    email_address: '[email protected]',
-    coordinator_agency: 'Amanda and associates',
-    share_contact_details: 'true'
-  }
-};
-
 describe('ProjectAttachments', () => {
   it('renders correctly', () => {
     const { asFragment } = render(

app/src/features/projects/view/ProjectDetails.test.tsx

@@ -1,68 +1,23 @@
 import { render } from '@testing-library/react';
-import { IProjectWithDetails } from 'interfaces/project-interfaces';
-import { IGetAllCodesResponse } from 'interfaces/useBioHubApi-interfaces';
+import { codes } from 'test-helpers/projectCodes';
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
 import React from 'react';
 import ProjectDetails from './ProjectDetails';
 
-const projectWithDetailsData: IProjectWithDetails = {
-  id: 1,
-  project: {
-    project_name: 'Test Project Name',
-    project_type: '1',
-    start_date: '1998-10-10',
-    end_date: '2021-02-26',
-    climate_change_initiatives: [1],
-    project_activities: [1]
-  },
-  location: {
-    location_description: 'here and there',
-    regions: [],
-    geometry: [
-      {
-        id: 'myGeo',
-        type: 'Feature',
-        geometry: {
-          type: 'Point',
-          coordinates: [125.6, 10.1]
-        },
-        properties: {
-          name: 'Dinagat Islands'
-        }
-      }
-    ]
-  },
-  objectives: {
-    objectives: 'Et ad et in culpa si',
-    caveats: 'sjwer bds'
-  },
-
-  coordinator: {
-    first_name: 'Amanda',
-    last_name: 'Christensen',
-    email_address: '[email protected]',
-    coordinator_agency: 'Amanda and associates',
-    share_contact_details: 'true'
-  }
-};
-
-const codes: IGetAllCodesResponse = {
-  coordinator_agency: [],
-  management_action_type: [],
-  climate_change_initiative: [{ id: 1, name: 'climate code' }],
-  first_nations: [],
-  funding_source: [],
-  investment_action_category: [],
-  activity: [{ id: 1, name: 'activity code' }],
-  project_type: [],
-  region: [],
-  species: [],
-  iucn_conservation_action_level_1_classification: [],
-  iucn_conservation_action_level_2_subclassification: [],
-  iucn_conservation_action_level_3_subclassification: []
-};
-
 describe('ProjectDetails', () => {
   it('renders correctly', () => {
+    projectWithDetailsData.location.geometry.push({
+      id: 'myGeo',
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [125.6, 10.1]
+      },
+      properties: {
+        name: 'Dinagat Islands'
+      }
+    });
+
     const { asFragment } = render(<ProjectDetails projectWithDetailsData={projectWithDetailsData} codes={codes} />);
 
     expect(asFragment()).toMatchSnapshot();

app/src/features/projects/view/ProjectPage.test.tsx

@@ -3,6 +3,7 @@ import { createMemoryHistory } from 'history';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { IProjectWithDetails } from 'interfaces/project-interfaces';
 import { IGetAllCodesResponse } from 'interfaces/useBioHubApi-interfaces';
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { Router } from 'react-router';
@@ -43,33 +44,7 @@ describe('ProjectPage', () => {
 
   it('renders project page when project is loaded', async () => {
     await act(async () => {
-      mockBiohubApi().getProject.mockResolvedValue({
-        id: 1,
-        project: {
-          project_name: 'Test Project Name',
-          project_type: '1',
-          start_date: '1998-10-10',
-          end_date: '2021-02-26',
-          climate_change_initiatives: [],
-          project_activities: []
-        },
-        location: {
-          location_description: 'here and there',
-          regions: [],
-          geometry: []
-        },
-        objectives: {
-          objectives: 'Et ad et in culpa si',
-          caveats: 'sjwer bds'
-        },
-        coordinator: {
-          first_name: 'Amanda',
-          last_name: 'Christensen',
-          email_address: '[email protected]',
-          coordinator_agency: 'Amanda and associates',
-          share_contact_details: 'true'
-        }
-      });
+      mockBiohubApi().getProject.mockResolvedValue(projectWithDetailsData);
 
       mockBiohubApi().getAllCodes.mockResolvedValue({
         activity: [{ id: 1, name: 'activity 1' }],

app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap

@@ -189,7 +189,9 @@ exports[`ProjectDetails renders correctly 1`] = `
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
-                />
+                >
+                  Type name
+                </h6>
               </div>
             </div>
             <div
@@ -342,7 +344,9 @@ exports[`ProjectDetails renders correctly 1`] = `
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
-                />
+                >
+                  Region 1, Region 2
+                </h6>
               </div>
             </div>
             <div
@@ -363,7 +367,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
                 >
-                  here and there
+                  Location description
                 </h6>
               </div>
             </div>

app/src/features/projects/view/components/GeneralInformation.test.tsx

@@ -1,54 +1,9 @@
 import { render } from '@testing-library/react';
-import { IProjectWithDetails } from 'interfaces/project-interfaces';
-import { IGetAllCodesResponse } from 'interfaces/useBioHubApi-interfaces';
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
+import { codes } from 'test-helpers/projectCodes';
 import React from 'react';
 import GeneralInformation from './GeneralInformation';
 
-const projectWithDetailsData: IProjectWithDetails = {
-  id: 1,
-  project: {
-    project_name: 'Test Project Name',
-    project_type_name: 'Type name',
-    project_type: '1',
-    start_date: '1998-10-10',
-    end_date: '2021-02-26',
-    climate_change_initiatives: [1],
-    project_activities: [1]
-  },
-  location: {
-    location_description: 'here and there',
-    regions: [],
-    geometry: []
-  },
-  objectives: {
-    objectives: 'Et ad et in culpa si',
-    caveats: 'sjwer bds'
-  },
-  coordinator: {
-    first_name: 'Amanda',
-    last_name: 'Christensen',
-    email_address: '[email protected]',
-    coordinator_agency: 'Amanda and associates',
-    share_contact_details: 'true'
-  }
-};
-
-const codes: IGetAllCodesResponse = {
-  coordinator_agency: [],
-  management_action_type: [],
-  climate_change_initiative: [{ id: 1, name: 'climate code' }],
-  first_nations: [],
-  funding_source: [],
-  investment_action_category: [],
-  activity: [{ id: 1, name: 'activity code' }],
-  project_type: [],
-  region: [],
-  species: [],
-  iucn_conservation_action_level_1_classification: [],
-  iucn_conservation_action_level_2_subclassification: [],
-  iucn_conservation_action_level_3_subclassification: []
-};
-
 describe('GeneralInformation', () => {
   it('renders correctly', () => {
     const { asFragment } = render(<GeneralInformation projectWithDetailsData={projectWithDetailsData} codes={codes} />);

app/src/features/projects/view/components/LocationBoundary.test.tsx

@@ -2,28 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import LocationBoundary from './LocationBoundary';
 import { Feature } from 'geojson';
-import { IProjectWithDetails } from 'interfaces/project-interfaces';
-
-const projectWithDetailsData: IProjectWithDetails = {
-  id: 1,
-  project: {
-    project_name: 'Test Project Name',
-    project_type: '1',
-    start_date: '1998-10-10',
-    end_date: '2021-02-26',
-    climate_change_initiatives: [],
-    project_activities: []
-  },
-  location: {
-    location_description: 'Location description',
-    regions: ['Region 1', 'Region 2'],
-    geometry: []
-  },
-  objectives: {
-    objectives: 'Et ad et in culpa si',
-    caveats: 'sjwer bds'
-  }
-};
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
 
 describe('LocationBoundary', () => {
   test('matches the snapshot when the geometry is a single polygon in valid GeoJSON format', () => {

app/src/features/projects/view/components/ProjectCoordinator.test.tsx

@@ -1,37 +1,8 @@
 import { render } from '@testing-library/react';
-import { IProjectWithDetails } from 'interfaces/project-interfaces';
+import { projectWithDetailsData } from 'test-helpers/projectWithDetailsData';
 import React from 'react';
 import ProjectCoordinator from './ProjectCoordinator';
 
-const projectWithDetailsData: IProjectWithDetails = {
-  id: 1,
-  project: {
-    project_name: 'Test Project Name',
-    project_type_name: 'Type name',
-    project_type: '1',
-    start_date: '1998-10-10',
-    end_date: '2021-02-26',
-    climate_change_initiatives: [1],
-    project_activities: [1]
-  },
-  location: {
-    location_description: 'here and there',
-    regions: [],
-    geometry: []
-  },
-  objectives: {
-    objectives: 'Et ad et in culpa si',
-    caveats: 'sjwer bds'
-  },
-  coordinator: {
-    first_name: 'Amanda',
-    last_name: 'Christensen',
-    email_address: '[email protected]',
-    coordinator_agency: 'Amanda and associates',
-    share_contact_details: 'true'
-  }
-};
-
 describe('ProjectCoordinator', () => {
   it('renders correctly', () => {
     const { asFragment } = render(<ProjectCoordinator projectWithDetailsData={projectWithDetailsData} />);