feat(mobile): force ota updates on load (#312)

![Simulator Screenshot - iPhone 15 Pro - 2024-09-11 at 20.47.49.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/1VEKR8FQ1Qa5iAiqVGqF/ded91f8a-3229-486c-8fd3-937fc05ce240.png)

apps/mobile/app.json

@@ -109,7 +109,8 @@
     "owner": "sixpm",
     "runtimeVersion": "1.0.0",
     "updates": {
-      "url": "https://u.expo.dev/5853e031-3bfb-41fe-bfb6-c49f746c4adc"
+      "url": "https://u.expo.dev/5853e031-3bfb-41fe-bfb6-c49f746c4adc",
+      "checkAutomatically": "ON_ERROR_RECOVERY"
     }
   }
 }

apps/mobile/app/_layout.tsx

@@ -28,6 +28,7 @@ import * as WebBrowser from 'expo-web-browser'
 
 import 'react-native-reanimated'
 import { ToastRoot } from '@/components/common/toast'
+import { UpdateLoader } from '@/components/common/update-loader'
 import { useNotificationObserver } from '@/hooks/use-schedule-notification'
 import { useWarmUpBrowser } from '@/hooks/use-warm-up-browser'
 import { useColorScheme } from '@/hooks/useColorScheme'
@@ -47,9 +48,10 @@ import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persi
 import { focusManager, onlineManager } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { LinearGradient } from 'expo-linear-gradient'
+import * as Updates from 'expo-updates'
 import { cssInterop } from 'nativewind'
 import { PostHogProvider } from 'posthog-react-native'
-import { useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { AppState, type AppStateStatus, Platform } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
@@ -130,8 +132,29 @@ function RootLayout() {
   })
   const ref = useNavigationContainerRef()
   useNotificationObserver()
+  const [updating, setUpdating] = useState<boolean>(false)
 
+  const checkAndForceUpdates = useCallback(async () => {
+    if (__DEV__) {
+      return
+    }
+    setUpdating(true)
+    try {
+      const update = await Updates.checkForUpdateAsync()
+      if (update.isAvailable) {
+        await Updates.fetchUpdateAsync()
+        await Updates.reloadAsync()
+      }
+    } catch (error) {
+      Sentry.captureException(error)
+    }
+    setUpdating(false)
+  }, [])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
+    checkAndForceUpdates()
+
     setTimeout(() => SplashScreen.hideAsync(), 2000)
 
     const subscription = AppState.addEventListener('change', onAppStateChange)
@@ -175,18 +198,22 @@ function RootLayout() {
                 >
                   <SafeAreaProvider>
                     <GestureHandlerRootView>
-                      <BottomSheetModalProvider>
-                        <Stack screenOptions={{ headerShown: false }}>
-                          <Stack.Screen
-                            name="(aux)"
-                            options={{
-                              presentation: 'modal',
-                            }}
-                          />
-                        </Stack>
-                        <ToastRoot />
-                        <PortalHost />
-                      </BottomSheetModalProvider>
+                      {updating ? (
+                        <UpdateLoader />
+                      ) : (
+                        <BottomSheetModalProvider>
+                          <Stack screenOptions={{ headerShown: false }}>
+                            <Stack.Screen
+                              name="(aux)"
+                              options={{
+                                presentation: 'modal',
+                              }}
+                            />
+                          </Stack>
+                          <ToastRoot />
+                          <PortalHost />
+                        </BottomSheetModalProvider>
+                      )}
                     </GestureHandlerRootView>
                   </SafeAreaProvider>
                 </ThemeProvider>

apps/mobile/components/common/update-loader.tsx

@@ -0,0 +1,17 @@
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { View } from 'react-native'
+import UpdateIllustration from '../svg-assets/update-illustration'
+import { Text } from '../ui/text'
+
+export function UpdateLoader() {
+  const { i18n } = useLingui()
+  return (
+    <View className="flex-1 items-center justify-center gap-12 bg-background">
+      <UpdateIllustration className="h-72 text-primary" />
+      <Text className="text-muted-foreground">{t(
+        i18n,
+      )`6pm is updating, please wait...`}</Text>
+    </View>
+  )
+}

apps/mobile/hooks/use-ota-updates.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import * as Updates from 'expo-updates'
+
+export function useOTAUpdates() {
+  const { isLoading, refetch } = useQuery({
+    queryKey: ['updates'],
+    queryFn: async () => {
+      await Updates.fetchUpdateAsync()
+      await Updates.reloadAsync()
+    },
+    enabled: false,
+  })
+
+  async function checkForUpdate() {
+    return await Updates.checkForUpdateAsync()
+  }
+
+  return {
+    checkForUpdate,
+    startUpdate: refetch,
+    updating: isLoading,
+  }
+}