chore: refactor track list in observation with maintainable architect…

…ure (#883)

* chore: find associated track with test

* chore: refactor TrackAccordian

* chore: integrate new tracsk accordian

* chore: pr review

* chore: change to mts file

package.json

@@ -36,6 +36,7 @@
     "@formatjs/intl-pluralrules": "^5.2.4",
     "@formatjs/intl-relativetimeformat": "^11.2.4",
     "@gorhom/bottom-sheet": "^5.0.5",
+    "@mapeo/mock-data": "2.1.2",
     "@osm_borders/maritime_10000m": "^1.1.0",
     "@react-native-community/hooks": "^2.8.0",
     "@react-native-community/netinfo": "11.1.0",

src/frontend/screens/Observation/TrackAccordian.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ChainIcon from '../../images/Chain.svg';
-import {Track} from '@comapeo/schema';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes.ts';
 import {defineMessages, useIntl} from 'react-intl';
 import {Accordian} from '../../sharedComponents/Accordian.tsx';
 import {HeaderText} from '../../sharedComponents/Text/HeaderText.tsx';
 import {TrackListItem} from '../ObservationsList/TrackListItem.tsx';
+import {useTracks} from '../../hooks/server/track.ts';
+import {View} from 'react-native';
+import {LIGHT_GREY} from '../../lib/styles.ts';
+import {findAssociatedTrack} from './findAssociatedTrack.ts';
 
 const m = defineMessages({
   track: {
@@ -14,29 +17,44 @@ const m = defineMessages({
   },
 });
 
-export function TrackAccordian({track}: {track: Track}) {
+export function TrackAccordian({observationId}: {observationId: string}) {
   const navigation = useNavigationFromRoot();
+  const {data: allTracks} = useTracks();
+  const track =
+    allTracks === undefined
+      ? undefined
+      : findAssociatedTrack({tracks: allTracks, observationId});
   const {formatMessage} = useIntl();
 
+  if (!track) return null;
+
   return (
-    <Accordian
-      style={{padding: 20}}
-      title={
-        <>
-          <HeaderText variant="header5">{1}</HeaderText>
-          <ChainIcon style={{marginRight: 10, marginLeft: 2}} />
-          <HeaderText variant="header5">{formatMessage(m.track)}</HeaderText>
-        </>
-      }
-      innerAccordianDetails={
-        <TrackListItem
-          track={track}
-          onPress={() => {
-            navigation.push('Track', {trackId: track.docId});
-          }}
-          testID={`trackListItem:${track.docId}`}
-        />
-      }
-    />
+    <View
+      style={{
+        marginTop: 20,
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: LIGHT_GREY,
+      }}>
+      <Accordian
+        style={{padding: 20}}
+        title={
+          <>
+            <HeaderText variant="header5">{1}</HeaderText>
+            <ChainIcon style={{marginRight: 10, marginLeft: 2}} />
+            <HeaderText variant="header5">{formatMessage(m.track)}</HeaderText>
+          </>
+        }
+        innerAccordianDetails={
+          <TrackListItem
+            track={track}
+            onPress={() => {
+              navigation.push('Track', {trackId: track.docId});
+            }}
+            testID={`trackListItem:${track.docId}`}
+          />
+        }
+      />
+    </View>
   );
 }

src/frontend/screens/Observation/findAssociatedTrack.test.mts

@@ -0,0 +1,43 @@
+import {findAssociatedTrack} from './findAssociatedTrack';
+import mock from '@mapeo/mock-data';
+import {assert} from '../../lib/assert';
+
+describe('Tests findAssociatedTrack', () => {
+  it('returns the correct track with the associated observationId', () => {
+    const [observation] = mock.generate('observation');
+    assert(observation);
+    const tracks = mock.generate('track', {count: 10});
+    const targetTrack = tracks[3];
+    assert(targetTrack);
+    targetTrack.observationRefs.push({
+      docId: observation.docId,
+      versionId: observation.versionId,
+    });
+    const track = findAssociatedTrack({
+      tracks,
+      observationId: observation.docId,
+    });
+    expect(track).toStrictEqual(targetTrack);
+  });
+
+  it('returns undefined when there is no matching observation docId', () => {
+    const [observation] = mock.generate('observation');
+    assert(observation);
+    const tracks = mock.generate('track', {count: 10});
+    const track = findAssociatedTrack({
+      tracks,
+      observationId: observation.docId,
+    });
+    expect(track).toBeUndefined();
+  });
+
+  it('returns undefined when tracks array is empty', () => {
+    const [observation] = mock.generate('observation');
+    assert(observation);
+    const track = findAssociatedTrack({
+      tracks: [],
+      observationId: observation.docId,
+    });
+    expect(track).toBeUndefined();
+  });
+});

src/frontend/screens/Observation/findAssociatedTrack.ts

@@ -0,0 +1,13 @@
+import {type Track} from '@comapeo/schema';
+
+export function findAssociatedTrack({
+  tracks,
+  observationId,
+}: {
+  tracks: Track[];
+  observationId: string;
+}) {
+  return tracks.find(trackData =>
+    trackData.observationRefs.some(ref => ref.docId === observationId),
+  );
+}