[APP-28] add status page link (#987)

* add status page to mobile

* add status page URL to super slow loading screen

* store STATUS_PAGE_URL in constants.ts

3 files changed, 51 insertions, 9 deletions

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 27f57a14e..34da35e4f 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -132,3 +132,5 @@ export function LINK_META_PROXY(serviceUrl: string) {
     return PROD_LINK_META_PROXY
   }
 }
+
+export const STATUS_PAGE_URL = 'https://status.bsky.app/'
diff --git a/src/view/com/auth/withAuthRequired.tsx b/src/view/com/auth/withAuthRequired.tsx
index a3f021277..8e57669be 100644
--- a/src/view/com/auth/withAuthRequired.tsx
+++ b/src/view/com/auth/withAuthRequired.tsx
@@ -1,11 +1,17 @@
 import React from 'react'
-import {ActivityIndicator, StyleSheet} from 'react-native'
+import {
+  ActivityIndicator,
+  Linking,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
 import {CenteredView} from '../util/Views'
 import {LoggedOut} from './LoggedOut'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
+import {STATUS_PAGE_URL} from 'lib/constants'
 
 export const withAuthRequired = <P extends object>(
   Component: React.ComponentType<P>,
@@ -26,7 +32,7 @@ function Loading() {
 
   const [isTakingTooLong, setIsTakingTooLong] = React.useState(false)
   React.useEffect(() => {
-    const t = setTimeout(() => setIsTakingTooLong(true), 15e3)
+    const t = setTimeout(() => setIsTakingTooLong(true), 15e3) // 15 seconds
     return () => clearTimeout(t)
   }, [setIsTakingTooLong])
 
@@ -38,6 +44,17 @@ function Loading() {
           ? "This is taking too long. There may be a problem with your internet or with the service, but we're going to try a couple more times..."
           : 'Connecting...'}
       </Text>
+      {isTakingTooLong ? (
+        <TouchableOpacity
+          onPress={() => {
+            Linking.openURL(STATUS_PAGE_URL)
+          }}
+          accessibilityRole="button">
+          <Text type="2xl" style={[styles.loadingText, pal.link]}>
+            Check Bluesky status page
+          </Text>
+        </TouchableOpacity>
+      ) : null}
     </CenteredView>
   )
 }
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 7a8c25c81..7356db54b 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   ActivityIndicator,
+  Linking,
   Platform,
   StyleSheet,
   TextStyle,
@@ -47,6 +48,7 @@ import {reset as resetNavigation} from '../../Navigation'
 // remove after backend testing finishes
 // -prf
 import {useDebugHeaderSetting} from 'lib/api/debug-appview-proxy-header'
+import {STATUS_PAGE_URL} from 'lib/constants'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
@@ -187,6 +189,10 @@ export const SettingsScreen = withAuthRequired(
       navigation.navigate('SavedFeeds')
     }, [navigation])
 
+    const onPressStatusPage = React.useCallback(() => {
+      Linking.openURL(STATUS_PAGE_URL)
+    }, [])
+
     return (
       <View style={[s.hContentRegion]} testID="settingsScreen">
         <ViewHeader title="Settings" />
@@ -529,13 +535,25 @@ export const SettingsScreen = withAuthRequired(
               </TouchableOpacity>
             </>
           ) : null}
-          <TouchableOpacity
-            accessibilityRole="button"
-            onPress={onPressBuildInfo}>
-            <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
-              Build version {AppInfo.appVersion} {AppInfo.updateChannel}
+          <View style={[styles.footer]}>
+            <TouchableOpacity
+              accessibilityRole="button"
+              onPress={onPressBuildInfo}>
+              <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+                Build version {AppInfo.appVersion} {AppInfo.updateChannel}
+              </Text>
+            </TouchableOpacity>
+            <Text type="sm" style={[pal.textLight]}>
+              &middot; &nbsp;
             </Text>
-          </TouchableOpacity>
+            <TouchableOpacity
+              accessibilityRole="button"
+              onPress={onPressStatusPage}>
+              <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+                Status page
+              </Text>
+            </TouchableOpacity>
+          </View>
           <View style={s.footerSpacer} />
         </ScrollView>
       </View>
@@ -621,7 +639,6 @@ const styles = StyleSheet.create({
   },
   buildInfo: {
     paddingVertical: 8,
-    paddingHorizontal: 18,
   },
 
   colorModeText: {
@@ -645,4 +662,10 @@ const styles = StyleSheet.create({
   toggleBtn: {
     paddingHorizontal: 0,
   },
+  footer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 18,
+  },
 })