Improved list and feed errors (#1798)

* Fix error-state rendering of ProfileList

* Unsave/unpin lists on delete

* Improve handling of failing feedgens

* Only show 'remove' btn on feed DNE

src/view/com/posts/Feed.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native'
 import {FlatList} from '../util/Views'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {ErrorMessage} from '../util/error/ErrorMessage'
+import {FeedErrorMessage} from './FeedErrorMessage'
 import {PostsFeedModel} from 'state/models/feeds/posts'
 import {FeedSlice} from './FeedSlice'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
@@ -125,10 +125,7 @@ export const Feed = observer(function Feed({
         return renderEmptyState()
       } else if (item === ERROR_ITEM) {
         return (
-          <ErrorMessage
-            message={feed.error}
-            onPressTryAgain={onPressTryAgain}
-          />
+          <FeedErrorMessage feed={feed} onPressTryAgain={onPressTryAgain} />
         )
       } else if (item === LOAD_MORE_ERROR_ITEM) {
         return (

src/view/com/posts/FeedErrorMessage.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AtUri, AppBskyFeedGetFeed as GetCustomFeed} from '@atproto/api'
+import {PostsFeedModel, KnownError} from 'state/models/feeds/posts'
+import {Text} from '../util/text/Text'
+import {Button} from '../util/forms/Button'
+import * as Toast from '../util/Toast'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
+import {useStores} from 'state/index'
+
+const MESSAGES = {
+  [KnownError.Unknown]: '',
+  [KnownError.FeedgenDoesNotExist]: `Hmmm, we're having trouble finding this feed. It may have been deleted.`,
+  [KnownError.FeedgenMisconfigured]:
+    'Hmm, the feed server appears to be misconfigured. Please let the feed owner know about this issue.',
+  [KnownError.FeedgenBadResponse]:
+    'Hmm, the feed server gave a bad response. Please let the feed owner know about this issue.',
+  [KnownError.FeedgenOffline]:
+    'Hmm, the feed server appears to be offline. Please let the feed owner know about this issue.',
+  [KnownError.FeedgenUnknown]:
+    'Hmm, some kind of issue occured when contacting the feed server. Please let the feed owner know about this issue.',
+}
+
+export function FeedErrorMessage({
+  feed,
+  onPressTryAgain,
+}: {
+  feed: PostsFeedModel
+  onPressTryAgain: () => void
+}) {
+  if (
+    typeof feed.knownError === 'undefined' ||
+    feed.knownError === KnownError.Unknown
+  ) {
+    return (
+      <ErrorMessage message={feed.error} onPressTryAgain={onPressTryAgain} />
+    )
+  }
+
+  return <FeedgenErrorMessage feed={feed} knownError={feed.knownError} />
+}
+
+function FeedgenErrorMessage({
+  feed,
+  knownError,
+}: {
+  feed: PostsFeedModel
+  knownError: KnownError
+}) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const navigation = useNavigation<NavigationProp>()
+  const msg = MESSAGES[knownError]
+  const uri = (feed.params as GetCustomFeed.QueryParams).feed
+  const [ownerDid] = safeParseFeedgenUri(uri)
+
+  const onViewProfile = React.useCallback(() => {
+    navigation.navigate('Profile', {name: ownerDid})
+  }, [navigation, ownerDid])
+
+  const onRemoveFeed = React.useCallback(async () => {
+    store.shell.openModal({
+      name: 'confirm',
+      title: 'Remove feed',
+      message: 'Remove this feed from your saved feeds?',
+      async onPressConfirm() {
+        try {
+          await store.preferences.removeSavedFeed(uri)
+        } catch (err) {
+          Toast.show(
+            'There was an an issue removing this feed. Please check your internet connection and try again.',
+          )
+          store.log.error('Failed to remove feed', {err})
+        }
+      },
+      onPressCancel() {
+        store.shell.closeModal()
+      },
+    })
+  }, [store, uri])
+
+  return (
+    <View
+      style={[
+        pal.border,
+        pal.viewLight,
+        {
+          borderTopWidth: 1,
+          paddingHorizontal: 20,
+          paddingVertical: 18,
+          gap: 12,
+        },
+      ]}>
+      <Text style={pal.text}>{msg}</Text>
+      <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+        {knownError === KnownError.FeedgenDoesNotExist && (
+          <Button type="inverted" label="Remove feed" onPress={onRemoveFeed} />
+        )}
+        <Button
+          type="default-light"
+          label="View profile"
+          onPress={onViewProfile}
+        />
+      </View>
+    </View>
+  )
+}
+
+function safeParseFeedgenUri(uri: string): [string, string] {
+  try {
+    const urip = new AtUri(uri)
+    return [urip.hostname, urip.rkey]
+  } catch {
+    return ['', '']
+  }
+}

src/view/com/util/Views.d.ts

@@ -1 +1,8 @@
-export {FlatList, ScrollView, View as CenteredView} from 'react-native'
+import React from 'react'
+import {ViewProps} from 'react-native'
+export {FlatList, ScrollView} from 'react-native'
+export function CenteredView({
+  style,
+  sideBorders,
+  ...props
+}: React.PropsWithChildren<ViewProps & {sideBorders?: boolean}>)