Add start case to measurement/marking labels.

Add common names, etc, to animal card when editing existing animal.
Fix route from survey animal table when clicking action menu 'edit'.

app/src/features/surveys/animals/AnimalRouter.tsx

@@ -1,6 +1,7 @@
 import { ProjectRoleRouteGuard } from 'components/security/RouteGuards';
 import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
 import { DialogContextProvider } from 'contexts/dialogContext';
+import { TaxonomyContextProvider } from 'contexts/taxonomyContext';
 import { CreateCapturePage } from 'features/surveys/animals/profile/captures/capture-form/create/CreateCapturePage';
 import { EditCapturePage } from 'features/surveys/animals/profile/captures/capture-form/edit/EditCapturePage';
 import { CreateMortalityPage } from 'features/surveys/animals/profile/mortality/mortality-form/create/CreateMortalityPage';
@@ -60,7 +61,9 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <EditAnimalPage />
+          <TaxonomyContextProvider>
+            <EditAnimalPage />
+          </TaxonomyContextProvider>
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 

app/src/features/surveys/animals/animal-form/components/AnimalFormContainer.tsx

@@ -98,6 +98,7 @@ export const AnimalFormContainer = (props: IAnimalFormProps) => {
   return (
     <Formik
       innerRef={formikRef}
+      enableReinitialize={true}
       initialValues={initialAnimalData}
       validationSchema={AnimalFormYupSchema}
       validateOnBlur={false}

app/src/features/surveys/animals/animal-form/components/general-information/AnimalGeneralInformationForm.tsx

@@ -31,6 +31,7 @@ export const AnimalGeneralInformationForm = (props: IAnimalGeneralInformationFor
             label="Species"
             required={false}
             disabled={isEdit}
+            defaultSpecies={values.species ?? undefined}
             handleSpecies={(species) => {
               setFieldValue('species', species);
               setFieldValue('ecological_units', []);

app/src/features/surveys/animals/animal-form/edit/EditAnimalPage.tsx

@@ -14,11 +14,17 @@ import { AnimalFormContainer } from 'features/surveys/animals/animal-form/compon
 import { AnimalSex } from 'features/surveys/view/survey-animals/animal';
 import { FormikProps } from 'formik';
 import { APIError } from 'hooks/api/useAxios';
-import { useAnimalPageContext, useDialogContext, useProjectContext, useSurveyContext } from 'hooks/useContext';
+import {
+  useAnimalPageContext,
+  useDialogContext,
+  useProjectContext,
+  useSurveyContext,
+  useTaxonomyContext
+} from 'hooks/useContext';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import { SKIP_CONFIRMATION_DIALOG, useUnsavedChangesDialog } from 'hooks/useUnsavedChangesDialog';
 import { ICreateEditAnimalRequest } from 'interfaces/useCritterApi.interface';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Prompt, useHistory, useParams } from 'react-router';
 import { Link as RouterLink } from 'react-router-dom';
 
@@ -31,11 +37,11 @@ export const EditAnimalPage = () => {
   const history = useHistory();
 
   const critterbaseApi = useCritterbaseApi();
-
   const surveyContext = useSurveyContext();
   const projectContext = useProjectContext();
   const dialogContext = useDialogContext();
   const animalPageContext = useAnimalPageContext();
+  const taxonomyContext = useTaxonomyContext();
 
   const urlParams: Record<string, string | number | undefined> = useParams();
   const surveyCritterId: number | undefined = Number(urlParams['survey_critter_id']);
@@ -55,6 +61,14 @@ export const EditAnimalPage = () => {
 
   const critter = animalPageContext.critterDataLoader.data;
 
+  useEffect(() => {
+    if (!critter?.itis_tsn) {
+      return;
+    }
+
+    taxonomyContext.getCachedSpeciesTaxonomyById(critter.itis_tsn);
+  }, [critter?.itis_tsn, taxonomyContext]);
+
   // Loading spinner if the data later hasn't updated to the selected animal yet
   if (!critter || animalPageContext.selectedAnimal?.critterbase_critter_id !== critter.critter_id) {
     return <CircularProgress className="pageProgress" size={40} />;
@@ -206,11 +220,9 @@ export const EditAnimalPage = () => {
                 critter_id: critter.critter_id,
                 nickname: critter.animal_id,
                 species: {
+                  ...taxonomyContext.getCachedSpeciesTaxonomyById(critter.itis_tsn),
                   tsn: critter.itis_tsn,
-                  commonNames: [''],
-                  scientificName: critter.itis_scientific_name,
-                  rank: '',
-                  kingdom: ''
+                  scientificName: critter.itis_scientific_name
                 },
                 ecological_units: critter.collection_units.map((unit) => ({ ...unit, critter_id: critter.critter_id })),
                 wildlife_health_id: critter.wlh_id,

app/src/features/surveys/animals/profile/components/MeasurementDetails.tsx

@@ -3,6 +3,7 @@ import grey from '@mui/material/colors/grey';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { IQualitativeMeasurementResponse, IQuantitativeMeasurementResponse } from 'interfaces/useCritterApi.interface';
+import startCase from 'lodash-es/startCase';
 import { v4 } from 'uuid';
 
 interface IMeasurementDetailsProps {
@@ -33,7 +34,7 @@ export const MeasurementDetails = (props: IMeasurementDetailsProps) => {
         {allMeasurements.map((measurement) => (
           <Paper variant="outlined" sx={{ px: 3, py: 2, bgcolor: grey[100], mt: 1 }} key={v4()}>
             <Typography fontWeight={700}>
-              {measurement.measurement_name}: <Typography component="span">{measurement.value}</Typography>
+              {startCase(measurement.measurement_name)}: <Typography component="span">{measurement.value}</Typography>
             </Typography>
           </Paper>
         ))}

app/src/features/surveys/animals/profile/markings/MarkingCard.tsx

@@ -6,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import startCase from 'lodash-es/startCase';
 
 interface IMarkingCardProps {
   editable: boolean;
@@ -40,7 +41,7 @@ export const MarkingCard = (props: IMarkingCardProps) => {
     <Paper variant="outlined" sx={{ px: 3, py: 2, bgcolor: grey[100] }}>
       <Box position="relative" display="flex">
         <Typography component="dd" fontWeight={700}>
-          {marking_type_label}
+          {startCase(marking_type_label)}
         </Typography>
         {editable && (
           <IconButton

app/src/features/surveys/view/SurveyAnimals.tsx

@@ -150,7 +150,7 @@ const SurveyAnimals: React.FC = () => {
               setOpenRemoveCritterDialog(true);
             }}
             onEditCritter={() => {
-              history.push(`animals/?critter_id=${selectedCritterId}`);
+              history.push(`animals/${selectedCritterId}/edit`);
             }}
             onMapOpen={() => {
               setOpenViewTelemetryDialog(true);