Bump versions

src/App.tsx

@@ -5,7 +5,6 @@ import audio from '@root/startup/audio'
 import dev from '@root/startup/dev'
 import log from '@root/startup/log'
 import netInfo from '@root/startup/netInfo'
-import onlineStatus from '@root/startup/onlineStatus'
 import sentry from '@root/startup/sentry'
 import { persistor, store } from '@root/store'
 import { getSettingsLanguage } from '@utils/slices/settingsSlice'
@@ -28,7 +27,6 @@ dev()
 sentry()
 audio()
 push()
-onlineStatus()
 
 log('log', 'react-query', 'initializing')
 const queryClient = new QueryClient()

src/Screens.tsx

@@ -1,4 +1,5 @@
-import { displayMessage, Message } from '@components/Message'
+import { displayMessage, Message, removeMessage } from '@components/Message'
+import { useNetInfo } from '@react-native-community/netinfo'
 import {
   NavigationContainer,
   NavigationContainerRef
@@ -22,7 +23,7 @@ import React, { createRef, useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import { useQueryClient } from 'react-query'
+import { onlineManager, useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
 
@@ -46,18 +47,25 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
 
   const routeNameRef = useRef<string | undefined>()
 
-  // const isConnected = useNetInfo().isConnected
-  // const [firstRender, setFirstRender] = useState(false)
-  // useEffect(() => {
-  //   if (firstRender) {
-  //     // bug in netInfo on first render as false
-  //     if (isConnected !== false) {
-  //       toast({ type: 'error', content: '手机🈚️网络', autoHide: false })
-  //     }
-  //   } else {
-  //     setFirstRender(true)
-  //   }
-  // }, [isConnected, firstRender])
+  const isConnected = useNetInfo().isConnected
+  useEffect(() => {
+    switch (isConnected) {
+      case true:
+        onlineManager.setOnline(isConnected)
+        removeMessage()
+        break
+      case false:
+        onlineManager.setOnline(isConnected)
+        displayMessage({
+          mode,
+          type: 'error',
+          message: t('network.disconnected.message'),
+          description: t('network.disconnected.description'),
+          autoHide: false
+        })
+        break
+    }
+  }, [isConnected])
 
   // Push hooks
   const instances = useSelector(
@@ -192,3 +200,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
 }
 
 export default React.memo(Screens, () => true)
+function toast (arg0: { type: string; content: string; autoHide: boolean }) {
+  throw new Error('Function not implemented.')
+}

src/api/instance.ts

@@ -38,7 +38,7 @@ const apiInstance = async <T = unknown>({
     domain = state.instances.instances[instanceActive].url
     token = state.instances.instances[instanceActive].token
   } else {
-    console.error(
+    console.warn(
       ctx.bgRed.white.bold(' API ') + ' ' + 'No instance domain is provided'
     )
     return Promise.reject()

src/components/Message.tsx

@@ -3,7 +3,10 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { getTheme } from '@utils/styles/themes'
 import React from 'react'
-import FlashMessage, { showMessage } from 'react-native-flash-message'
+import FlashMessage, {
+  hideMessage,
+  showMessage
+} from 'react-native-flash-message'
 import haptics from './haptics'
 
 const displayMessage = ({
@@ -70,6 +73,10 @@ const displayMessage = ({
   })
 }
 
+const removeMessage = () => {
+  hideMessage()
+}
+
 const Message = React.memo(
   () => {
     const { mode, theme } = useTheme()
@@ -100,4 +107,4 @@ const Message = React.memo(
   () => true
 )
 
-export { Message, displayMessage }
+export { Message, displayMessage, removeMessage }

src/i18n/en/common.ts

@@ -1,7 +1,14 @@
 export default {
+  network: {
+    disconnected: {
+      message: 'Lost network connection',
+      description: "Please check your phone's network setting"
+    }
+  },
   screenshot: {
     title: 'Privacy Protection',
-    message: 'Please do not disclose other user\'s identity, such as username, avatar, etc. Thank you!',
+    message:
+      "Please do not disclose other user's identity, such as username, avatar, etc. Thank you!",
     button: 'Confirm'
   },
   index: {

src/i18n/zh-Hans/common.ts

@@ -1,4 +1,10 @@
 export default {
+  network: {
+    disconnected: {
+      message: '无法连接到网络',
+      description: '请检查手机设置里的网络连接'
+    }
+  },
   screenshot: {
     title: '隐私保护',
     message: '请确保不要泄露其它用户的敏感信息，例如用户名、头像等，谢谢！',

src/screens/Tabs/Local.tsx

@@ -5,12 +5,10 @@ import TimelineDefault from '@components/Timeline/Default'
 import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
 import { ScreenTabsParamList } from '@screens/Tabs'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import { useSelector } from 'react-redux'
 import sharedScreens from './Shared/sharedScreens'
 
 export type TabLocalProp = BottomTabScreenProps<
@@ -23,7 +21,6 @@ const Stack = createNativeStackNavigator<Nav.TabLocalStackParamList>()
 const TabLocal = React.memo(
   ({ navigation }: TabLocalProp) => {
     const { t } = useTranslation('local')
-    const instanceActive = useSelector(getInstanceActive)
 
     const screenOptions = useMemo(
       () => ({
@@ -60,10 +57,7 @@ const TabLocal = React.memo(
       []
     )
     const children = useCallback(
-      () =>
-        instanceActive !== -1 ? (
-          <Timeline queryKey={queryKey} customProps={{ renderItem }} />
-        ) : null,
+      () => <Timeline queryKey={queryKey} customProps={{ renderItem }} />,
       []
     )
 

src/screens/Tabs/Public.tsx

@@ -4,19 +4,15 @@ import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
-import { useNavigation } from '@react-navigation/native'
 import { ScreenTabsParamList } from '@screens/Tabs'
 import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { TabView } from 'react-native-tab-view'
-import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'
-import { useSelector } from 'react-redux'
 
 export type TabPublicProps = BottomTabScreenProps<
   ScreenTabsParamList,
@@ -29,7 +25,6 @@ const TabPublic = React.memo(
   ({ navigation }: TabPublicProps) => {
     const { t, i18n } = useTranslation()
     const { mode } = useTheme()
-    const instanceActive = useSelector(getInstanceActive)
 
     const [segment, setSegment] = useState(0)
     const pages: {
@@ -82,10 +77,7 @@ const TabPublic = React.memo(
     )
 
     const routes = pages.map(p => ({ key: p.key }))
-    const renderPager = useCallback(
-      props => <ViewPagerAdapter {...props} />,
-      []
-    )
+
     const renderScene = useCallback(
       ({
         route: { key: page }
@@ -103,20 +95,19 @@ const TabPublic = React.memo(
       []
     )
     const children = useCallback(
-      () =>
-        instanceActive !== -1 ? (
-          <TabView
-            lazy
-            swipeEnabled
-            renderPager={renderPager}
-            renderScene={renderScene}
-            renderTabBar={() => null}
-            onIndexChange={index => setSegment(index)}
-            navigationState={{ index: segment, routes }}
-            initialLayout={{ width: Dimensions.get('screen').width }}
-          />
-        ) : null,
-      [segment, instanceActive]
+      () => (
+        // @ts-ignore
+        <TabView
+          lazy
+          swipeEnabled
+          renderScene={renderScene}
+          renderTabBar={() => null}
+          onIndexChange={index => setSegment(index)}
+          navigationState={{ index: segment, routes }}
+          initialLayout={{ width: Dimensions.get('screen').width }}
+        />
+      ),
+      [segment]
     )
 
     return (

src/startup/netInfo.ts

@@ -13,6 +13,7 @@ const netInfo = async (): Promise<{
   corrupted?: string
 }> => {
   log('log', 'netInfo', 'initializing')
+
   const netInfo = await NetInfo.fetch()
   const instance = getInstance(store.getState())
 

src/startup/onlineStatus.ts

@@ -1,15 +0,0 @@
-import NetInfo from '@react-native-community/netinfo'
-import { onlineManager } from 'react-query'
-import log from './log'
-
-const onlineStatus = () =>
-  onlineManager.setEventListener(setOnline => {
-    log('log', 'onlineStatus', 'added onlineManager listener')
-    return NetInfo.addEventListener(state => {
-      log('log', 'onlineStatus', `setting online state ${state.isConnected}`)
-      // @ts-ignore
-      setOnline(state.isConnected)
-    })
-  })
-
-export default onlineStatus