Push not available scenario

src/i18n/en/screens/tabs.json

@@ -144,6 +144,7 @@
       }
     },
     "push": {
+      "notAvailable": "Your phone does not support tooot's push notification",
       "enable": {
         "direct": "Enable push notification",
         "settings": "Enable in settings"

src/i18n/zh-Hans/screens/tabs.json

@@ -144,6 +144,7 @@
       }
     },
     "push": {
+      "notAvailable": "您的机型暂不支持 tooot 推送通知",
       "enable": {
         "direct": "启用推送通知",
         "settings": "在系统设置中启用"

src/screens/Tabs/Me/Push.tsx

@@ -1,5 +1,6 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
+import Icon from '@components/Icon'
 import { MenuContainer, MenuRow } from '@components/Menu'
 import { updateInstancePush } from '@utils/slices/instances/updatePush'
 import { updateInstancePushAlert } from '@utils/slices/instances/updatePushAlert'
@@ -12,14 +13,16 @@ import {
 } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
+import { useTheme } from '@utils/styles/ThemeManager'
 import * as Notifications from 'expo-notifications'
 import * as WebBrowser from 'expo-web-browser'
 import React, { useState, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AppState, Linking, ScrollView } from 'react-native'
+import { AppState, Linking, ScrollView, Text, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 const TabMePush: React.FC = () => {
+  const { theme } = useTheme()
   const { t } = useTranslation('screenTabs')
   const instanceAccount = useSelector(
     getInstanceAccount,
@@ -30,6 +33,9 @@ const TabMePush: React.FC = () => {
   const dispatch = useDispatch()
   const instancePush = useSelector(getInstancePush)
 
+  const [pushAvailable, setPushAvailable] = useState<boolean | undefined>(
+    undefined
+  )
   const [pushEnabled, setPushEnabled] = useState<boolean>()
   const [pushCanAskAgain, setPushCanAskAgain] = useState<boolean>()
   const checkPush = async () => {
@@ -39,10 +45,15 @@ const TabMePush: React.FC = () => {
     setPushCanAskAgain(settings.canAskAgain)
   }
   useEffect(() => {
+    Notifications.getExpoPushTokenAsync({
+      experienceId: '@xmflsct/tooot'
+    })
+      .then(data => setPushAvailable(!!data))
+      .catch(() => setPushAvailable(false))
     checkPush()
-    AppState.addEventListener('change', checkPush)
+    const subscription = AppState.addEventListener('change', checkPush)
     return () => {
-      AppState.removeEventListener('change', checkPush)
+      subscription.remove()
     }
   }, [])
 
@@ -54,13 +65,15 @@ const TabMePush: React.FC = () => {
 
   const alerts = useMemo(() => {
     return instancePush?.alerts
-      ? (['follow', 'favourite', 'reblog', 'mention', 'poll'] as [
+      ? (
-          'follow',
+          ['follow', 'favourite', 'reblog', 'mention', 'poll'] as [
-          'favourite',
+            'follow',
-          'reblog',
+            'favourite',
-          'mention',
+            'reblog',
-          'poll'
+            'mention',
-        ]).map(alert => (
+            'poll'
+          ]
+        ).map(alert => (
           <MenuRow
             key={alert}
             title={t(`me.push.${alert}.heading`)}
@@ -93,80 +106,108 @@ const TabMePush: React.FC = () => {
 
   return (
     <ScrollView>
-      {pushEnabled === false ? (
+      {pushAvailable !== false ? (
-        <MenuContainer>
+        <>
-          <Button
+          {pushEnabled === false ? (
-            type='text'
+            <MenuContainer>
-            content={
+              <Button
-              pushCanAskAgain
+                type='text'
-                ? t('me.push.enable.direct')
+                content={
-                : t('me.push.enable.settings')
+                  pushCanAskAgain
-            }
+                    ? t('me.push.enable.direct')
-            style={{
+                    : t('me.push.enable.settings')
-              marginTop: StyleConstants.Spacing.Global.PagePadding,
+                }
-              marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
+                style={{
-            }}
+                  marginTop: StyleConstants.Spacing.Global.PagePadding,
-            onPress={async () => {
+                  marginHorizontal:
-              if (pushCanAskAgain) {
+                    StyleConstants.Spacing.Global.PagePadding * 2
-                analytics('me_push_enabled_dialogue')
+                }}
-                const result = await Notifications.requestPermissionsAsync()
+                onPress={async () => {
-                setPushEnabled(result.granted)
+                  if (pushCanAskAgain) {
-                setPushCanAskAgain(result.canAskAgain)
+                    analytics('me_push_enabled_dialogue')
-              } else {
+                    const result = await Notifications.requestPermissionsAsync()
-                analytics('me_push_enabled_setting')
+                    setPushEnabled(result.granted)
-                Linking.openSettings()
+                    setPushCanAskAgain(result.canAskAgain)
+                  } else {
+                    analytics('me_push_enabled_setting')
+                    Linking.openSettings()
+                  }
+                }}
+              />
+            </MenuContainer>
+          ) : null}
+          <MenuContainer>
+            <MenuRow
+              title={t('me.push.global.heading', {
+                acct: `@${instanceAccount?.acct}@${instanceUri}`
+              })}
+              description={t('me.push.global.description')}
+              loading={instancePush?.global.loading}
+              switchDisabled={!pushEnabled || isLoading}
+              switchValue={
+                pushEnabled === false ? false : instancePush?.global.value
               }
-            }}
+              switchOnValueChange={() => {
+                analytics('me_push_global', {
+                  current: instancePush?.global.value,
+                  new: !instancePush?.global.value
+                })
+                dispatch(updateInstancePush(!instancePush?.global.value))
+              }}
+            />
+          </MenuContainer>
+          <MenuContainer>
+            <MenuRow
+              title={t('me.push.decode.heading')}
+              description={t('me.push.decode.description')}
+              loading={instancePush?.decode.loading}
+              switchDisabled={
+                !pushEnabled || !instancePush?.global.value || isLoading
+              }
+              switchValue={instancePush?.decode.value}
+              switchOnValueChange={() => {
+                analytics('me_push_decode', {
+                  current: instancePush?.decode.value,
+                  new: !instancePush?.decode.value
+                })
+                dispatch(updateInstancePushDecode(!instancePush?.decode.value))
+              }}
+            />
+            <MenuRow
+              title={t('me.push.howitworks')}
+              iconBack='ExternalLink'
+              onPress={() => {
+                analytics('me_push_howitworks')
+                WebBrowser.openBrowserAsync('https://tooot.app/how-push-works')
+              }}
+            />
+          </MenuContainer>
+          <MenuContainer>{alerts}</MenuContainer>
+        </>
+      ) : (
+        <View
+          style={{
+            flex: 1,
+            minHeight: '100%',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
+          <Icon
+            name='Frown'
+            size={StyleConstants.Font.Size.L}
+            color={theme.primaryDefault}
           />
-        </MenuContainer>
+          <Text
-      ) : null}
+            style={{
-      <MenuContainer>
+              ...StyleConstants.FontStyle.M,
-        <MenuRow
+              color: theme.primaryDefault
-          title={t('me.push.global.heading', {
+            }}
-            acct: `@${instanceAccount?.acct}@${instanceUri}`
+          >
-          })}
+            {t('me.push.notAvailable')}
-          description={t('me.push.global.description')}
+          </Text>
-          loading={instancePush?.global.loading}
+        </View>
-          switchDisabled={!pushEnabled || isLoading}
+      )}
-          switchValue={
-            pushEnabled === false ? false : instancePush?.global.value
-          }
-          switchOnValueChange={() => {
-            analytics('me_push_global', {
-              current: instancePush?.global.value,
-              new: !instancePush?.global.value
-            })
-            dispatch(updateInstancePush(!instancePush?.global.value))
-          }}
-        />
-      </MenuContainer>
-      <MenuContainer>
-        <MenuRow
-          title={t('me.push.decode.heading')}
-          description={t('me.push.decode.description')}
-          loading={instancePush?.decode.loading}
-          switchDisabled={
-            !pushEnabled || !instancePush?.global.value || isLoading
-          }
-          switchValue={instancePush?.decode.value}
-          switchOnValueChange={() => {
-            analytics('me_push_decode', {
-              current: instancePush?.decode.value,
-              new: !instancePush?.decode.value
-            })
-            dispatch(updateInstancePushDecode(!instancePush?.decode.value))
-          }}
-        />
-        <MenuRow
-          title={t('me.push.howitworks')}
-          iconBack='ExternalLink'
-          onPress={() => {
-            analytics('me_push_howitworks')
-            WebBrowser.openBrowserAsync('https://tooot.app/how-push-works')
-          }}
-        />
-      </MenuContainer>
-      <MenuContainer>{alerts}</MenuContainer>
     </ScrollView>
   )
 }