Tweaks

app/src/features/surveys/observations/create/CreateObservationPage.tsx

@@ -222,71 +222,71 @@ const CreateObservationPage = () => {
 
   return (
     <>
-      <TaxonomyContextProvider>
-        <Prompt when={enableCancelCheck} message={locationChangeInterceptor} />
-        <PageHeader
-          title="Create Observation"
-          breadCrumbJSX={
-            <Breadcrumbs aria-label="breadcrumb" separator={'>'}>
-              <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/`}>
-                {projectName}
-              </Link>
-              <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/surveys/${surveyId}`}>
-                {surveyName}
-              </Link>
-              <Link
-                component={RouterLink}
-                underline="hover"
-                to={`/admin/projects/${projectId}/surveys/${surveyId}/observations`}>
-                Observations
-              </Link>
-              <Typography variant="body2" component="span" color="textSecondary" aria-current="page">
-                Create Observation
-              </Typography>
-            </Breadcrumbs>
-          }
-          buttonJSX={
-            <>
-              <LoadingButton
-                loading={isSaving}
-                type="submit"
-                color="primary"
-                variant="contained"
-                onClick={() => formikRef.current?.submitForm()}
-                data-testid="submit-observation-button">
-                Save and Exit
-              </LoadingButton>
-              <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
-                Cancel
-              </Button>
-            </>
-          }
-        />
+      <Prompt when={enableCancelCheck} message={locationChangeInterceptor} />
+      <PageHeader
+        title="Create Observation"
+        breadCrumbJSX={
+          <Breadcrumbs aria-label="breadcrumb" separator={'>'}>
+            <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/`}>
+              {projectName}
+            </Link>
+            <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/surveys/${surveyId}`}>
+              {surveyName}
+            </Link>
+            <Link
+              component={RouterLink}
+              underline="hover"
+              to={`/admin/projects/${projectId}/surveys/${surveyId}/observations`}>
+              Observations
+            </Link>
+            <Typography variant="body2" component="span" color="textSecondary" aria-current="page">
+              Create Observation
+            </Typography>
+          </Breadcrumbs>
+        }
+        buttonJSX={
+          <>
+            <LoadingButton
+              loading={isSaving}
+              type="submit"
+              color="primary"
+              variant="contained"
+              onClick={() => formikRef.current?.submitForm()}
+              data-testid="submit-observation-button">
+              Save and Exit
+            </LoadingButton>
+            <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </>
+        }
+      />
 
-        <Container maxWidth="xl" sx={{ py: 3 }}>
-          <Paper sx={{ p: 5 }}>
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <Paper sx={{ p: 5 }}>
+          <TaxonomyContextProvider>
             <ObservationForm
               initialData={initialObservationValues}
               handleSubmit={(formikData) => createObservation(formikData)}
               formikRef={formikRef}
             />
-            <Stack mt={4} flexDirection="row" justifyContent="flex-end" gap={1}>
-              <LoadingButton
-                loading={isSaving}
-                type="submit"
-                color="primary"
-                variant="contained"
-                onClick={() => formikRef.current?.submitForm()}
-                data-testid="submit-observation-button">
-                Save and Exit
-              </LoadingButton>
-              <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
-                Cancel
-              </Button>
-            </Stack>
-          </Paper>
-        </Container>
-      </TaxonomyContextProvider>
+          </TaxonomyContextProvider>
+          <Stack mt={4} flexDirection="row" justifyContent="flex-end" gap={1}>
+            <LoadingButton
+              loading={isSaving}
+              type="submit"
+              color="primary"
+              variant="contained"
+              onClick={() => formikRef.current?.submitForm()}
+              data-testid="submit-observation-button">
+              Save and Exit
+            </LoadingButton>
+            <Button disabled={isSaving} color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </Stack>
+        </Paper>
+      </Container>
     </>
   );
 };

app/src/features/surveys/observations/form/ObservationForm.interface.tsx

@@ -11,13 +11,19 @@ import {
 export interface IObservationSubcountForm {
   _id?: string; // Temporary id for react key
   observation_subcount_id: number | null;
-  observation_subcount_sign_id: number | null;
   subcount: number | null;
   comment: string | null;
   measurements: (SubcountQualitativeMeasurement | SubcountQuantitativeMeasurement)[];
+  markings?: never[]; // TODO - future enhancement
+  // TODO - move environments out of subcounts and into standard columns
+  observation_subcount_sign_id: number | null;
+  // TODO - move environments out of subcounts and into standard columns
   environments: (SubcountQualitativeEnvironment | SubcountQuantitativeEnvironment)[];
 }
 
+/**
+ * Defines the form data structure for the ObservationForm component.
+ */
 export interface IObservationForm {
   standardColumns: Omit<StandardObservationColumns, 'survey_observation_id'> & {
     survey_observation_id: number | null;

app/src/features/surveys/observations/form/ObservationForm.tsx

@@ -116,7 +116,7 @@ const ObservationForm = <TInitialFormikData extends IObservationForm>(
 
         {/* Species Form */}
         <HorizontalSplitFormComponent title="Species" summary="Enter the species observed">
-          <ObservationSpeciesForm formikFieldName="standardColumns" />
+          <ObservationSpeciesForm formikSectionName="standardColumns" />
         </HorizontalSplitFormComponent>
 
         <Divider />
@@ -135,13 +135,14 @@ const ObservationForm = <TInitialFormikData extends IObservationForm>(
 
         {/* Location */}
         <HorizontalSplitFormComponent title="Location" summary="Enter the location of the observation">
-          <ObservationLocationForm formikFieldName="standardColumns" />
+          <ObservationLocationForm formikSectionName="standardColumns" />
         </HorizontalSplitFormComponent>
+
         <Divider />
 
         {/* Datetime Form */}
         <HorizontalSplitFormComponent title="Date & Time" summary="Enter the date and time of the observation">
-          <ObservationDateTimeForm formikFieldName="standardColumns" />
+          <ObservationDateTimeForm formikSectionName="standardColumns" />
         </HorizontalSplitFormComponent>
 
         <Divider />
@@ -150,21 +151,21 @@ const ObservationForm = <TInitialFormikData extends IObservationForm>(
         <HorizontalSplitFormComponent
           title="Environmental Conditions"
           summary="Enter information about the environment where the observation was made">
-          <ObservationEnvironmentForm formikFieldName="standardColumns.environments" />
+          <ObservationEnvironmentForm formikSectionName="standardColumns.environments" />
         </HorizontalSplitFormComponent>
 
         <Divider />
 
         {/* Subcounts Form */}
         <HorizontalSplitFormComponent title="Subcounts" summary="Add subcounts to the observation">
-          <SubcountForm />
+          <SubcountForm formikSectionName="subcounts" />
         </HorizontalSplitFormComponent>
 
         <Divider />
 
         {/* Comments Form */}
         <HorizontalSplitFormComponent title="Comments" summary="Add comments about the observation">
-          <ObservationCommentForm />
+          <ObservationCommentForm formikSectionName="standardColumns" />
         </HorizontalSplitFormComponent>
 
         <Divider />

app/src/features/surveys/observations/form/comment/ObservationCommentForm.tsx

@@ -4,20 +4,26 @@ import Button from '@mui/material/Button';
 import CustomTextField from 'components/fields/CustomTextField';
 import { useState } from 'react';
 
+export interface IObservationCommentFormProps {
+  formikSectionName: string;
+}
+
 /**
  * Returns form controls for adding comments to the observation
  *
  * @template FormikValuesType
  * @return {*}
  */
-export const ObservationCommentForm = () => {
+export const ObservationCommentForm = (props: IObservationCommentFormProps) => {
+  const { formikSectionName } = props;
+
   const [showComment, setShowComment] = useState(false);
 
   return (
     <>
       {showComment ? (
         <CustomTextField
-          name="standardColumns.comment"
+          name={`${formikSectionName}.comment`}
           label="Comment"
           maxLength={200}
           other={{

app/src/features/surveys/observations/form/date/ObservationDateTimeForm.tsx

@@ -3,16 +3,16 @@ import SingleDateField from 'components/fields/SingleDateField';
 import { TimeField } from 'components/fields/TimeField';
 
 interface IObservationDateTimeFormProps {
-  formikFieldName: string;
+  formikSectionName: string;
 }
 
 const ObservationDateTimeForm = (props: IObservationDateTimeFormProps) => {
-  const { formikFieldName } = props;
+  const { formikSectionName } = props;
 
   return (
     <Stack spacing={2}>
-      <SingleDateField label="Date" name={`${formikFieldName}.observation_date`} />
-      <TimeField label="Time" name={`${formikFieldName}.observation_time`} id="time" required={false} />
+      <SingleDateField label="Date" name={`${formikSectionName}.observation_date`} />
+      <TimeField label="Time" name={`${formikSectionName}.observation_time`} id="time" required={false} />
     </Stack>
   );
 };

app/src/features/surveys/observations/form/environments/ObservationEnvironmentForm.tsx

@@ -25,7 +25,7 @@ const initialEnvironmentValues = {
 };
 
 interface IObservationEnvironmentFormProps {
-  formikFieldName: string; // Accept formikFieldName as a prop
+  formikSectionName: string;
 }
 
 /**
@@ -35,7 +35,8 @@ interface IObservationEnvironmentFormProps {
  * @return {*}
  */
 export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormProps) => {
-  const { formikFieldName } = props;
+  const { formikSectionName } = props;
+
   const { values } = useFormikContext<IObservationForm>();
 
   const biohubApi = useBiohubApi();
@@ -49,11 +50,11 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro
   const environments: (
     | ObservationSubcountQualitativeEnvironmentObject
     | ObservationSubcountQuantitativeEnvironmentObject
-  )[] = get(values, formikFieldName) ?? [];
+  )[] = get(values, formikSectionName) ?? [];
 
   return (
     <FieldArray
-      name={formikFieldName}
+      name={formikSectionName}
       render={(arrayHelpers: FieldArrayRenderProps) => {
         return (
           <>
@@ -73,7 +74,7 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro
                           label: item.name
                         }))
                       ]}
-                      categoryFormikFieldName={`${formikFieldName}[${index}].environment_quantitative_id`}
+                      categoryFormikFieldName={`${formikSectionName}[${index}].environment_quantitative_id`}
                       getCategoryDataType={(categoryId) => {
                         const quantitative = (environmentsDataLoader.data?.quantitative_environments ?? []).find(
                           (item) => item.environment_quantitative_id === categoryId
@@ -111,8 +112,8 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro
                           (item) => item.environment_quantitative_id === categoryId
                         );
                         return quantitative
-                          ? `${formikFieldName}[${index}].value`
-                          : `${formikFieldName}[${index}].environment_qualitative_option_id`;
+                          ? `${formikSectionName}[${index}].value`
+                          : `${formikSectionName}[${index}].environment_qualitative_option_id`;
                       }}
                       onDelete={() => arrayHelpers.remove(index)}
                     />

app/src/features/surveys/observations/form/location/ObservationLocationForm.tsx

@@ -2,16 +2,16 @@ import Stack from '@mui/material/Stack';
 import CustomTextField from 'components/fields/CustomTextField';
 
 interface IObservationLocationFormProps {
-  formikFieldName: string;
+  formikSectionName: string;
 }
 
 const ObservationLocationForm = (props: IObservationLocationFormProps) => {
-  const { formikFieldName } = props;
+  const { formikSectionName } = props;
 
   return (
     <Stack spacing={2}>
-      <CustomTextField label="Latitude" name={`${formikFieldName}.latitude`} other={{ type: 'number' }} />
-      <CustomTextField label="Longitude" name={`${formikFieldName}.longitude`} other={{ type: 'number' }} />
+      <CustomTextField label="Latitude" name={`${formikSectionName}.latitude`} other={{ type: 'number' }} />
+      <CustomTextField label="Longitude" name={`${formikSectionName}.longitude`} other={{ type: 'number' }} />
     </Stack>
   );
 };

app/src/features/surveys/observations/form/sampling/ObservationSamplingForm.tsx

@@ -18,6 +18,8 @@ const ObservationSamplingForm = (props: IObservationSamplingFormProps) => {
 
   const samplingInformationCache = useSamplingInformationCache();
 
+  // Initialize the cached sampling information.
+  // Optional when creating new records. Necessary when editing existing records.
   samplingInformationCache.initCachedSamplingInformationRef({ periods: [] });
 
   return (

app/src/features/surveys/observations/form/sampling/components/MethodTechniqueField.tsx

@@ -72,8 +72,6 @@ export const MethodTechniqueField = (props: IMethodTechniqueFieldProps) => {
           keyword
         });
 
-        console.log(response);
-
         if (!isMounted()) {
           return;
         }