chore: initial @comapeo/core-react integration

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@bam.tech/react-native-image-resizer": "3.0.11",
+    "@comapeo/core-react": "1.1.0",
     "@comapeo/ipc": "2.1.0",
     "@expo-google-fonts/rubik": "0.2.3",
     "@formatjs/intl-getcanonicallocales": "2.5.4",

src/frontend/Navigation/Stack/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {useClientApi} from '@comapeo/core-react';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack/lib/typescript/src/types';
 import {WHITE} from '../../lib/styles';
@@ -17,7 +18,6 @@ import {getInitialRouteName} from '../../utils/navigation';
 import {createDefaultScreenGroup} from './AppScreens';
 import {createOnboardingScreens} from './OnboardingScreens';
 import {useSuspenseQuery} from '@tanstack/react-query';
-import {useApi} from '../../contexts/ApiContext';
 import {Loading} from '../../sharedComponents/Loading';
 import {useSecurityContext} from '../../contexts/SecurityContext';
 import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes';
@@ -63,7 +63,7 @@ function RootStackNavigatorChild() {
     store => store.value,
   );
   const {data: presets} = usePresetsQuery();
-  const mapeoApi = useApi();
+  const mapeoApi = useClientApi();
 
   const deviceInfo = useSuspenseQuery({
     queryKey: [DEVICE_INFO_KEY],

src/frontend/contexts/ActiveProjectContext.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import {useClientApi} from '@comapeo/core-react';
 import {type MapeoProjectApi} from '@comapeo/ipc';
 
 import {usePersistedProjectId} from '../hooks/persistedState/usePersistedProjectId';
 import {useProject, useCreateProject} from '../hooks/server/projects';
 import {Loading} from '../sharedComponents/Loading';
-import {useApi} from './ApiContext';
 
 const ActiveProjectContext = React.createContext<
   {projectId: string; projectApi: MapeoProjectApi} | undefined
@@ -13,7 +13,7 @@ const ActiveProjectContext = React.createContext<
 export const ActiveProjectProvider = ({
   children,
 }: React.PropsWithChildren<{}>) => {
-  const mapeoApi = useApi();
+  const mapeoApi = useClientApi();
 
   const activeProjectId = usePersistedProjectId(store => store.projectId);
   const setActiveProjectId = usePersistedProjectId(store => store.setProjectId);

src/frontend/contexts/AppProviders.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {ClientApiProvider} from '@comapeo/core-react';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {StyleSheet} from 'react-native';
@@ -19,7 +20,6 @@ import {
 } from './LocalDiscoveryContext';
 import {type MapeoClientApi} from '@comapeo/ipc';
 import {ServerLoading} from '../ServerLoading';
-import {ApiProvider} from './ApiContext';
 import {MessagePortLike} from '../lib/MessagePortLike';
 import {IntlProvider} from './IntlContext';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
@@ -55,7 +55,7 @@ export const AppProviders = ({
               <GPSModalContextProvider>
                 <ServerLoading messagePort={messagePort}>
                   <LocalDiscoveryProvider value={localDiscoveryController}>
-                    <ApiProvider api={mapeoApi}>
+                    <ClientApiProvider clientApi={mapeoApi}>
                       <MetricsProvider
                         appMetrics={appMetrics}
                         deviceMetrics={deviceMetrics}>
@@ -67,7 +67,7 @@ export const AppProviders = ({
                           </BottomSheetModalProvider>
                         </ActiveProjectProvider>
                       </MetricsProvider>
-                    </ApiProvider>
+                    </ClientApiProvider>
                   </LocalDiscoveryProvider>
                 </ServerLoading>
               </GPSModalContextProvider>