Add ESLint React plugin (#1412)

* Add eslint-plugin-react

* Enable display name rule

.eslintrc.js

@@ -2,12 +2,14 @@ module.exports = {
   root: true,
   extends: [
     '@react-native-community',
+    'plugin:react/recommended',
     'plugin:react-native-a11y/ios',
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'detox'],
+  plugins: ['@typescript-eslint', 'detox', 'react'],
   rules: {
+    'react/no-unescaped-entities': 0,
     'react-native/no-inline-styles': 0,
   },
   ignorePatterns: [

package.json

@@ -181,6 +181,7 @@
     "eslint": "^8.19.0",
     "eslint-plugin-detox": "^1.0.0",
     "eslint-plugin-ft-flow": "^2.0.3",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-native-a11y": "^3.3.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",

src/view/com/composer/text-input/TextInput.tsx

@@ -51,8 +51,7 @@ interface Selection {
   end: number
 }
 
-export const TextInput = forwardRef(
-  (
+export const TextInput = forwardRef(function TextInputImpl(
   {
     richtext,
     placeholder,
@@ -65,7 +64,7 @@ export const TextInput = forwardRef(
     ...props
   }: TextInputProps,
   ref,
-  ) => {
+) {
   const pal = usePalette('default')
   const textInput = useRef<PasteInputRef>(null)
   const textInputSelection = useRef<Selection>({start: 0, end: 0})
@@ -224,8 +223,7 @@ export const TextInput = forwardRef(
       />
     </View>
   )
-  },
-)
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/com/composer/text-input/TextInput.web.tsx

@@ -37,8 +37,7 @@ interface TextInputProps {
 
 export const textInputWebEmitter = new EventEmitter()
 
-export const TextInput = React.forwardRef(
-  (
+export const TextInput = React.forwardRef(function TextInputImpl(
   {
     richtext,
     placeholder,
@@ -51,11 +50,8 @@ export const TextInput = React.forwardRef(
   }: // onError, TODO
   TextInputProps,
   ref,
-  ) => {
-    const modeClass = useColorSchemeStyle(
-      'ProseMirror-light',
-      'ProseMirror-dark',
-    )
+) {
+  const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark')
 
   React.useEffect(() => {
     textInputWebEmitter.addListener('publish', onPressPublish)
@@ -164,8 +160,7 @@ export const TextInput = React.forwardRef(
       <EditorContent editor={editor} />
     </View>
   )
-  },
-)
+})
 
 function editorJsonToText(json: JSONContent): string {
   let text = ''

src/view/com/composer/text-input/web/Autocomplete.tsx

@@ -94,7 +94,7 @@ export function createSuggestion({
 }
 
 const MentionList = forwardRef<MentionListRef, SuggestionProps>(
-  (props: SuggestionProps, ref) => {
+  function MentionListImpl(props: SuggestionProps, ref) {
     const [selectedIndex, setSelectedIndex] = useState(0)
     const pal = usePalette('default')
     const {getGraphemeString} = useGrapheme()

src/view/com/pager/Pager.tsx

@@ -24,7 +24,7 @@ interface Props {
   testID?: string
 }
 export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
-  (
+  function PagerImpl(
     {
       children,
       tabBarPosition = 'top',
@@ -34,7 +34,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
       testID,
     }: React.PropsWithChildren<Props>,
     ref,
-  ) => {
+  ) {
     const [selectedPage, setSelectedPage] = React.useState(0)
     const pagerView = React.useRef<PagerView>(null)
 

src/view/com/pager/Pager.web.tsx

@@ -14,8 +14,7 @@ interface Props {
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
 }
-export const Pager = React.forwardRef(
-  (
+export const Pager = React.forwardRef(function PagerImpl(
   {
     children,
     tabBarPosition = 'top',
@@ -24,7 +23,7 @@ export const Pager = React.forwardRef(
     onPageSelected,
   }: React.PropsWithChildren<Props>,
   ref,
-  ) => {
+) {
   const [selectedPage, setSelectedPage] = React.useState(initialPage)
 
   React.useImperativeHandle(ref, () => ({
@@ -60,5 +59,4 @@ export const Pager = React.forwardRef(
         })}
     </View>
   )
-  },
-)
+})

src/view/com/search/Suggestions.tsx

@@ -39,8 +39,7 @@ interface ProfileView {
 type Item = Heading | RefWrapper | SuggestWrapper | ProfileView
 
 export const Suggestions = observer(
-  forwardRef(
-    (
+  forwardRef(function SuggestionsImpl(
     {
       foafs,
       suggestedActors,
@@ -49,7 +48,7 @@ export const Suggestions = observer(
       suggestedActors: SuggestedActorsModel
     },
     flatListRef: ForwardedRef<FlatList>,
-    ) => {
+  ) {
     const pal = usePalette('default')
     const [refreshing, setRefreshing] = React.useState(false)
     const data = React.useMemo(() => {
@@ -210,8 +209,7 @@ export const Suggestions = observer(
         initialNumToRender={15}
       />
     )
-    },
-  ),
+  }),
 )
 
 const styles = StyleSheet.create({

src/view/com/util/PressableWithHover.tsx

@@ -12,8 +12,7 @@ interface PressableWithHover extends PressableProps {
   hoverStyle: StyleProp<ViewStyle>
 }
 
-export const PressableWithHover = forwardRef(
-  (
+export const PressableWithHover = forwardRef(function PressableWithHoverImpl(
   {
     children,
     style,
@@ -21,7 +20,7 @@ export const PressableWithHover = forwardRef(
     ...props
   }: PropsWithChildren<PressableWithHover>,
   ref: Ref<any>,
-  ) => {
+) {
   const [isHovering, setIsHovering] = useState(false)
 
   const onHoverIn = useCallback(() => setIsHovering(true), [setIsHovering])
@@ -41,5 +40,4 @@ export const PressableWithHover = forwardRef(
       {children}
     </Pressable>
   )
-  },
-)
+})

src/view/com/util/ViewSelector.tsx

@@ -42,8 +42,7 @@ export const ViewSelector = React.forwardRef<
     onRefresh?: () => void
     onEndReached?: (info: {distanceFromEnd: number}) => void
   }
->(
-  (
+>(function ViewSelectorImpl(
   {
     sections,
     items,
@@ -57,7 +56,7 @@ export const ViewSelector = React.forwardRef<
     onEndReached,
   },
   ref,
-  ) => {
+) {
   const pal = usePalette('default')
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
   const flatListRef = React.useRef<FlatList>(null)
@@ -134,8 +133,7 @@ export const ViewSelector = React.forwardRef<
       scrollIndicatorInsets={{right: 1}} // fixes a bug where the scroll indicator is on the middle of the screen https://github.com/bluesky-social/social-app/pull/464
     />
   )
-  },
-)
+})
 
 export function Selector({
   selectedIndex,

src/view/com/util/Views.web.tsx

@@ -38,7 +38,7 @@ export function CenteredView({
   return <View style={style} {...props} />
 }
 
-export const FlatList = React.forwardRef(function <ItemT>(
+export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
   {
     contentContainerStyle,
     style,
@@ -99,7 +99,7 @@ export const FlatList = React.forwardRef(function <ItemT>(
   )
 })
 
-export const ScrollView = React.forwardRef(function (
+export const ScrollView = React.forwardRef(function ScrollViewImpl(
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
   ref: React.Ref<RNScrollView>,
 ) {

src/view/com/util/anim/TriggerableAnimated.tsx

@@ -26,7 +26,7 @@ type PropsInner = TriggerableAnimatedProps & {
 export const TriggerableAnimated = React.forwardRef<
   TriggerableAnimatedRef,
   TriggerableAnimatedProps
->(({children, ...props}, ref) => {
+>(function TriggerableAnimatedImpl({children, ...props}, ref) {
   const [anim, setAnim] = React.useState<TriggeredAnimation | undefined>(
     undefined,
   )

src/view/com/util/layouts/withBreakpoints.tsx

@@ -2,13 +2,12 @@ import React from 'react'
 import {isNative} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
-export const withBreakpoints =
-  <P extends object>(
+export const withBreakpoints = <P extends object>(
   Mobile: React.ComponentType<P>,
   Tablet: React.ComponentType<P>,
   Desktop: React.ComponentType<P>,
-  ): React.FC<P> =>
-  (props: P) => {
+): React.FC<P> =>
+  function WithBreakpoints(props: P) {
     const {isMobile, isTabletOrMobile} = useWebMediaQueries()
 
     if (isMobile || isNative) {

yarn.lock

@@ -9906,7 +9906,7 @@ eslint-plugin-react-native@^4.0.0:
     "@babel/traverse" "^7.7.4"
     eslint-plugin-react-native-globals "^0.1.1"
 
-eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.30.1:
+eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.30.1, eslint-plugin-react@^7.33.2:
   version "7.33.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
   integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==