feat: Tracks saving

messages/en.json

@@ -19,12 +19,24 @@
     "description": "Title of dialog that shows when cancelling a new observation",
     "message": "Discard observation?"
   },
+  "Modal.DiscardTrack.description": {
+    "message": "Your Track will not be saved. This cannot be undone."
+  },
+  "Modal.DiscardTrack.title": {
+    "message": "Discard Track?"
+  },
   "Modal.GPSDisable.button": {
     "message": "Enable"
   },
+  "Modal.GPSDisable.defaultButton": {
+    "message": "Continue Editing"
+  },
   "Modal.GPSDisable.description": {
     "message": "To create a Track CoMapeo needs access to your location and GPS."
   },
+  "Modal.GPSDisable.discardButton": {
+    "message": "Discard Track"
+  },
   "Modal.GPSDisable.title": {
     "message": "GPS Disabled"
   },
@@ -426,6 +438,26 @@
     "description": "message shown whilst observations are loading",
     "message": "Loading… this can take a while after synchronizing with a new device"
   },
+  "screens.SaveTrack.TrackEditView.descriptionPlaceholder": {
+    "description": "Placeholder for description/notes field",
+    "message": "What is happening here?"
+  },
+  "screens.SaveTrack.TrackEditView.saveTrackCamera": {
+    "description": "Button label for adding photo",
+    "message": "Camera"
+  },
+  "screens.SaveTrack.TrackEditView.saveTrackDetails": {
+    "description": "Button label for check details",
+    "message": "Details"
+  },
+  "screens.SaveTrack.TrackEditView.title": {
+    "description": "Title for new track screen",
+    "message": "New Track"
+  },
+  "screens.SaveTrack.track": {
+    "description": "Category title for new track screen",
+    "message": "Track"
+  },
   "screens.Security.obscurePassDescriptonPassNotSet": {
     "message": "To use, enable App Passcode"
   },

src/frontend/Navigation/ScreenGroups/AppScreens.tsx

@@ -55,8 +55,10 @@ import {TrackingTabBarIcon} from './TabBar/TrackingTabBarIcon';
 import {TabName} from '../types';
 import {CameraTabBarIcon} from './TabBar/CameraTabBarIcon';
 import {MapTabBarIcon} from './TabBar/MapTabBarIcon';
+import {SaveTrackScreen} from '../../screens/MapScreen/track/SaveTrackScreen';
 import {InviteDeclined} from '../../screens/Settings/ProjectSettings/YourTeam/InviteDeclined';
 import {UnableToCancelInvite} from '../../screens/Settings/ProjectSettings/YourTeam/ReviewAndInvite/UnableToCancelInvite';
+import {SharedLocationContextProvider} from '../../contexts/SharedLocationContext';
 import {
   SyncScreen,
   createNavigationOptions as createSyncNavOptions,
@@ -139,6 +141,7 @@ export type AppList = {
   UnableToCancelInvite: InviteProps;
   DeviceNameDisplay: undefined;
   DeviceNameEdit: undefined;
+  SaveTrack: undefined;
   Sync: undefined;
 };
 
@@ -208,7 +211,11 @@ export const createDefaultScreenGroup = (
     <RootStack.Screen
       name="Home"
       options={{headerShown: false}}
-      component={HomeTabs}
+      children={() => (
+        <SharedLocationContextProvider>
+          <HomeTabs />
+        </SharedLocationContextProvider>
+      )}
     />
     <RootStack.Screen
       name="AuthScreen"
@@ -360,6 +367,13 @@ export const createDefaultScreenGroup = (
       component={GpsModal}
       options={createGpsModalNavigationOptions({intl})}
     />
+    <RootStack.Screen
+      name="SaveTrack"
+      component={SaveTrackScreen}
+      options={{
+        headerShown: false,
+      }}
+    />
     <RootStack.Screen
       name="InviteDeclined"
       component={InviteDeclined}

src/frontend/contexts/ExternalProviders.tsx

@@ -13,7 +13,6 @@ import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {AppStackList} from '../Navigation/AppStack';
 import {GPSModalContextProvider} from './GPSModalContext';
 import {TrackTimerContextProvider} from './TrackTimerContext';
-import {SharedLocationContextProvider} from './SharedLocationContext';
 
 type ExternalProvidersProp = {
   children: React.ReactNode;
@@ -29,17 +28,13 @@ export const ExternalProviders = ({
   return (
     <QueryClientProvider client={queryClient}>
       <GestureHandlerRootView style={{flex: 1}}>
-        <SharedLocationContextProvider>
+        <TrackTimerContextProvider>
           <GPSModalContextProvider>
-            <TrackTimerContextProvider>
-              <BottomSheetModalProvider>
-                <NavigationContainer ref={navRef}>
-                  {children}
-                </NavigationContainer>
-              </BottomSheetModalProvider>
-            </TrackTimerContextProvider>
+            <NavigationContainer ref={navRef}>
+              <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+            </NavigationContainer>
           </GPSModalContextProvider>
-        </SharedLocationContextProvider>
+        </TrackTimerContextProvider>
       </GestureHandlerRootView>
     </QueryClientProvider>
   );

src/frontend/hooks/server/track.ts

@@ -0,0 +1,55 @@
+import {
+  useQueryClient,
+  useMutation,
+  useSuspenseQuery,
+} from '@tanstack/react-query';
+import {useProject} from './projects';
+import {TrackValue} from '@mapeo/schema';
+
+export const TRACK_KEY = 'tracks';
+
+export function useCreateTrack() {
+  const queryClient = useQueryClient();
+  const project = useProject();
+  return useMutation({
+    mutationFn: async (params: TrackValue) => {
+      return project.track.create(params);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({queryKey: [TRACK_KEY]});
+    },
+  });
+}
+
+export function useTracksQuery() {
+  const project = useProject();
+  return useSuspenseQuery({
+    queryKey: [TRACK_KEY],
+    queryFn: async () => {
+      return project.track.getMany();
+    },
+  });
+}
+
+export function useTrackQuery(docId: string) {
+  const project = useProject();
+  return useSuspenseQuery({
+    queryKey: [TRACK_KEY, docId],
+    queryFn: async () => {
+      return project.track.getByDocId(docId);
+    },
+  });
+}
+
+export function useDeleteTrackMutation() {
+  const queryClient = useQueryClient();
+  const project = useProject();
+  return useMutation({
+    mutationFn: async (docId: string) => {
+      return project.track.delete(docId);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({queryKey: [TRACK_KEY]});
+    },
+  });
+}

src/frontend/hooks/tracks/useCurrentTrackStore.ts

@@ -8,7 +8,7 @@ type TracksStoreState = {
   distance: number;
   addNewObservation: (observationId: string) => void;
   addNewLocations: (locationData: LocationHistoryPoint[]) => void;
-  clearLocationHistory: () => void;
+  clearCurrentTrack: () => void;
   setTracking: (val: boolean) => void;
 } & (
   | {
@@ -54,7 +54,14 @@ export const useCurrentTrackStore = create<TracksStoreState>(set => ({
         distance: distance + calculateTotalDistance([lastLocation, ...data]),
       };
     }),
-  clearLocationHistory: () => set(() => ({locationHistory: []})),
+  clearCurrentTrack: () =>
+    set(() => ({
+      locationHistory: [],
+      trackingSince: null,
+      distance: 0,
+      isTracking: false,
+      observations: [],
+    })),
   setTracking: (val: boolean) =>
     set(() =>
       val

src/frontend/hooks/tracks/useTracking.ts

@@ -4,6 +4,7 @@ import {useCallback, useState} from 'react';
 import {useCurrentTrackStore} from './useCurrentTrackStore';
 import React from 'react';
 import {FullLocationData} from '../../sharedTypes/location';
+import {useGPSModalContext} from '../../contexts/GPSModalContext';
 
 export const LOCATION_TASK_NAME = 'background-location-task';
 
@@ -13,32 +14,34 @@ type LocationCallbackInfo = {
 };
 
 export function useTracking() {
+  const {bottomSheetRef} = useGPSModalContext();
   const [loading, setLoading] = useState(false);
   const addNewLocations = useCurrentTrackStore(state => state.addNewLocations);
   const setTracking = useCurrentTrackStore(state => state.setTracking);
   const isTracking = useCurrentTrackStore(state => state.isTracking);
 
-  const addNewTrackLocations = useCallback(
-    ({data, error}: LocationCallbackInfo) => {
-      if (error) {
-        console.error('Error while processing location update callback', error);
-      }
-      if (data?.locations) {
-        addNewLocations(
-          data.locations.map(loc => ({
-            latitude: loc.coords.latitude,
-            longitude: loc.coords.longitude,
-            timestamp: loc.timestamp,
-          })),
-        );
-      }
-    },
-    [addNewLocations],
-  );
-
   React.useEffect(() => {
-    TaskManager.defineTask(LOCATION_TASK_NAME, addNewTrackLocations);
-  }, [addNewTrackLocations]);
+    TaskManager.defineTask(
+      LOCATION_TASK_NAME,
+      ({data, error}: LocationCallbackInfo) => {
+        if (error) {
+          console.error(
+            'Error while processing location update callback',
+            error,
+          );
+        }
+        if (data?.locations) {
+          addNewLocations(
+            data.locations.map(loc => ({
+              latitude: loc.coords.latitude,
+              longitude: loc.coords.longitude,
+              timestamp: loc.timestamp,
+            })),
+          );
+        }
+      },
+    );
+  }, [addNewLocations]);
 
   const startTracking = useCallback(async () => {
     if (isTracking) {
@@ -60,8 +63,9 @@ export function useTracking() {
 
   const cancelTracking = useCallback(async () => {
     await Location.stopLocationUpdatesAsync(LOCATION_TASK_NAME);
+    bottomSheetRef.current?.close();
     setTracking(false);
-  }, [setTracking]);
+  }, [bottomSheetRef, setTracking]);
 
   return {isTracking, startTracking, cancelTracking, loading};
 }