Add version checking.

Author: codeAbinash

App.tsx

@@ -31,7 +31,6 @@ import Test from '@screens/Test'
 import RandomColor from '@screens/Try/RandomColor'
 import RandomPassword from '@screens/Try/RandomPassword'
 import YourAge from '@screens/Try/YourAge'
-import ForceUpdate, { type ForceUpdateParamList } from '@screens/Update/ForceUpdate'
 import Update, { type UpdateParamList } from '@screens/Update/Update'
 import type { ConfirmCityParamList } from '@screens/Weather/ConfirmCity'
 import { type WeatherLocationParamList } from '@screens/Weather/WeatherLocation'
@@ -135,7 +134,6 @@ export type RootStackParamList = {
   RandomPassword: undefined
   GlobalSearch: undefined
   Update: UpdateParamList
-  ForceUpdate: ForceUpdateParamList
   Splash: undefined
   Login: undefined
   Signup: undefined
@@ -224,7 +222,7 @@ function Navigation() {
         <Stack.Screen name='RandomPassword' component={RandomPassword} options={GestureEnabled} />
         <Stack.Screen name='GlobalSearch' component={GlobalSearch} options={IOS_BOTTOM_STYLE} />
         <Stack.Screen name='Update' component={Update} options={IOS_BOTTOM_STYLE} />
-        <Stack.Screen name='ForceUpdate' component={ForceUpdate} options={GestureEnabled} />
+        {/* <Stack.Screen name='ForceUpdate' component={Update} options={GestureEnabled} /> */}
         <Stack.Screen name='Devices' component={Devices} options={GestureEnabled} />
         <Stack.Screen name='Device' component={Device} options={GestureEnabled} />
       </Stack.Navigator>

src/assets/icons/icons.ts

@@ -128,3 +128,4 @@ export { default as Tick01SolidIcon } from '@icons/tick-01-solid-rounded.svg'
 export { default as WindowsOldSolidIcon } from '@icons/windows-old-solid-rounded.svg'
 export { default as AppleSolidIcon } from '@icons/apple-solid-rounded.svg'
 export { default as ChromeSolidIcon } from '@icons/chrome-solid-rounded.svg'
+export { default as SquareArrowUp02SolidIcon } from '@icons/square-arrow-up-02-solid-rounded.svg'

src/assets/icons/src/square-arrow-up-02-solid-rounded.svg

@@ -11,6 +11,8 @@ declare const client: {
                         date: any;
                         forceUpdate: any;
                         features: any;
+                        versionCode: any;
+                        size: any;
                     };
                 };
                 outputFormat: "json";

src/rpc/hcWithType.d.ts

@@ -0,0 +1,42 @@
+import versionStore from '@/zustand/versionStore'
+import { useQuery } from '@tanstack/react-query'
+import { client } from '@utils/client'
+import { APP_VERSION_CODE } from '@utils/constants'
+import type { NavProp } from '@utils/types'
+import { useEffect } from 'react'
+
+export default function CheckVersion({ navigation }: NavProp) {
+  const { data } = useQuery({
+    queryKey: ['checkVersion'],
+    queryFn: async () => await (await client.api.version.$get()).json(),
+  })
+
+  const setVersion = versionStore((state) => state.setVersion)
+
+  useEffect(() => {
+    if (data && data.status) {
+      const isNew = APP_VERSION_CODE < data.data?.versionCode
+      setVersion({
+        features: data.data?.features,
+        forceUpdate: data.data?.forceUpdate,
+        size: data.data?.size,
+        version: data.data?.version,
+        versionCode: data.data?.versionCode,
+      })
+      if (isNew) {
+        console.log('New Version Available')
+        if (data.data?.forceUpdate) {
+          console.log('Force Update')
+          navigation.reset({
+            index: 0,
+            routes: [{ name: 'Update', params: data.data }],
+          })
+        } else {
+          console.log('Update Available')
+        }
+      }
+    }
+  }, [data, navigation, setVersion])
+
+  return null
+}

src/screens/Home/CheckVersion.tsx

@@ -3,12 +3,12 @@ import Btn from '@components/Button'
 import Feature from '@components/Feature'
 import { PaddingBottom } from '@components/SafePadding'
 import { Colors } from '@utils/colors'
-import { APP_VERSION } from '@utils/data'
-import { Bold, Medium, PoppinsMedium, SemiBold } from '@utils/fonts'
+import { APP_VERSION } from '@utils/constants'
+import { Bold, Medium, SemiBold } from '@utils/fonts'
 import type { NavProp } from '@utils/types'
 import { getLocalDate, greetingByTime } from '@utils/utils'
 import React from 'react'
-import { StatusBar, Text, View } from 'react-native'
+import { StatusBar, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 
 export default function Greeting({ navigation }: NavProp) {

src/screens/Home/Greeting.tsx

@@ -10,21 +10,12 @@ import type { StackNav } from '@utils/types'
 import React, { useEffect, useMemo } from 'react'
 import { Dimensions, Text, TouchableOpacity, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
+import CheckVersion from './CheckVersion'
 import styles, { hw as height_weight } from './style'
 
 const { width } = Dimensions.get('window')
 
 export default function HomeScreen({ navigation }: { navigation: StackNav }) {
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     navigation.navigate('Update', {
-  //       version: '1.0.0',
-  //       size: '10MB',
-  //       whatsNew: ['New Features', 'Bug Fixes'],
-  //     })
-  //   }, 1000)
-  // }, [navigation])
-
   const setUser = profileStore((state) => state.setUser)
 
   const { mutate } = useMutation({
@@ -45,6 +36,7 @@ export default function HomeScreen({ navigation }: { navigation: StackNav }) {
     <>
       <View className='bg-zinc-50 px-5 pt-1 dark:bg-black'>
         <PaddingTop />
+        <CheckVersion navigation={navigation} />
       </View>
       <ScrollView className='flex-1 bg-zinc-50 dark:bg-black' showsVerticalScrollIndicator={false}>
         <View style={{ gap: 10 }} className='pb-10'>

src/screens/Home/HomeScreen.tsx

@@ -1,8 +1,7 @@
 import AppIconRound from '@assets/icons/icon_round.svg'
 import { useQuery } from '@tanstack/react-query'
 import { client } from '@utils/client'
-// import { client } from '@utils/client'
-import { APP_VERSION } from '@utils/data'
+import { APP_VERSION } from '@utils/constants'
 import { SemiBold } from '@utils/fonts'
 import React from 'react'
 import { View } from 'react-native'

src/screens/Settings/Extra/About.tsx

@@ -1,5 +1,6 @@
 import { devOptStore } from '@/zustand/devOptStore'
 import profileStore from '@/zustand/profileStore'
+import versionStore from '@/zustand/versionStore'
 import {
   BrushSolidIcon,
   BubbleChatSolidIcon,
@@ -15,27 +16,30 @@ import {
   Logout02SolidIcon,
   PolicySolidIcon,
   ShieldUserSolidIcon,
+  SquareArrowUp02SolidIcon,
   SquareLock02SolidIcon,
   TelegramSolidIcon,
   UserSolidIcon,
   Wallet02SolidIcon,
 } from '@assets/icons/icons'
 import { Gap12, Gap20 } from '@components/Gap'
 import RoundedIcon from '@components/RoundedIcon'
+import RoundNotification from '@components/RoundNotification'
 import { PaddingBottom, PaddingTop } from '@components/SafePadding'
 import Search from '@components/Search'
 import { SettGroup, SettOption, SettText } from '@components/Settings'
-import { TxtAcc } from '@components/Text'
+import { Txt, TxtAcc } from '@components/Text'
 import { useIsFocused } from '@react-navigation/native'
 import { Colors } from '@utils/colors'
-import { APP_VERSION, APP_VERSION_CODE, ask_a_question, join_telegram_channel } from '@utils/data'
+import { APP_VERSION, APP_VERSION_CODE, ask_a_question, join_telegram_channel } from '@utils/constants'
 import { Bold } from '@utils/fonts'
 import { Caches, clearStorage, getStartWithSize, getStorageSize } from '@utils/storage'
 import type { NavProp } from '@utils/types'
 import { screenDelay, toReadableSize } from '@utils/utils'
 import React, { useEffect } from 'react'
 import { useColorScheme, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
+import Animated, { FadeIn } from 'react-native-reanimated'
 // function getTransparentCardStyle(scheme: ColorSchemeName) {
 //   return scheme === 'dark' ? 'aa' : '77'
 // }
@@ -92,6 +96,7 @@ export default function Settings({ navigation }: NavProp) {
               Hello {user?.name.split(' ')[0]}, Go to each section to customize your experience. All settings are saved
               automatically.
             </SettText>
+            <UpdateSettings navigation={navigation} />
             <SettGroup title='General'>
               {/* <SettOption
                 title='App Update'
@@ -284,3 +289,26 @@ function AdminSettings({ navigation }: NavProp) {
     </Gap12>
   )
 }
+
+function UpdateSettings({ navigation }: NavProp) {
+  const version = versionStore((state) => state.version)
+  const isNew = version ? APP_VERSION_CODE < version.versionCode : false
+
+  if (!isNew) return null
+
+  return (
+    <Gap12>
+      <Animated.View entering={FadeIn}>
+        <SettGroup>
+          <SettOption
+            title={isNew ? 'Update available' : 'Check for updates'}
+            Icon={<RoundedIcon Icon={SquareArrowUp02SolidIcon} />}
+            arrow
+            onPress={() => version && navigation.navigate('Update', { shouldGoBack: true })}
+            Right={isNew ? <RoundNotification n={1} /> : <Txt>{`v${APP_VERSION}`}</Txt>}
+          />
+        </SettGroup>
+      </Animated.View>
+    </Gap12>
+  )
+}

src/screens/Settings/Settings.tsx

@@ -7,11 +7,11 @@ import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTim
 export default function UpdateAvailableUI({
   version,
   size,
-  whatsNew,
+  features,
 }: {
   version: string
   size: string
-  whatsNew: Array<string>
+  features: Array<string>
 }) {
   const rotate = useSharedValue(0)
 
@@ -45,7 +45,7 @@ export default function UpdateAvailableUI({
         latest.
       </Regular>
       <View className='mt-5' style={{ gap: 5 }}>
-        {whatsNew.map((item, index) => (
+        {features.map((item, index) => (
           <Regular key={index} className='text-white opacity-80' style={{ fontSize: 11 }}>
             • {'  '}
             {item}