Merge branch 'feat/tracking-impl' of github.com:digidem/CoMapeo-mobil…

…e into feat/tracking-impl

src/frontend/hooks/tracks/useCurrentTrackStore.ts

@@ -3,23 +3,30 @@ import {calculateTotalDistance} from '../../utils/distance';
 import {LocationHistoryPoint} from '../../sharedTypes/location';
 
 type TracksStoreState = {
-  isTracking: boolean;
   locationHistory: LocationHistoryPoint[];
   observations: string[];
   distance: number;
-  trackingSince: Date;
   addNewObservation: (observationId: string) => void;
   addNewLocations: (locationData: LocationHistoryPoint[]) => void;
   clearLocationHistory: () => void;
   setTracking: (val: boolean) => void;
-};
+} & (
+  | {
+      isTracking: true;
+      trackingSince: Date;
+    }
+  | {
+      isTracking: false;
+      trackingSince: null;
+    }
+);
 
 export const useCurrentTrackStore = create<TracksStoreState>(set => ({
   isTracking: false,
   locationHistory: [],
   observations: [],
   distance: 0,
-  trackingSince: new Date(0),
+  trackingSince: null,
   addNewObservation: (id: string) =>
     set(state => ({observations: [...state.observations, id]})),
   addNewLocations: data =>
@@ -49,8 +56,9 @@ export const useCurrentTrackStore = create<TracksStoreState>(set => ({
     }),
   clearLocationHistory: () => set(() => ({locationHistory: []})),
   setTracking: (val: boolean) =>
-    set(() => ({
-      isTracking: val,
-      trackingSince: val ? new Date() : new Date(0),
-    })),
+    set(() =>
+      val
+        ? {isTracking: true, trackingSince: new Date()}
+        : {isTracking: false, trackingSince: null},
+    ),
 }));

src/frontend/hooks/tracks/useTracking.ts

@@ -41,14 +41,14 @@ export function useTracking() {
   }, [addNewTrackLocations]);
 
   const startTracking = useCallback(async () => {
-    setLoading(true);
-
     if (isTracking) {
       console.warn('Start tracking attempt while tracking already enabled');
       setLoading(false);
       return;
     }
 
+    setLoading(true);
+
     await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
       accuracy: Location.Accuracy.Highest,
       activityType: Location.LocationActivityType.Fitness,

src/frontend/hooks/useFormattedTimeSince.ts

@@ -1,15 +1,22 @@
 import {useEffect, useState} from 'react';
 import {Duration} from 'luxon';
 
-export const useFormattedTimeSince = (start: Date, interval: number) => {
+export const useFormattedTimeSince = (start: Date | null, interval: number) => {
   const [currentTime, setCurrentTime] = useState(new Date());
 
   useEffect(() => {
+    if (!start) {
+      return;
+    }
     const timer = setInterval(() => {
       setCurrentTime(new Date());
     }, interval);
     return () => clearInterval(timer);
-  }, [interval]);
+  }, [start, interval]);
+
+  if (!start) {
+    return 'Unknown';
+  }
 
   const millisPassed = Math.abs(currentTime.getTime() - start.getTime());
   return Duration.fromMillis(millisPassed).toFormat('hh:mm:ss');

src/frontend/sharedComponents/HomeHeader.tsx

@@ -4,8 +4,10 @@ import LinearGradient from 'react-native-linear-gradient';
 import {IconButton} from './IconButton';
 import {ObservationListIcon} from './icons';
 import {GPSPill} from './GPSPill';
+import {useNavigationFromHomeTabs} from '../hooks/useNavigationWithTypes';
 
-export const HomeHeader = ({navigation}) => {
+export const HomeHeader = () => {
+  const navigation = useNavigationFromHomeTabs();
   return (
     <View style={[styles.header]}>
       <LinearGradient
@@ -16,7 +18,7 @@ export const HomeHeader = ({navigation}) => {
       <GPSPill />
       <IconButton
         onPress={() => {
-          navigation.navigate('ObservationList' as never);
+          navigation.navigate('ObservationList');
         }}
         testID="observationListButton">
         <ObservationListIcon />

src/frontend/utils/distance.ts

@@ -8,18 +8,7 @@ export const calculateTotalDistance = (points: LonLatData[]): number => {
 
   const ruler = new CheapRuler(points[0]!.latitude, 'kilometers');
 
-  return points.reduce((previousValue, currentValue, i, arr) => {
-    if (i === 0) {
-      return previousValue;
-    }
-
-    const pointA = arr[i - 1]!!;
-    const pointB = currentValue;
-    const distance = ruler.distance(
-      [pointA.longitude, pointA.latitude],
-      [pointB.longitude, pointB.latitude],
-    );
-
-    return previousValue + distance;
-  }, 0);
+  return ruler.lineDistance(
+    points.map(point => [point.longitude, point.latitude]),
+  );
 };