Give explicit names to MobX observer components (#1413)

* Consider observer(...) as components

* Add display names to MobX observers

* Temporarily suppress nested components

* Suppress new false positives for react/prop-types

src/view/com/feeds/CustomFeed.tsx

@@ -15,120 +15,118 @@ import {AtUri} from '@atproto/api'
 import * as Toast from 'view/com/util/Toast'
 import {sanitizeHandle} from 'lib/strings/handles'
 
-export const CustomFeed = observer(
-  ({
-    item,
-    style,
-    showSaveBtn = false,
-    showDescription = false,
-    showLikes = false,
-  }: {
-    item: CustomFeedModel
-    style?: StyleProp<ViewStyle>
-    showSaveBtn?: boolean
-    showDescription?: boolean
-    showLikes?: boolean
-  }) => {
-    const store = useStores()
-    const pal = usePalette('default')
-    const navigation = useNavigation<NavigationProp>()
+export const CustomFeed = observer(function CustomFeedImpl({
+  item,
+  style,
+  showSaveBtn = false,
+  showDescription = false,
+  showLikes = false,
+}: {
+  item: CustomFeedModel
+  style?: StyleProp<ViewStyle>
+  showSaveBtn?: boolean
+  showDescription?: boolean
+  showLikes?: boolean
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const navigation = useNavigation<NavigationProp>()
 
-    const onToggleSaved = React.useCallback(async () => {
-      if (item.isSaved) {
-        store.shell.openModal({
-          name: 'confirm',
-          title: 'Remove from my feeds',
-          message: `Remove ${item.displayName} from my feeds?`,
-          onPressConfirm: async () => {
-            try {
-              await store.me.savedFeeds.unsave(item)
-              Toast.show('Removed from my feeds')
-            } catch (e) {
-              Toast.show('There was an issue contacting your server')
-              store.log.error('Failed to unsave feed', {e})
-            }
-          },
-        })
-      } else {
-        try {
-          await store.me.savedFeeds.save(item)
-          Toast.show('Added to my feeds')
-        } catch (e) {
-          Toast.show('There was an issue contacting your server')
-          store.log.error('Failed to save feed', {e})
-        }
+  const onToggleSaved = React.useCallback(async () => {
+    if (item.isSaved) {
+      store.shell.openModal({
+        name: 'confirm',
+        title: 'Remove from my feeds',
+        message: `Remove ${item.displayName} from my feeds?`,
+        onPressConfirm: async () => {
+          try {
+            await store.me.savedFeeds.unsave(item)
+            Toast.show('Removed from my feeds')
+          } catch (e) {
+            Toast.show('There was an issue contacting your server')
+            store.log.error('Failed to unsave feed', {e})
+          }
+        },
+      })
+    } else {
+      try {
+        await store.me.savedFeeds.save(item)
+        Toast.show('Added to my feeds')
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        store.log.error('Failed to save feed', {e})
       }
-    }, [store, item])
+    }
+  }, [store, item])
 
-    return (
-      <Pressable
-        testID={`feed-${item.displayName}`}
-        accessibilityRole="button"
-        style={[styles.container, pal.border, style]}
-        onPress={() => {
-          navigation.push('CustomFeed', {
-            name: item.data.creator.did,
-            rkey: new AtUri(item.data.uri).rkey,
-          })
-        }}
-        key={item.data.uri}>
-        <View style={[styles.headerContainer]}>
-          <View style={[s.mr10]}>
-            <UserAvatar type="algo" size={36} avatar={item.data.avatar} />
-          </View>
-          <View style={[styles.headerTextContainer]}>
-            <Text style={[pal.text, s.bold]} numberOfLines={3}>
-              {item.displayName}
-            </Text>
-            <Text style={[pal.textLight]} numberOfLines={3}>
-              by {sanitizeHandle(item.data.creator.handle, '@')}
-            </Text>
-          </View>
-          {showSaveBtn && (
-            <View>
-              <Pressable
-                accessibilityRole="button"
-                accessibilityLabel={
-                  item.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
-                }
-                accessibilityHint=""
-                onPress={onToggleSaved}
-                hitSlop={15}
-                style={styles.btn}>
-                {item.isSaved ? (
-                  <FontAwesomeIcon
-                    icon={['far', 'trash-can']}
-                    size={19}
-                    color={pal.colors.icon}
-                  />
-                ) : (
-                  <FontAwesomeIcon
-                    icon="plus"
-                    size={18}
-                    color={pal.colors.link}
-                  />
-                )}
-              </Pressable>
-            </View>
-          )}
+  return (
+    <Pressable
+      testID={`feed-${item.displayName}`}
+      accessibilityRole="button"
+      style={[styles.container, pal.border, style]}
+      onPress={() => {
+        navigation.push('CustomFeed', {
+          name: item.data.creator.did,
+          rkey: new AtUri(item.data.uri).rkey,
+        })
+      }}
+      key={item.data.uri}>
+      <View style={[styles.headerContainer]}>
+        <View style={[s.mr10]}>
+          <UserAvatar type="algo" size={36} avatar={item.data.avatar} />
         </View>
-
-        {showDescription && item.data.description ? (
-          <Text style={[pal.textLight, styles.description]} numberOfLines={3}>
-            {item.data.description}
+        <View style={[styles.headerTextContainer]}>
+          <Text style={[pal.text, s.bold]} numberOfLines={3}>
+            {item.displayName}
           </Text>
-        ) : null}
-
-        {showLikes ? (
-          <Text type="sm-medium" style={[pal.text, pal.textLight]}>
-            Liked by {item.data.likeCount || 0}{' '}
-            {pluralize(item.data.likeCount || 0, 'user')}
+          <Text style={[pal.textLight]} numberOfLines={3}>
+            by {sanitizeHandle(item.data.creator.handle, '@')}
           </Text>
-        ) : null}
-      </Pressable>
-    )
-  },
-)
+        </View>
+        {showSaveBtn && (
+          <View>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={
+                item.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
+              }
+              accessibilityHint=""
+              onPress={onToggleSaved}
+              hitSlop={15}
+              style={styles.btn}>
+              {item.isSaved ? (
+                <FontAwesomeIcon
+                  icon={['far', 'trash-can']}
+                  size={19}
+                  color={pal.colors.icon}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon="plus"
+                  size={18}
+                  color={pal.colors.link}
+                />
+              )}
+            </Pressable>
+          </View>
+        )}
+      </View>
+
+      {showDescription && item.data.description ? (
+        <Text style={[pal.textLight, styles.description]} numberOfLines={3}>
+          {item.data.description}
+        </Text>
+      ) : null}
+
+      {showLikes ? (
+        <Text type="sm-medium" style={[pal.text, pal.textLight]}>
+          Liked by {item.data.likeCount || 0}{' '}
+          {pluralize(item.data.likeCount || 0, 'user')}
+        </Text>
+      ) : null}
+    </Pressable>
+  )
+})
 
 const styles = StyleSheet.create({
   container: {