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/util/PostMeta.tsx

@@ -25,7 +25,7 @@ interface PostMetaOpts {
   timestamp: string
 }
 
-export const PostMeta = observer(function (opts: PostMetaOpts) {
+export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
   const pal = usePalette('default')
   const displayName = opts.author.displayName || opts.author.handle
   const handle = opts.author.handle

src/view/com/util/TimeElapsed.tsx

@@ -3,6 +3,9 @@ import {observer} from 'mobx-react-lite'
 import {ago} from 'lib/strings/time'
 import {useStores} from 'state/index'
 
+// FIXME(dan): Figure out why the false positives
+/* eslint-disable react/prop-types */
+
 export const TimeElapsed = observer(function TimeElapsed({
   timestamp,
   children,

src/view/com/util/ViewHeader.tsx

@@ -14,7 +14,7 @@ import {NavigationProp} from 'lib/routes/types'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
-export const ViewHeader = observer(function ({
+export const ViewHeader = observer(function ViewHeaderImpl({
   title,
   canGoBack,
   showBackButton = true,
@@ -140,70 +140,68 @@ function DesktopWebHeader({
   )
 }
 
-const Container = observer(
-  ({
-    children,
-    hideOnScroll,
-    showBorder,
-  }: {
-    children: React.ReactNode
-    hideOnScroll: boolean
-    showBorder?: boolean
-  }) => {
-    const store = useStores()
-    const pal = usePalette('default')
-    const interp = useAnimatedValue(0)
+const Container = observer(function ContainerImpl({
+  children,
+  hideOnScroll,
+  showBorder,
+}: {
+  children: React.ReactNode
+  hideOnScroll: boolean
+  showBorder?: boolean
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const interp = useAnimatedValue(0)
 
-    React.useEffect(() => {
-      if (store.shell.minimalShellMode) {
-        Animated.timing(interp, {
-          toValue: 1,
-          duration: 100,
-          useNativeDriver: true,
-          isInteraction: false,
-        }).start()
-      } else {
-        Animated.timing(interp, {
-          toValue: 0,
-          duration: 100,
-          useNativeDriver: true,
-          isInteraction: false,
-        }).start()
-      }
-    }, [interp, store.shell.minimalShellMode])
-    const transform = {
-      transform: [{translateY: Animated.multiply(interp, -100)}],
+  React.useEffect(() => {
+    if (store.shell.minimalShellMode) {
+      Animated.timing(interp, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start()
+    } else {
+      Animated.timing(interp, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true,
+        isInteraction: false,
+      }).start()
     }
+  }, [interp, store.shell.minimalShellMode])
+  const transform = {
+    transform: [{translateY: Animated.multiply(interp, -100)}],
+  }
 
-    if (!hideOnScroll) {
-      return (
-        <View
-          style={[
-            styles.header,
-            styles.headerFixed,
-            pal.view,
-            pal.border,
-            showBorder && styles.border,
-          ]}>
-          {children}
-        </View>
-      )
-    }
+  if (!hideOnScroll) {
     return (
-      <Animated.View
+      <View
         style={[
           styles.header,
-          styles.headerFloating,
+          styles.headerFixed,
           pal.view,
           pal.border,
-          transform,
           showBorder && styles.border,
         ]}>
         {children}
-      </Animated.View>
+      </View>
     )
-  },
-)
+  }
+  return (
+    <Animated.View
+      style={[
+        styles.header,
+        styles.headerFloating,
+        pal.view,
+        pal.border,
+        transform,
+        showBorder && styles.border,
+      ]}>
+      {children}
+    </Animated.View>
+  )
+})
 
 const styles = StyleSheet.create({
   header: {

src/view/com/util/fab/FABInner.tsx

@@ -14,7 +14,11 @@ export interface FABProps
   icon: JSX.Element
 }
 
-export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
+export const FABInner = observer(function FABInnerImpl({
+  testID,
+  icon,
+  ...props
+}: FABProps) {
   const {isTablet} = useWebMediaQueries()
   const store = useStores()
   const interp = useAnimatedValue(0)

src/view/com/util/load-latest/LoadLatestBtnMobile.tsx

@@ -9,41 +9,39 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {colors} from 'lib/styles'
 import {HITSLOP_20} from 'lib/constants'
 
-export const LoadLatestBtn = observer(
-  ({
-    onPress,
-    label,
-    showIndicator,
-  }: {
-    onPress: () => void
-    label: string
-    showIndicator: boolean
-    minimalShellMode?: boolean // NOTE not used on mobile -prf
-  }) => {
-    const store = useStores()
-    const pal = usePalette('default')
-    const safeAreaInsets = useSafeAreaInsets()
-    return (
-      <TouchableOpacity
-        style={[
-          styles.loadLatest,
-          pal.borderDark,
-          pal.view,
-          !store.shell.minimalShellMode && {
-            bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
-          },
-        ]}
-        onPress={onPress}
-        hitSlop={HITSLOP_20}
-        accessibilityRole="button"
-        accessibilityLabel={label}
-        accessibilityHint="">
-        <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
-        {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
-      </TouchableOpacity>
-    )
-  },
-)
+export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
+  onPress,
+  label,
+  showIndicator,
+}: {
+  onPress: () => void
+  label: string
+  showIndicator: boolean
+  minimalShellMode?: boolean // NOTE not used on mobile -prf
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const safeAreaInsets = useSafeAreaInsets()
+  return (
+    <TouchableOpacity
+      style={[
+        styles.loadLatest,
+        pal.borderDark,
+        pal.view,
+        !store.shell.minimalShellMode && {
+          bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
+        },
+      ]}
+      onPress={onPress}
+      hitSlop={HITSLOP_20}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityHint="">
+      <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
+      {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
+    </TouchableOpacity>
+  )
+})
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/com/util/post-embeds/ListEmbed.tsx

@@ -6,23 +6,21 @@ import {ListCard} from 'view/com/lists/ListCard'
 import {AppBskyGraphDefs} from '@atproto/api'
 import {s} from 'lib/styles'
 
-export const ListEmbed = observer(
-  ({
-    item,
-    style,
-  }: {
-    item: AppBskyGraphDefs.ListView
-    style?: StyleProp<ViewStyle>
-  }) => {
-    const pal = usePalette('default')
+export const ListEmbed = observer(function ListEmbedImpl({
+  item,
+  style,
+}: {
+  item: AppBskyGraphDefs.ListView
+  style?: StyleProp<ViewStyle>
+}) {
+  const pal = usePalette('default')
 
-    return (
-      <View style={[pal.view, pal.border, s.border1, styles.container]}>
-        <ListCard list={item} style={[style, styles.card]} />
-      </View>
-    )
-  },
-)
+  return (
+    <View style={[pal.view, pal.border, s.border1, styles.container]}>
+      <ListCard list={item} style={[style, styles.card]} />
+    </View>
+  )
+})
 
 const styles = StyleSheet.create({
   container: {