#263 Add child sample distance warning

package.json

@@ -43,6 +43,7 @@
     "@ionic/react-router": "7.3.3",
     "@sentry/browser": "7.68.0",
     "@sentry/integrations": "7.68.0",
+    "@turf/distance": "^6.5.0",
     "axios": "1.5.0",
     "clsx": "2.0.0",
     "cordova-launch-review": "4.0.1",

src/Survey/List/Home/Main/index.tsx

@@ -1,22 +1,26 @@
-import { FC } from 'react';
 import { observer } from 'mobx-react';
+import { Trans as T } from 'react-i18next';
+import { useRouteMatch } from 'react-router';
+import { InfoMessage, Main } from '@flumens';
 import { IonButton, IonLabel, IonList } from '@ionic/react';
-import { Main } from '@flumens';
-import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
-import MenuAttr from 'Survey/common/Components/MenuAttr';
+import Sample from 'models/sample';
 import DisabledRecordMessage from 'Survey/common/Components/DisabledRecordMessage';
+import MenuAttr from 'Survey/common/Components/MenuAttr';
+import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
 import SpeciesList from 'Survey/common/Components/SpeciesList';
-import Sample from 'models/sample';
-import { useRouteMatch } from 'react-router';
-import { Trans as T } from 'react-i18next';
 import './styles.scss';
 
 type Props = {
   sample: Sample;
   onDelete: any;
+  showChildSampleDistanceWarning: boolean;
 };
 
-const HomeMain: FC<Props> = ({ sample, onDelete }) => {
+const HomeMain = ({
+  sample,
+  onDelete,
+  showChildSampleDistanceWarning,
+}: Props) => {
   const { url } = useRouteMatch();
 
   // calculate unique taxa
@@ -51,6 +55,12 @@ const HomeMain: FC<Props> = ({ sample, onDelete }) => {
         )}
 
         <div className="rounded">
+          {showChildSampleDistanceWarning && (
+            <InfoMessage color="warning">
+              Some species are located far from the survey area. Please check
+              that this is correct.
+            </InfoMessage>
+          )}
           <MenuDynamicAttrs model={sample} skipLocks />
         </div>
       </IonList>

src/Survey/List/Home/index.tsx

@@ -1,9 +1,10 @@
 import { FC, useContext } from 'react';
 import { observer } from 'mobx-react';
+import { Page, Header, useToast } from '@flumens';
 import { NavContext } from '@ionic/react';
+import distance from '@turf/distance';
 import Sample, { useValidateCheck } from 'models/sample';
 import { useUserStatusCheck } from 'models/user';
-import { Page, Header, useToast } from '@flumens';
 import AppHeaderBand from 'Survey/common/Components/AppHeaderBand';
 import PrimaryHeaderButton from 'Survey/common/Components/PrimaryHeaderButton';
 import Main from './Main';
@@ -57,6 +58,20 @@ const ListHome: FC<Props> = ({ sample }) => {
 
   const subheader = !!training && <AppHeaderBand training />;
 
+  const { location } = sample.attrs;
+
+  const isLocationFurtherThan5000m = (smp: Sample) =>
+    distance(
+      [location.latitude, location.longitude],
+      [smp.attrs.location.latitude, smp.attrs.location.longitude],
+      {
+        units: 'meters',
+      }
+    ) > 5000;
+  const showChildSampleDistanceWarning = sample.samples.some(
+    isLocationFurtherThan5000m
+  );
+
   return (
     <Page id="survey-complex-default-edit">
       <Header
@@ -65,7 +80,11 @@ const ListHome: FC<Props> = ({ sample }) => {
         defaultHref="/home/surveys"
         subheader={subheader}
       />
-      <Main sample={sample} onDelete={onSubSampleDelete} />
+      <Main
+        sample={sample}
+        onDelete={onSubSampleDelete}
+        showChildSampleDistanceWarning={showChildSampleDistanceWarning}
+      />
     </Page>
   );
 };

src/Survey/Plant/Home/Main/index.tsx

@@ -1,21 +1,25 @@
-import { FC } from 'react';
 import { observer } from 'mobx-react';
+import { Trans as T } from 'react-i18next';
+import { useRouteMatch } from 'react-router';
+import { InfoMessage, Main } from '@flumens';
 import { IonButton, IonLabel, IonList } from '@ionic/react';
-import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
+import Sample from 'models/sample';
 import DisabledRecordMessage from 'Survey/common/Components/DisabledRecordMessage';
+import MenuDynamicAttrs from 'Survey/common/Components/MenuDynamicAttrs';
 import SpeciesList from 'Survey/common/Components/SpeciesList';
-import { Main } from '@flumens';
-import Sample from 'models/sample';
-import { useRouteMatch } from 'react-router';
-import { Trans as T } from 'react-i18next';
 import './styles.scss';
 
 type Props = {
   sample: Sample;
   onDelete: any;
+  showChildSampleDistanceWarning: boolean;
 };
 
-const PlantHomeMain: FC<Props> = ({ sample, onDelete }) => {
+const PlantHomeMain = ({
+  sample,
+  onDelete,
+  showChildSampleDistanceWarning,
+}: Props) => {
   const { url } = useRouteMatch();
 
   const isDisabled = sample.isDisabled();
@@ -30,6 +34,12 @@ const PlantHomeMain: FC<Props> = ({ sample, onDelete }) => {
         )}
 
         <div className="rounded">
+          {showChildSampleDistanceWarning && (
+            <InfoMessage color="warning">
+              Some species are located far from the survey area. Please check
+              that this is correct.
+            </InfoMessage>
+          )}
           <MenuDynamicAttrs model={sample} skipLocks />
         </div>
       </IonList>

src/Survey/Plant/Home/index.tsx

@@ -12,6 +12,7 @@ import {
   InfoButton,
 } from '@flumens';
 import { NavContext, IonToolbar, isPlatform } from '@ionic/react';
+import distance from '@turf/distance';
 import appModel from 'models/app';
 import Sample, { useValidateCheck } from 'models/sample';
 import { useUserStatusCheck } from 'models/user';
@@ -123,6 +124,20 @@ const PlantHome: FC<Props> = ({ sample }) => {
     </div>
   );
 
+  const { location } = sample.attrs;
+
+  const isLocationFurtherThan5000m = (smp: Sample) =>
+    distance(
+      [location.latitude, location.longitude],
+      [smp.attrs.location.latitude, smp.attrs.location.longitude],
+      {
+        units: 'meters',
+      }
+    ) > 5000;
+  const showChildSampleDistanceWarning = sample.samples.some(
+    isLocationFurtherThan5000m
+  );
+
   return (
     <Page id="survey-complex-plant-edit">
       <Header
@@ -131,7 +146,11 @@ const PlantHome: FC<Props> = ({ sample }) => {
         defaultHref="/home/surveys"
         subheader={subheader}
       />
-      <Main sample={sample} onDelete={onSubSampleDelete} />
+      <Main
+        sample={sample}
+        onDelete={onSubSampleDelete}
+        showChildSampleDistanceWarning={showChildSampleDistanceWarning}
+      />
     </Page>
   );
 };