Create codemod for addressing ESLint warnings (#10032)

src/components/moderation/Hider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 import {type ModerationUI} from '@atproto/api'
 
 import {
@@ -21,10 +21,10 @@ type Context = {
   }
 }
 
-const Context = React.createContext<Context>({} as Context)
+const Context = createContext<Context>({} as Context)
 Context.displayName = 'HiderContext'
 
-export const useHider = () => React.useContext(Context)
+export const useHider = () => useContext(Context)
 
 export function Outer({
   modui,
@@ -38,7 +38,7 @@ export function Outer({
 }>) {
   const control = useModerationDetailsDialogControl()
   const blur = modui?.blurs[0]
-  const [isContentVisible, setIsContentVisible] = React.useState(
+  const [isContentVisible, setIsContentVisible] = useState(
     isContentVisibleInitialState || !blur,
   )
   const info = useModerationCauseDescription(blur)

src/components/moderation/LabelsOnMeDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {type ComAtprotoLabelDefs, ToolsOzoneReportDefs} from '@atproto/api'
 import {XRPCError} from '@atproto/xrpc'
@@ -47,12 +47,12 @@ export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
 function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const [appealingLabel, setAppealingLabel] = React.useState<
+  const [appealingLabel, setAppealingLabel] = useState<
     ComAtprotoLabelDefs.Label | undefined
   >(undefined)
   const {labels} = props
   const isAccount = props.type === 'account'
-  const containsSelfLabel = React.useMemo(
+  const containsSelfLabel = useMemo(
     () => labels.some(l => l.src === currentAccount?.did),
     [currentAccount?.did, labels],
   )
@@ -224,7 +224,7 @@ function AppealForm({
   const {_} = useLingui()
   const {labeler, strings} = useLabelInfo(label)
   const {gtMobile} = useBreakpoints()
-  const [details, setDetails] = React.useState('')
+  const [details, setDetails] = useState('')
   const {subject} = useLabelSubject({label})
   const isAccountReport = 'did' in subject
   const agent = useAgent()
@@ -273,7 +273,7 @@ function AppealForm({
     },
   })
 
-  const onSubmit = React.useCallback(() => mutate(), [mutate])
+  const onSubmit = useCallback(() => mutate(), [mutate])
 
   return (
     <>

src/components/moderation/ReportDialog/index.tsx

@@ -1,4 +1,11 @@
-import React from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
 import {Pressable, type ScrollView, View} from 'react-native'
 import {type AppBskyLabelerDefs, BSKY_LABELER_DID} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -66,11 +73,11 @@ export function ReportDialog(
   },
 ) {
   const ax = useAnalytics()
-  const subject = React.useMemo(
+  const subject = useMemo(
     () => (props.subject ? parseReportSubject(props.subject) : undefined),
     [props.subject],
   )
-  const onClose = React.useCallback(() => {
+  const onClose = useCallback(() => {
     ax.metric('reportDialog:close', {})
   }, [ax])
   return (
@@ -108,7 +115,7 @@ function Inner(props: ReportDialogProps) {
   const logger = ax.logger.useChild(ax.logger.Context.ReportDialog)
   const t = useTheme()
   const {_} = useLingui()
-  const ref = React.useRef<ScrollView>(null)
+  const ref = useRef<ScrollView>(null)
   const {
     data: allLabelers,
     isLoading: isLabelerLoading,
@@ -118,14 +125,14 @@ function Inner(props: ReportDialogProps) {
   const isLoading = useDelayedLoading(500, isLabelerLoading)
   const copy = useCopyForSubject(props.subject)
   const {categories, getCategory} = useReportOptions()
-  const [state, dispatch] = React.useReducer(reducer, initialState)
+  const [state, dispatch] = useReducer(reducer, initialState)
 
   /**
    * Submission handling
    */
   const {mutateAsync: submitReport} = useSubmitReportMutation()
-  const [isPending, setPending] = React.useState(false)
-  const [isSuccess, setSuccess] = React.useState(false)
+  const [isPending, setPending] = useState(false)
+  const [isSuccess, setSuccess] = useState(false)
 
   // some reasons ONLY go to Bluesky
   const isBskyOnlyReason = state?.selectedOption?.reason
@@ -139,7 +146,7 @@ function Inner(props: ReportDialogProps) {
   /**
    * Labelers that support this `subject` and its NSID collection
    */
-  const supportedLabelers = React.useMemo(() => {
+  const supportedLabelers = useMemo(() => {
     if (!allLabelers) return []
     return allLabelers
       .filter(l => {
@@ -169,7 +176,8 @@ function Inner(props: ReportDialogProps) {
         if (supportedReasonTypes === undefined) return true
         return (
           // supports new reason type
-          supportedReasonTypes.includes(state.selectedOption.reason) || // supports old reason type (backwards compat)
+          // supports old reason type (backwards compat)
+          supportedReasonTypes.includes(state.selectedOption.reason) ||
           supportedReasonTypes.includes(
             NEW_TO_OLD_REASONS_MAP[state.selectedOption.reason],
           )
@@ -194,7 +202,7 @@ function Inner(props: ReportDialogProps) {
   const isAlwaysBskyLabeler =
     hasSingleSupportedLabeler && (isBskyOnlyReason || isBskyOnlySubject)
 
-  const onSubmit = React.useCallback(async () => {
+  const onSubmit = useCallback(async () => {
     dispatch({type: 'clearError'})
 
     logger.info('submitting')
@@ -587,7 +595,7 @@ function ActionOnce({
   check: () => boolean
   callback: () => void
 }) {
-  React.useEffect(() => {
+  useEffect(() => {
     if (check()) {
       callback()
     }
@@ -686,7 +694,7 @@ function CategoryCard({
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['compact'])
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(option)
   }, [onSelect, option])
   return (
@@ -731,7 +739,7 @@ function OptionCard({
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['compact'])
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(option)
   }, [onSelect, option])
   return (
@@ -793,7 +801,7 @@ function LabelerCard({
 }) {
   const t = useTheme()
   const {_} = useLingui()
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelect?.(labeler)
   }, [onSelect, labeler])
   const title = getLabelingServiceTitle({

src/components/moderation/ScreenHider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import {
   type StyleProp,
   TouchableWithoutFeedback,
@@ -39,7 +39,7 @@ export function ScreenHider({
 }>) {
   const t = useTheme()
   const {_} = useLingui()
-  const [override, setOverride] = React.useState(false)
+  const [override, setOverride] = useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
   const control = useModerationDetailsDialogControl()