Improve error messages

src/view/com/posts/Feed.tsx

@@ -1,6 +1,7 @@
 import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Text, View, FlatList, StyleProp, ViewStyle} from 'react-native'
+import {ErrorMessage} from '../util/ErrorMessage'
 import {FeedModel, FeedItemModel} from '../../../state/models/feed-view'
 import {FeedItem} from './FeedItem'
 
@@ -8,10 +9,12 @@ export const Feed = observer(function Feed({
   feed,
   style,
   scrollElRef,
+  onPressTryAgain,
 }: {
   feed: FeedModel
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
+  onPressTryAgain?: () => void
 }) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
@@ -29,7 +32,14 @@ export const Feed = observer(function Feed({
       {feed.isLoading && !feed.isRefreshing && !feed.hasContent && (
         <Text>Loading...</Text>
       )}
-      {feed.hasError && <Text>{feed.error}</Text>}
+      {feed.hasError && (
+        <ErrorMessage
+          dark
+          message={feed.error}
+          style={{margin: 6}}
+          onPressTryAgain={onPressTryAgain}
+        />
+      )}
       {feed.hasContent && (
         <FlatList
           ref={scrollElRef}
@@ -41,7 +51,11 @@ export const Feed = observer(function Feed({
           onEndReached={onEndReached}
         />
       )}
-      {feed.isEmpty && <Text>This feed is empty!</Text>}
+      {feed.isEmpty && !feed.hasError && (
+        <View>
+          <Text>This feed is empty!</Text>
+        </View>
+      )}
     </View>
   )
 })