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, 75 insertions, 77 deletions

diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
index c9b8b84b1..d808d896f 100644
--- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx
+++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx
@@ -8,90 +8,88 @@ import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useGrapheme} from '../hooks/useGrapheme'
 
-export const Autocomplete = observer(
-  ({
-    view,
-    onSelect,
-  }: {
-    view: UserAutocompleteModel
-    onSelect: (item: string) => void
-  }) => {
-    const pal = usePalette('default')
-    const positionInterp = useAnimatedValue(0)
-    const {getGraphemeString} = useGrapheme()
+export const Autocomplete = observer(function AutocompleteImpl({
+  view,
+  onSelect,
+}: {
+  view: UserAutocompleteModel
+  onSelect: (item: string) => void
+}) {
+  const pal = usePalette('default')
+  const positionInterp = useAnimatedValue(0)
+  const {getGraphemeString} = useGrapheme()
 
-    useEffect(() => {
-      Animated.timing(positionInterp, {
-        toValue: view.isActive ? 1 : 0,
-        duration: 200,
-        useNativeDriver: true,
-      }).start()
-    }, [positionInterp, view.isActive])
+  useEffect(() => {
+    Animated.timing(positionInterp, {
+      toValue: view.isActive ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start()
+  }, [positionInterp, view.isActive])
 
-    const topAnimStyle = {
-      transform: [
-        {
-          translateY: positionInterp.interpolate({
-            inputRange: [0, 1],
-            outputRange: [200, 0],
-          }),
-        },
-      ],
-    }
+  const topAnimStyle = {
+    transform: [
+      {
+        translateY: positionInterp.interpolate({
+          inputRange: [0, 1],
+          outputRange: [200, 0],
+        }),
+      },
+    ],
+  }
 
-    return (
-      <Animated.View style={topAnimStyle}>
-        {view.isActive ? (
-          <View style={[pal.view, styles.container, pal.border]}>
-            {view.suggestions.length > 0 ? (
-              view.suggestions.slice(0, 5).map(item => {
-                // Eventually use an average length
-                const MAX_CHARS = 40
-                const MAX_HANDLE_CHARS = 20
+  return (
+    <Animated.View style={topAnimStyle}>
+      {view.isActive ? (
+        <View style={[pal.view, styles.container, pal.border]}>
+          {view.suggestions.length > 0 ? (
+            view.suggestions.slice(0, 5).map(item => {
+              // Eventually use an average length
+              const MAX_CHARS = 40
+              const MAX_HANDLE_CHARS = 20
 
-                // Using this approach because styling is not respecting
-                // bounding box wrapping (before converting to ellipsis)
-                const {name: displayHandle, remainingCharacters} =
-                  getGraphemeString(item.handle, MAX_HANDLE_CHARS)
+              // Using this approach because styling is not respecting
+              // bounding box wrapping (before converting to ellipsis)
+              const {name: displayHandle, remainingCharacters} =
+                getGraphemeString(item.handle, MAX_HANDLE_CHARS)
 
-                const {name: displayName} = getGraphemeString(
-                  item.displayName ?? item.handle,
-                  MAX_CHARS -
-                    MAX_HANDLE_CHARS +
-                    (remainingCharacters > 0 ? remainingCharacters : 0),
-                )
+              const {name: displayName} = getGraphemeString(
+                item.displayName ?? item.handle,
+                MAX_CHARS -
+                  MAX_HANDLE_CHARS +
+                  (remainingCharacters > 0 ? remainingCharacters : 0),
+              )
 
-                return (
-                  <TouchableOpacity
-                    testID="autocompleteButton"
-                    key={item.handle}
-                    style={[pal.border, styles.item]}
-                    onPress={() => onSelect(item.handle)}
-                    accessibilityLabel={`Select ${item.handle}`}
-                    accessibilityHint="">
-                    <View style={styles.avatarAndHandle}>
-                      <UserAvatar avatar={item.avatar ?? null} size={24} />
-                      <Text type="md-medium" style={pal.text}>
-                        {displayName}
-                      </Text>
-                    </View>
-                    <Text type="sm" style={pal.textLight} numberOfLines={1}>
-                      @{displayHandle}
+              return (
+                <TouchableOpacity
+                  testID="autocompleteButton"
+                  key={item.handle}
+                  style={[pal.border, styles.item]}
+                  onPress={() => onSelect(item.handle)}
+                  accessibilityLabel={`Select ${item.handle}`}
+                  accessibilityHint="">
+                  <View style={styles.avatarAndHandle}>
+                    <UserAvatar avatar={item.avatar ?? null} size={24} />
+                    <Text type="md-medium" style={pal.text}>
+                      {displayName}
                     </Text>
-                  </TouchableOpacity>
-                )
-              })
-            ) : (
-              <Text type="sm" style={[pal.text, pal.border, styles.noResults]}>
-                No result
-              </Text>
-            )}
-          </View>
-        ) : null}
-      </Animated.View>
-    )
-  },
-)
+                  </View>
+                  <Text type="sm" style={pal.textLight} numberOfLines={1}>
+                    @{displayHandle}
+                  </Text>
+                </TouchableOpacity>
+              )
+            })
+          ) : (
+            <Text type="sm" style={[pal.text, pal.border, styles.noResults]}>
+              No result
+            </Text>
+          )}
+        </View>
+      ) : null}
+    </Animated.View>
+  )
+})
 
 const styles = StyleSheet.create({
   container: {