handle expo updates

parti-renaissance · Jul 25, 2024 · 82fe99a · 82fe99a
1 parent 851e672
commit 82fe99a
Show file tree

Hide file tree

Showing 7 changed files with 1,751 additions and 1,550 deletions.
diff --git a/app.json b/app.json
@@ -125,7 +125,8 @@
       "typedRoutes": true
     },
     "updates": {
-      "url": "https://u.expo.dev/3b41ebc2-860e-4ccb-a101-5edc6b0c7558"
+      "url": "https://u.expo.dev/3b41ebc2-860e-4ccb-a101-5edc6b0c7558",
+      "checkAutomatically": "NEVER"
     }
   }
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -78,7 +78,7 @@ function Root() {
   const [isFontsLoaded] = useImportFont()
   useRegisterRoutingInstrumentation()
   const insets = useSafeAreaInsets()
-  const { isBuildUpdateAvailable, checkForUpdate } = useAppUpdate()
+  const { isBuildUpdateAvailable, checkForUpdate, isUpdateAvailable } = useAppUpdate()
 
   useEffect(() => {
     const subscription = AppState.addEventListener('change', (nextAppState) => {
@@ -103,7 +103,9 @@ function Root() {
               <SessionProvider>
                 <VoxToast />
                 <ToastViewport flexDirection="column" top={getTokenValue('$4', 'space') + insets.top} left={insets.left} right={insets.right} />
-                <WaitingRoomHoc isLoading={!isFontsLoaded}>{isBuildUpdateAvailable && !isWeb ? <UpdateScreen /> : <Slot />}</WaitingRoomHoc>
+                <WaitingRoomHoc isLoading={!isFontsLoaded}>
+                  {(isBuildUpdateAvailable || isUpdateAvailable) && !isWeb ? <UpdateScreen isBuildUpdate={isBuildUpdateAvailable} /> : <Slot />}
+                </WaitingRoomHoc>
               </SessionProvider>
             </PortalProvider>
           </ThemeProvider>

diff --git a/package.json b/package.json
@@ -46,12 +46,12 @@
     "@rnmapbox/maps": "^10.1.23",
     "@ronradtke/react-native-markdown-display": "^8.0.0",
     "@sentry/react-native": "~5.22.0",
-    "@tamagui/babel-plugin": "1.98.0",
-    "@tamagui/config": "1.98.0",
-    "@tamagui/lucide-icons": "1.98.0",
-    "@tamagui/metro-plugin": "1.98.0",
-    "@tamagui/select": "1.98.0",
-    "@tamagui/toast": "1.98.0",
+    "@tamagui/babel-plugin": "1.104.2",
+    "@tamagui/config": "1.104.2",
+    "@tamagui/lucide-icons": "1.104.2",
+    "@tamagui/metro-plugin": "1.104.2",
+    "@tamagui/select": "1.104.2",
+    "@tamagui/toast": "1.104.2",
     "@tanstack/react-query": "^5.25.0",
     "@testing-library/react-native": "^12.4.3",
     "@turf/turf": "^7.0.0",
@@ -68,39 +68,39 @@
     "country-data": "^0.0.31",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
-    "expo": "~51.0.8",
+    "expo": "~51.0.22",
     "expo-application": "~5.9.1",
     "expo-auth-session": "~5.5.2",
     "expo-blur": "~13.0.2",
-    "expo-build-properties": "~0.12.1",
+    "expo-build-properties": "~0.12.3",
     "expo-checkbox": "~3.0.0",
     "expo-clipboard": "~6.0.3",
-    "expo-constants": "~16.0.1",
+    "expo-constants": "~16.0.2",
     "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.14",
+    "expo-dev-client": "~4.0.20",
     "expo-device": "~6.0.2",
-    "expo-font": "~12.0.5",
-    "expo-image": "~1.12.9",
+    "expo-font": "~12.0.9",
+    "expo-image": "~1.12.13",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-localization": "~15.0.3",
     "expo-location": "~17.0.1",
-    "expo-notifications": "~0.28.7",
-    "expo-router": "~3.5.14",
+    "expo-notifications": "~0.28.11",
+    "expo-router": "~3.5.18",
     "expo-screen-orientation": "~7.0.5",
-    "expo-secure-store": "~13.0.1",
+    "expo-secure-store": "~13.0.2",
     "expo-sharing": "~12.0.1",
-    "expo-splash-screen": "~0.27.4",
+    "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.20",
+    "expo-updates": "~0.25.21",
     "expo-web-browser": "~13.0.3",
     "firebase": "^10.7.1",
     "formik": "^2.4.5",
     "fp-ts": "^2.16.6",
     "i18next": "^23.7.16",
     "intl-pluralrules": "^2.0.1",
     "jest": "^29.3.1",
-    "jest-expo": "~51.0.2",
+    "jest-expo": "~51.0.3",
     "jotai": "^2.6.2",
     "localized-address-format": "^1.3.1",
     "lodash": "^4.17.21",
@@ -113,7 +113,7 @@
     "react-i18next": "^14.0.0",
     "react-intl": "^6.5.5",
     "react-map-gl": "^7.1.7",
-    "react-native": "0.74.1",
+    "react-native": "0.74.3",
     "react-native-add-calendar-event": "^5.0.0",
     "react-native-cache": "^2.0.3",
     "react-native-check-version": "^1.1.1",
@@ -127,7 +127,7 @@
     "react-native-push-notification": "^8.1.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-render-html": "^6.3.4",
-    "react-native-safe-area-context": "4.10.1",
+    "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-super-grid": "^5.0.0",
     "react-native-svg": "15.2.0",
@@ -137,9 +137,9 @@
     "react-native-webview": "13.8.6",
     "react-test-renderer": "18.1.0",
     "sentry-expo": "~7.0.0",
-    "tamagui": "1.98.0",
+    "tamagui": "1.104.2",
     "tinycolor2": "^1.6.0",
-    "typescript": "^5.4.5",
+    "typescript": "~5.3.3",
     "typescript-eslint": "^7.11.0",
     "use-debounce": "^10.0.0",
     "zod": "^3.22.4",

diff --git a/src/components/Skeleton/CardSkeleton.tsx b/src/components/Skeleton/CardSkeleton.tsx
@@ -1,28 +1,9 @@
-import React, { ComponentProps, ComponentType, useCallback, useDeferredValue, useEffect, useMemo } from 'react'
-import { Dimensions, Platform } from 'react-native'
-import Animated, { interpolate, useAnimatedStyle, useSharedValue, withRepeat, withSpring } from 'react-native-reanimated'
+import React, { ComponentProps, useEffect } from 'react'
+import { Platform } from 'react-native'
 import Chip from '@/components/Chip/Chip'
 import { LinearGradient } from '@tamagui/linear-gradient'
-import { CalendarDays, MapPin, UserCheck, Users, Video } from '@tamagui/lucide-icons'
-import { use } from 'i18next'
-// import { LinearGradient } from 'expo-linear-gradient';
-import {
-  Circle,
-  getFontSize,
-  Image,
-  Separator,
-  Square,
-  Stack,
-  StackProps,
-  styled,
-  Card as TCard,
-  Text,
-  useMedia,
-  withStaticProperties,
-  XStack,
-  YStack,
-  ZStack,
-} from 'tamagui'
+import { Users } from '@tamagui/lucide-icons'
+import { Circle, Separator, Square, Stack, StackProps, styled, Card as TCard, Text, withStaticProperties, XStack, YStack } from 'tamagui'
 
 const CardFrame = styled(YStack, {
   backgroundColor: '$white1',
@@ -123,23 +104,6 @@ export type SkeCardLocationProps = {
   }
 }
 
-const SkeCardLocation = ({ location }: SkeCardLocationProps) => {
-  return location ? (
-    <XStack gap="$2" alignItems="center">
-      <MapPin size="$1" />
-      <Text lineBreakStrategyIOS="push-out">
-        <Text fontFamily="$PublicSans" fontWeight="$5" lineHeight="$2" fontSize="$1">
-          {location.city} {location.postalCode}
-        </Text>
-        <Text fontFamily="$PublicSans" fontWeight="$6" color="$textSecondary" lineHeight="$2" fontSize="$1">
-          {' '}
-          . {location.street}
-        </Text>
-      </Text>
-    </XStack>
-  ) : null
-}
-
 export type SkeCardAuthorProps = {
   author: {
     role?: string
@@ -158,43 +122,6 @@ const SkeCardAuthor = () => {
   )
 }
 
-export type SkeCardAttendeesProps = {
-  attendees?: {
-    pictures?: [string, string, string]
-    count: number
-  }
-}
-
-// const SkeCardAttendees = ({ attendees }: SkeCardAttendeesProps) => {
-//   if (!attendees)
-//     return (
-//       <Text fontFamily="$PublicSans" fontSize="$1" color="$textPrimary" lineHeight="$1">
-//         0 participant, soyez le premier !
-//       </Text>
-//     )
-//   const reverseIndex = (index: number) => attendees.pictures.length - 1 - index
-//   const getPictureUri = (index: number) => attendees.pictures[reverseIndex(index)]
-//   return (
-//     <XStack gap="$2" alignItems="center">
-//       {attendees.pictures && attendees.pictures.length > 3 ? (
-//         <ZStack width={68} height="$2">
-//           {attendees.pictures.map((_, index) => (
-//             <XStack key={encodeURI(getPictureUri(index))} x={reverseIndex(index) * 20} height="$2" width="$2" borderRadius="$10" overflow="hidden">
-//               <Image source={{ uri: getPictureUri(index), width: 50, height: 50 }} width="100%" alt="event image" resizeMode="cover" />
-//             </XStack>
-//           ))}
-//         </ZStack>
-//       ) : (
-//         <UserCheck size="$1" />
-//       )}
-
-//       <Text fontFamily="$PublicSans" color="$textPrimary" fontSize="$1" lineHeight="$1" fontWeight="$5">
-//         {attendees.count} {attendees.count > 1 ? 'Inscrits' : 'Inscrit'}
-//       </Text>
-//     </XStack>
-//   )
-// }
-
 const SkeCardImage = () => {
   return <Stack height="$20" flex={1} bg="$gray2" borderRadius="$1" />
 }
@@ -213,17 +140,6 @@ const SkeCardDescription = ({ full }: SkeCardDescritionProps) => {
   )
 }
 
-const SkeCardVisio = () => {
-  return (
-    <XStack gap="$2" alignItems="center">
-      <Video size="$1" />
-      <Text fontFamily="$PublicSans" fontWeight="$5" lineHeight="$2" fontSize="$1">
-        Visioconférence
-      </Text>
-    </XStack>
-  )
-}
-
 const SkeCardSection = ({ children, ...props }: StackProps) => {
   return (
     <>
@@ -236,7 +152,7 @@ const SkeCardSection = ({ children, ...props }: StackProps) => {
   )
 }
 
-const SkeCardSeparator = (props: StackProps) => <Separator borderStyle={Platform.OS !== 'ios' ? 'dashed' : 'solid'} />
+const SkeCardSeparator = (props: StackProps) => <Separator borderStyle={Platform.OS !== 'ios' ? 'dashed' : 'solid'} {...props} />
 
 export const SkeCard = withStaticProperties(SkeCardFrame, {
   Content: SkeCardContent,
@@ -245,16 +161,10 @@ export const SkeCard = withStaticProperties(SkeCardFrame, {
   Title: SkeCardTitle,
   Date: SkeCardDate,
   Actions: SkeActions,
-  //   Location: SkeCardLocation,
   Image: SkeCardImage,
   Author: SkeCardAuthor,
-  //   Attendees: SkeCardAttendees,
-  Description: SkeCardDescription,
   Section: SkeCardSection,
-  //   Visio: SkeCardVisio,
-  //   Capacity: SkeCardCapacity,
-  //   Separator: SkeCardSeparator,
-  //   Section: SkeCardSection,
+  Description: SkeCardDescription,
 })
 
 export default SkeCard
diff --git a/src/hooks/useAppUpdate.tsx b/src/hooks/useAppUpdate.tsx
@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react'
 import { Platform } from 'react-native'
 import { checkVersion } from 'react-native-check-version'
+import { ErrorMonitor } from '@/utils/ErrorMonitor'
 import { nativeApplicationVersion } from 'expo-application'
+import { checkForUpdateAsync, fetchUpdateAsync, useUpdates } from 'expo-updates'
 import { isWeb } from 'tamagui'
 
 export default function useAppUpdate() {
+  const updates = useUpdates()
   const [isBuildUpdateAvailable, setIsBuildUpdateAvailable] = useState(false)
 
   const checkForUpdate = () => {
@@ -23,7 +26,20 @@ export default function useAppUpdate() {
         setIsBuildUpdateAvailable(true)
       }
     }
-    return checkStoreUpdate()
+
+    const checkExpoUpdate = async () => {
+      try {
+        const update = await checkForUpdateAsync()
+
+        if (update.isAvailable) {
+          await fetchUpdateAsync()
+        }
+      } catch (error) {
+        ErrorMonitor.log('Expo update failed', error)
+      }
+    }
+
+    return Promise.allSettled([checkExpoUpdate(), checkStoreUpdate()])
   }
 
   useEffect(() => {
@@ -33,5 +49,6 @@ export default function useAppUpdate() {
   return {
     isBuildUpdateAvailable,
     checkForUpdate,
+    ...updates,
   }
 }
diff --git a/src/screens/update/updateScreen.tsx b/src/screens/update/updateScreen.tsx
@@ -2,17 +2,28 @@ import { useCallback } from 'react'
 import Text from '@/components/base/Text'
 import Title from '@/components/Title/Title'
 import redirectToStore from '@/helpers/redirectToStore'
+import useAppUpdate from '@/hooks/useAppUpdate'
 import useAsyncFn from '@/hooks/useAsyncFn'
+import { reloadAsync } from 'expo-updates'
 import { Button, Image, Spinner, View, YStack } from 'tamagui'
 
-export default function UpdateScreen() {
+interface Props {
+  isBuildUpdate?: boolean
+}
+
+export default function UpdateScreen({ isBuildUpdate = false }: Props) {
+  const { isDownloading } = useAppUpdate()
   const { isProcessing, trigger: onUpdate } = useAsyncFn(
     useCallback(async () => {
-      await redirectToStore()
+      if (isBuildUpdate) {
+        await redirectToStore()
+      } else {
+        await reloadAsync()
+      }
     }, []),
   )
 
-  const isDisabled = isProcessing
+  const isDisabled = isProcessing || isDownloading
 
   return (
     <View height="100%">