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

1 files changed, 190 insertions, 192 deletions

diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 661b3a899..0855f25bf 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -31,7 +31,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {makeProfileLink} from 'lib/routes/links'
 
-export const Post = observer(function Post({
+export const Post = observer(function PostImpl({
   view,
   showReplyLine,
   hideError,
@@ -88,214 +88,212 @@ export const Post = observer(function Post({
   )
 })
 
-const PostLoaded = observer(
-  ({
-    item,
-    record,
-    setDeleted,
-    showReplyLine,
-    style,
-  }: {
-    item: PostThreadItemModel
-    record: FeedPost.Record
-    setDeleted: (v: boolean) => void
-    showReplyLine?: boolean
-    style?: StyleProp<ViewStyle>
-  }) => {
-    const pal = usePalette('default')
-    const store = useStores()
+const PostLoaded = observer(function PostLoadedImpl({
+  item,
+  record,
+  setDeleted,
+  showReplyLine,
+  style,
+}: {
+  item: PostThreadItemModel
+  record: FeedPost.Record
+  setDeleted: (v: boolean) => void
+  showReplyLine?: boolean
+  style?: StyleProp<ViewStyle>
+}) {
+  const pal = usePalette('default')
+  const store = useStores()
 
-    const itemUri = item.post.uri
-    const itemCid = item.post.cid
-    const itemUrip = new AtUri(item.post.uri)
-    const itemHref = makeProfileLink(item.post.author, 'post', itemUrip.rkey)
-    const itemTitle = `Post by ${item.post.author.handle}`
-    let replyAuthorDid = ''
-    if (record.reply) {
-      const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
-      replyAuthorDid = urip.hostname
-    }
+  const itemUri = item.post.uri
+  const itemCid = item.post.cid
+  const itemUrip = new AtUri(item.post.uri)
+  const itemHref = makeProfileLink(item.post.author, 'post', itemUrip.rkey)
+  const itemTitle = `Post by ${item.post.author.handle}`
+  let replyAuthorDid = ''
+  if (record.reply) {
+    const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
+    replyAuthorDid = urip.hostname
+  }
 
-    const translatorUrl = getTranslatorLink(record?.text || '')
-    const needsTranslation = useMemo(
-      () =>
-        store.preferences.contentLanguages.length > 0 &&
-        !isPostInLanguage(item.post, store.preferences.contentLanguages),
-      [item.post, store.preferences.contentLanguages],
-    )
+  const translatorUrl = getTranslatorLink(record?.text || '')
+  const needsTranslation = useMemo(
+    () =>
+      store.preferences.contentLanguages.length > 0 &&
+      !isPostInLanguage(item.post, store.preferences.contentLanguages),
+    [item.post, store.preferences.contentLanguages],
+  )
 
-    const onPressReply = React.useCallback(() => {
-      store.shell.openComposer({
-        replyTo: {
-          uri: item.post.uri,
-          cid: item.post.cid,
-          text: record.text as string,
-          author: {
-            handle: item.post.author.handle,
-            displayName: item.post.author.displayName,
-            avatar: item.post.author.avatar,
-          },
+  const onPressReply = React.useCallback(() => {
+    store.shell.openComposer({
+      replyTo: {
+        uri: item.post.uri,
+        cid: item.post.cid,
+        text: record.text as string,
+        author: {
+          handle: item.post.author.handle,
+          displayName: item.post.author.displayName,
+          avatar: item.post.author.avatar,
         },
-      })
-    }, [store, item, record])
+      },
+    })
+  }, [store, item, record])
 
-    const onPressToggleRepost = React.useCallback(() => {
-      return item
-        .toggleRepost()
-        .catch(e => store.log.error('Failed to toggle repost', e))
-    }, [item, store])
+  const onPressToggleRepost = React.useCallback(() => {
+    return item
+      .toggleRepost()
+      .catch(e => store.log.error('Failed to toggle repost', e))
+  }, [item, store])
 
-    const onPressToggleLike = React.useCallback(() => {
-      return item
-        .toggleLike()
-        .catch(e => store.log.error('Failed to toggle like', e))
-    }, [item, store])
+  const onPressToggleLike = React.useCallback(() => {
+    return item
+      .toggleLike()
+      .catch(e => store.log.error('Failed to toggle like', e))
+  }, [item, store])
 
-    const onCopyPostText = React.useCallback(() => {
-      Clipboard.setString(record.text)
-      Toast.show('Copied to clipboard')
-    }, [record])
+  const onCopyPostText = React.useCallback(() => {
+    Clipboard.setString(record.text)
+    Toast.show('Copied to clipboard')
+  }, [record])
 
-    const onOpenTranslate = React.useCallback(() => {
-      Linking.openURL(translatorUrl)
-    }, [translatorUrl])
+  const onOpenTranslate = React.useCallback(() => {
+    Linking.openURL(translatorUrl)
+  }, [translatorUrl])
 
-    const onToggleThreadMute = React.useCallback(async () => {
-      try {
-        await item.toggleThreadMute()
-        if (item.isThreadMuted) {
-          Toast.show('You will no longer receive notifications for this thread')
-        } else {
-          Toast.show('You will now receive notifications for this thread')
-        }
-      } catch (e) {
-        store.log.error('Failed to toggle thread mute', e)
+  const onToggleThreadMute = React.useCallback(async () => {
+    try {
+      await item.toggleThreadMute()
+      if (item.isThreadMuted) {
+        Toast.show('You will no longer receive notifications for this thread')
+      } else {
+        Toast.show('You will now receive notifications for this thread')
       }
-    }, [item, store])
+    } catch (e) {
+      store.log.error('Failed to toggle thread mute', e)
+    }
+  }, [item, store])
 
-    const onDeletePost = React.useCallback(() => {
-      item.delete().then(
-        () => {
-          setDeleted(true)
-          Toast.show('Post deleted')
-        },
-        e => {
-          store.log.error('Failed to delete post', e)
-          Toast.show('Failed to delete post, please try again')
-        },
-      )
-    }, [item, setDeleted, store])
+  const onDeletePost = React.useCallback(() => {
+    item.delete().then(
+      () => {
+        setDeleted(true)
+        Toast.show('Post deleted')
+      },
+      e => {
+        store.log.error('Failed to delete post', e)
+        Toast.show('Failed to delete post, please try again')
+      },
+    )
+  }, [item, setDeleted, store])
 
-    return (
-      <Link href={itemHref} style={[styles.outer, pal.view, pal.border, style]}>
-        {showReplyLine && <View style={styles.replyLine} />}
-        <View style={styles.layout}>
-          <View style={styles.layoutAvi}>
-            <PreviewableUserAvatar
-              size={52}
-              did={item.post.author.did}
-              handle={item.post.author.handle}
-              avatar={item.post.author.avatar}
-              moderation={item.moderation.avatar}
-            />
-          </View>
-          <View style={styles.layoutContent}>
-            <PostMeta
-              author={item.post.author}
-              authorHasWarning={!!item.post.author.labels?.length}
-              timestamp={item.post.indexedAt}
-              postHref={itemHref}
+  return (
+    <Link href={itemHref} style={[styles.outer, pal.view, pal.border, style]}>
+      {showReplyLine && <View style={styles.replyLine} />}
+      <View style={styles.layout}>
+        <View style={styles.layoutAvi}>
+          <PreviewableUserAvatar
+            size={52}
+            did={item.post.author.did}
+            handle={item.post.author.handle}
+            avatar={item.post.author.avatar}
+            moderation={item.moderation.avatar}
+          />
+        </View>
+        <View style={styles.layoutContent}>
+          <PostMeta
+            author={item.post.author}
+            authorHasWarning={!!item.post.author.labels?.length}
+            timestamp={item.post.indexedAt}
+            postHref={itemHref}
+          />
+          {replyAuthorDid !== '' && (
+            <View style={[s.flexRow, s.mb2, s.alignCenter]}>
+              <FontAwesomeIcon
+                icon="reply"
+                size={9}
+                style={[pal.textLight, s.mr5]}
+              />
+              <Text
+                type="sm"
+                style={[pal.textLight, s.mr2]}
+                lineHeight={1.2}
+                numberOfLines={1}>
+                Reply to{' '}
+                <UserInfoText
+                  type="sm"
+                  did={replyAuthorDid}
+                  attr="displayName"
+                  style={[pal.textLight]}
+                />
+              </Text>
+            </View>
+          )}
+          <ContentHider
+            moderation={item.moderation.content}
+            style={styles.contentHider}
+            childContainerStyle={styles.contentHiderChild}>
+            <PostAlerts
+              moderation={item.moderation.content}
+              style={styles.alert}
             />
-            {replyAuthorDid !== '' && (
-              <View style={[s.flexRow, s.mb2, s.alignCenter]}>
-                <FontAwesomeIcon
-                  icon="reply"
-                  size={9}
-                  style={[pal.textLight, s.mr5]}
+            {item.richText?.text ? (
+              <View style={styles.postTextContainer}>
+                <RichText
+                  testID="postText"
+                  type="post-text"
+                  richText={item.richText}
+                  lineHeight={1.3}
+                  style={s.flex1}
                 />
-                <Text
-                  type="sm"
-                  style={[pal.textLight, s.mr2]}
-                  lineHeight={1.2}
-                  numberOfLines={1}>
-                  Reply to{' '}
-                  <UserInfoText
-                    type="sm"
-                    did={replyAuthorDid}
-                    attr="displayName"
-                    style={[pal.textLight]}
-                  />
-                </Text>
               </View>
-            )}
-            <ContentHider
-              moderation={item.moderation.content}
-              style={styles.contentHider}
-              childContainerStyle={styles.contentHiderChild}>
-              <PostAlerts
-                moderation={item.moderation.content}
-                style={styles.alert}
-              />
-              {item.richText?.text ? (
-                <View style={styles.postTextContainer}>
-                  <RichText
-                    testID="postText"
-                    type="post-text"
-                    richText={item.richText}
-                    lineHeight={1.3}
-                    style={s.flex1}
-                  />
-                </View>
-              ) : undefined}
-              {item.post.embed ? (
-                <ContentHider
+            ) : undefined}
+            {item.post.embed ? (
+              <ContentHider
+                moderation={item.moderation.embed}
+                style={styles.contentHider}>
+                <PostEmbeds
+                  embed={item.post.embed}
                   moderation={item.moderation.embed}
-                  style={styles.contentHider}>
-                  <PostEmbeds
-                    embed={item.post.embed}
-                    moderation={item.moderation.embed}
-                  />
-                </ContentHider>
-              ) : null}
-              {needsTranslation && (
-                <View style={[pal.borderDark, styles.translateLink]}>
-                  <Link href={translatorUrl} title="Translate">
-                    <Text type="sm" style={pal.link}>
-                      Translate this post
-                    </Text>
-                  </Link>
-                </View>
-              )}
-            </ContentHider>
-            <PostCtrls
-              itemUri={itemUri}
-              itemCid={itemCid}
-              itemHref={itemHref}
-              itemTitle={itemTitle}
-              author={item.post.author}
-              indexedAt={item.post.indexedAt}
-              text={item.richText?.text || record.text}
-              isAuthor={item.post.author.did === store.me.did}
-              replyCount={item.post.replyCount}
-              repostCount={item.post.repostCount}
-              likeCount={item.post.likeCount}
-              isReposted={!!item.post.viewer?.repost}
-              isLiked={!!item.post.viewer?.like}
-              isThreadMuted={item.isThreadMuted}
-              onPressReply={onPressReply}
-              onPressToggleRepost={onPressToggleRepost}
-              onPressToggleLike={onPressToggleLike}
-              onCopyPostText={onCopyPostText}
-              onOpenTranslate={onOpenTranslate}
-              onToggleThreadMute={onToggleThreadMute}
-              onDeletePost={onDeletePost}
-            />
-          </View>
+                />
+              </ContentHider>
+            ) : null}
+            {needsTranslation && (
+              <View style={[pal.borderDark, styles.translateLink]}>
+                <Link href={translatorUrl} title="Translate">
+                  <Text type="sm" style={pal.link}>
+                    Translate this post
+                  </Text>
+                </Link>
+              </View>
+            )}
+          </ContentHider>
+          <PostCtrls
+            itemUri={itemUri}
+            itemCid={itemCid}
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            author={item.post.author}
+            indexedAt={item.post.indexedAt}
+            text={item.richText?.text || record.text}
+            isAuthor={item.post.author.did === store.me.did}
+            replyCount={item.post.replyCount}
+            repostCount={item.post.repostCount}
+            likeCount={item.post.likeCount}
+            isReposted={!!item.post.viewer?.repost}
+            isLiked={!!item.post.viewer?.like}
+            isThreadMuted={item.isThreadMuted}
+            onPressReply={onPressReply}
+            onPressToggleRepost={onPressToggleRepost}
+            onPressToggleLike={onPressToggleLike}
+            onCopyPostText={onCopyPostText}
+            onOpenTranslate={onOpenTranslate}
+            onToggleThreadMute={onToggleThreadMute}
+            onDeletePost={onDeletePost}
+          />
         </View>
-      </Link>
-    )
-  },
-)
+      </View>
+    </Link>
+  )
+})
 
 const styles = StyleSheet.create({
   outer: {