update usages affected by refactor

src/frontend/contexts/AppProviders.tsx

@@ -8,7 +8,7 @@ import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {GPSModalContextProvider} from './GPSModalContext';
 import {TrackTimerContextProvider} from './TrackTimerContext';
 import {PhotoPromiseProvider} from './PhotoPromiseContext';
-import {ActiveProjectProvider} from './ProjectContext';
+import {ActiveProjectProvider} from './ActiveProjectContext';
 import {SecurityProvider} from './SecurityContext';
 import {
   LocalDiscoveryProvider,

src/frontend/hooks/server/fields.ts

@@ -1,9 +1,8 @@
 import {useQuery} from '@tanstack/react-query';
-
-import {useProject} from './projects';
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
 
 export const useFieldsQuery = () => {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useQuery({
     queryKey: ['fields'],

src/frontend/hooks/server/invites.ts

@@ -3,8 +3,11 @@ import {
   useQueryClient,
   useSuspenseQuery,
 } from '@tanstack/react-query';
+
 import {useApi} from '../../contexts/ApiContext';
-import {PROJECTS_KEY, useProject, useUpdateActiveProjectId} from './projects';
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
+import {usePersistedProjectId} from '../persistedState/usePersistedProjectId';
+import {ALL_PROJECTS_KEY} from './projects';
 
 export const INVITE_KEY = 'pending_invites';
 
@@ -21,23 +24,30 @@ export function usePendingInvites() {
 export function useAcceptInvite(projectId?: string) {
   const mapeoApi = useApi();
   const queryClient = useQueryClient();
-  const switchActiveProject = useUpdateActiveProjectId();
+  const switchActiveProject = usePersistedProjectId(
+    state => state.setProjectId,
+  );
 
   return useMutation({
     mutationFn: async ({inviteId}: {inviteId: string}) => {
       if (!inviteId) return;
-      mapeoApi.invite.accept({inviteId});
+      return mapeoApi.invite.accept({inviteId});
     },
     onSuccess: () => {
       // This is a workaround. There is a race condition where the project in not available when the invite is accepted. This is temporary and is currently being worked on.
       setTimeout(() => {
-        queryClient
-          .invalidateQueries({queryKey: [INVITE_KEY, PROJECTS_KEY]})
-          .then(() => {
-            if (projectId) {
-              switchActiveProject(projectId);
-            }
-          });
+        Promise.all([
+          queryClient.invalidateQueries({
+            queryKey: [INVITE_KEY],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: [ALL_PROJECTS_KEY],
+          }),
+        ]).then(() => {
+          if (projectId) {
+            switchActiveProject(projectId);
+          }
+        });
       }, 5000);
     },
   });
@@ -76,7 +86,7 @@ export function useClearAllPendingInvites() {
 
 export function useSendInvite() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
   type InviteParams = Parameters<typeof project.$member.invite>;
   return useMutation({
     mutationFn: ({
@@ -94,7 +104,7 @@ export function useSendInvite() {
 
 export function useRequestCancelInvite() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
   return useMutation({
     mutationFn: (deviceId: string) =>
       project.$member.requestCancelInvite(deviceId),

src/frontend/hooks/server/media.ts

@@ -4,16 +4,16 @@ import {useMutation, useQueries} from '@tanstack/react-query';
 import {SetRequired} from 'type-fest';
 import {URL} from 'react-native-url-polyfill';
 
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
 import {DraftPhoto} from '../../contexts/PhotoPromiseContext/types';
-import {useProject} from './projects';
 
 type SavablePhoto = SetRequired<
   Pick<DraftPhoto, 'originalUri' | 'previewUri' | 'thumbnailUri'>,
   'originalUri'
 >;
 
 export function useCreateBlobMutation(opts: {retry?: number} = {}) {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useMutation({
     retry: opts.retry,
@@ -40,7 +40,7 @@ export function useAttachmentUrlQueries(
     Exclude<Observation['attachments'][number]['type'], 'UNRECOGNIZED'>
   >,
 ) {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useQueries({
     queries: attachments.map(attachment => {

src/frontend/hooks/server/observations.ts

@@ -5,16 +5,16 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 
-import {useProject} from './projects';
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
 import {ClientGeneratedObservation} from '../../sharedTypes';
 
 export const OBSERVATION_KEY = 'observations';
 
 export function useObservations() {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useSuspenseQuery({
-    queryKey: ['observations'],
+    queryKey: [OBSERVATION_KEY],
     queryFn: async () => {
       if (!project) throw new Error('Project instance does not exist');
       return project.observation.getMany();
@@ -23,7 +23,7 @@ export function useObservations() {
 }
 
 export function useObservation(observationId: string) {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useSuspenseQuery({
     queryKey: [OBSERVATION_KEY, observationId],
@@ -36,7 +36,7 @@ export function useObservation(observationId: string) {
 
 export function useCreateObservation() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
 
   return useMutation({
     mutationFn: async ({value}: {value: ClientGeneratedObservation}) => {
@@ -55,7 +55,7 @@ export function useCreateObservation() {
 
 export function useEditObservation() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
 
   return useMutation({
     mutationFn: async ({
@@ -76,7 +76,7 @@ export function useEditObservation() {
 
 export function useDeleteObservation() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
 
   return useMutation({
     mutationFn: async ({id}: {id: string}) => {

src/frontend/hooks/server/presets.ts

@@ -4,16 +4,18 @@ import {
   useQueryClient,
   useQuery,
 } from '@tanstack/react-query';
-
-import {useProject} from './projects';
 import {PresetValue} from '@mapeo/schema';
 import {IconSize} from '../../sharedTypes';
 
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
+
+export const PRESETS_KEY = 'presets';
+
 export function usePresetsQuery() {
-  const project = useProject();
+  const project = useActiveProject();
 
   return useSuspenseQuery({
-    queryKey: ['presets'],
+    queryKey: [PRESETS_KEY],
     queryFn: async () => {
       if (!project) throw new Error('Project instance does not exist');
       return await project.preset.getMany();
@@ -22,7 +24,7 @@ export function usePresetsQuery() {
 }
 
 export function usePresetsMutation() {
-  const project = useProject();
+  const project = useActiveProject();
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -31,7 +33,7 @@ export function usePresetsMutation() {
       return await project.preset.create(preset);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: ['presets']});
+      queryClient.invalidateQueries({queryKey: [PRESETS_KEY]});
     },
   });
 }

src/frontend/hooks/server/projects.ts

@@ -1,7 +1,7 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 
 import {useApi} from '../../contexts/ApiContext';
-import {useActiveProject} from '../../contexts/ProjectContext';
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
 
 export const ALL_PROJECTS_KEY = 'all_projects';
 export const PROJECT_SETTINGS_KEY = 'project_settings';

src/frontend/hooks/server/track.ts

@@ -3,14 +3,16 @@ import {
   useMutation,
   useSuspenseQuery,
 } from '@tanstack/react-query';
-import {useProject} from './projects';
 import {TrackValue} from '@mapeo/schema';
 
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
+
 export const TRACK_KEY = 'tracks';
 
 export function useCreateTrack() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
+
   return useMutation({
     mutationFn: async (params: TrackValue) => {
       return project.track.create(params);
@@ -22,7 +24,8 @@ export function useCreateTrack() {
 }
 
 export function useTracksQuery() {
-  const project = useProject();
+  const project = useActiveProject();
+
   return useSuspenseQuery({
     queryKey: [TRACK_KEY],
     queryFn: async () => {
@@ -32,7 +35,7 @@ export function useTracksQuery() {
 }
 
 export function useTrackQuery(docId: string) {
-  const project = useProject();
+  const project = useActiveProject();
   return useSuspenseQuery({
     queryKey: [TRACK_KEY, docId],
     queryFn: async () => {
@@ -43,7 +46,8 @@ export function useTrackQuery(docId: string) {
 
 export function useDeleteTrackMutation() {
   const queryClient = useQueryClient();
-  const project = useProject();
+  const project = useActiveProject();
+
   return useMutation({
     mutationFn: async (docId: string) => {
       return project.track.delete(docId);

src/frontend/hooks/useSyncState.ts

@@ -1,7 +1,7 @@
 import {MapeoProjectApi} from '@mapeo/ipc';
 import {useCallback, useSyncExternalStore} from 'react';
 
-import {useProject} from './server/projects';
+import {useActiveProject} from '../contexts/ActiveProjectContext';
 
 export type SyncState = Awaited<
   ReturnType<MapeoProjectApi['$sync']['getState']>
@@ -10,7 +10,7 @@ export type SyncState = Awaited<
 const projectSyncStoreMap = new WeakMap<MapeoProjectApi, SyncStore>();
 
 function useSyncStore() {
-  const project = useProject();
+  const project = useActiveProject();
 
   let syncStore = projectSyncStoreMap.get(project);
 

src/frontend/screens/Settings/CreateOrJoinProject/CreateProject/index.tsx

@@ -15,6 +15,7 @@ import {HookFormTextInput} from '../../../../sharedComponents/HookFormTextInput'
 import {useCreateProject} from '../../../../hooks/server/projects';
 import {UIActivityIndicator} from 'react-native-indicators';
 import {ErrorBottomSheet} from '../../../../sharedComponents/ErrorBottomSheet';
+import {usePersistedProjectId} from '../../../../hooks/persistedState/usePersistedProjectId';
 
 const m = defineMessages({
   title: {
@@ -48,6 +49,10 @@ export const CreateProject: NativeNavigationComponent<'CreateProject'> = ({
 }) => {
   const {formatMessage: t} = useIntl();
   const [advancedSettingOpen, setAdvancedSettingOpen] = React.useState(false);
+
+  const updateActiveProjectId = usePersistedProjectId(
+    state => state.setProjectId,
+  );
   const {mutate, isPending, reset, error} = useCreateProject();
 
   const {control, handleSubmit} = useForm<ProjectFormType>({
@@ -56,8 +61,10 @@ export const CreateProject: NativeNavigationComponent<'CreateProject'> = ({
 
   function handleCreateProject(val: ProjectFormType) {
     mutate(val.projectName, {
-      onSuccess: () =>
-        navigation.navigate('ProjectCreated', {name: val.projectName}),
+      onSuccess: projectId => {
+        updateActiveProjectId(projectId);
+        navigation.navigate('ProjectCreated', {name: val.projectName});
+      },
     });
   }
 

src/frontend/screens/Sync/ProjectSyncDisplay.tsx

@@ -2,7 +2,11 @@ import * as React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import {StyleSheet, View} from 'react-native';
 import {Bar as ProgressBar} from 'react-native-progress';
-import {useProject} from '../../hooks/server/projects';
+import {useQueryClient} from '@tanstack/react-query';
+
+import {useActiveProject} from '../../contexts/ActiveProjectContext';
+import {OBSERVATION_KEY} from '../../hooks/server/observations';
+import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';
 import {SyncState, useSyncProgress} from '../../hooks/useSyncState';
 import ObservationsProjectImage from '../../images/ObservationsProject.svg';
 import {
@@ -13,13 +17,10 @@ import {
   MEDIUM_GREY,
   WHITE,
 } from '../../lib/styles';
-import {ScreenContentWithDock} from '../../sharedComponents/ScreenContentWithDock';
 import {Button} from '../../sharedComponents/Button';
+import {ScreenContentWithDock} from '../../sharedComponents/ScreenContentWithDock';
 import {Text} from '../../sharedComponents/Text';
 import {StopIcon, SyncIcon, WifiIcon} from '../../sharedComponents/icons';
-import {useQueryClient} from '@tanstack/react-query';
-import {OBSERVATION_KEY} from '../../hooks/server/observations';
-import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';
 
 const m = defineMessages({
   deviceName: {
@@ -82,7 +83,7 @@ export const ProjectSyncDisplay = ({
 }) => {
   const {formatMessage: t} = useIntl();
 
-  const project = useProject();
+  const project = useActiveProject();
   const queryClient = useQueryClient();
   const navigation = useNavigationFromRoot();
   const {connectedPeers, data, initial} = syncState;