Create codemod for addressing ESLint warnings (#10032)

src/state/shell/color-mode.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useMemo, useState} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -11,23 +11,19 @@ type SetContext = {
   setDarkTheme: (v: persisted.Schema['darkTheme']) => void
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   colorMode: 'system',
   darkTheme: 'dark',
 })
 stateContext.displayName = 'ColorModeStateContext'
-const setContext = React.createContext<SetContext>({} as SetContext)
+const setContext = createContext<SetContext>({} as SetContext)
 setContext.displayName = 'ColorModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [colorMode, setColorMode] = React.useState(() =>
-    persisted.get('colorMode'),
-  )
-  const [darkTheme, setDarkTheme] = React.useState(() =>
-    persisted.get('darkTheme'),
-  )
+  const [colorMode, setColorMode] = useState(() => persisted.get('colorMode'))
+  const [darkTheme, setDarkTheme] = useState(() => persisted.get('darkTheme'))
 
-  const stateContextValue = React.useMemo(
+  const stateContextValue = useMemo(
     () => ({
       colorMode,
       darkTheme,
@@ -35,7 +31,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [colorMode, darkTheme],
   )
 
-  const setContextValue = React.useMemo(
+  const setContextValue = useMemo(
     () => ({
       setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
         setColorMode(_colorMode)
@@ -49,7 +45,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     const unsub1 = persisted.onUpdate('darkTheme', nextDarkTheme => {
       setDarkTheme(nextDarkTheme)
     })
@@ -72,9 +68,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useThemePrefs() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetThemePrefs() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

src/state/shell/composer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 import {
   type AppBskyActorDefs,
   type AppBskyFeedDefs,
@@ -65,9 +65,9 @@ type ControlsContext = {
   closeComposer: () => boolean
 }
 
-const stateContext = React.createContext<StateContext>(undefined)
+const stateContext = createContext<StateContext>(undefined)
 stateContext.displayName = 'ComposerStateContext'
-const controlsContext = React.createContext<ControlsContext>({
+const controlsContext = createContext<ControlsContext>({
   openComposer(_opts: ComposerOpts) {},
   closeComposer() {
     return false
@@ -77,7 +77,7 @@ controlsContext.displayName = 'ComposerControlsContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const {_} = useLingui()
-  const [state, setState] = React.useState<StateContext>()
+  const [state, setState] = useState<StateContext>()
   const queryClient = useQueryClient()
 
   const openComposer = useNonReactiveCallback((opts: ComposerOpts) => {
@@ -135,7 +135,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     return wasOpen
   })
 
-  const api = React.useMemo(
+  const api = useMemo(
     () => ({
       openComposer,
       closeComposer,
@@ -153,12 +153,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useComposerState() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useComposerControls() {
-  const {closeComposer} = React.useContext(controlsContext)
-  return React.useMemo(() => ({closeComposer}), [closeComposer])
+  const {closeComposer} = useContext(controlsContext)
+  return useMemo(() => ({closeComposer}), [closeComposer])
 }
 
 /**
@@ -168,6 +168,6 @@ export function useComposerControls() {
  * @deprecated use `#/lib/hooks/useOpenComposer` instead
  */
 export function useOpenComposer() {
-  const {openComposer} = React.useContext(controlsContext)
-  return React.useMemo(() => ({openComposer}), [openComposer])
+  const {openComposer} = useContext(controlsContext)
+  return useMemo(() => ({openComposer}), [openComposer])
 }

src/state/shell/composer/useComposerKeyboardShortcut.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useEffect} from 'react'
 
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {useDialogStateContext} from '#/state/dialogs'
@@ -46,7 +46,7 @@ export function useComposerKeyboardShortcut() {
   const isDrawerOpen = useIsDrawerOpen()
   const {hasSession} = useSession()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasSession) {
       return
     }

src/state/shell/drawer-swipe-disabled.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 
 type StateContext = boolean
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>(false)
+const stateContext = createContext<StateContext>(false)
 stateContext.displayName = 'DrawerSwipeDisabledStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'DrawerSwipeDisabledSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(false)
+  const [state, setState] = useState(false)
   return (
     <stateContext.Provider value={state}>
       <setContext.Provider value={setState}>{children}</setContext.Provider>
@@ -18,9 +18,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useIsDrawerSwipeDisabled() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetDrawerSwipeDisabled() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

src/state/shell/logged-out.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 
 import {useSession} from '#/state/session'
 import {useActiveStarterPack} from '#/state/shell/starter-pack'
@@ -35,13 +35,13 @@ type Controls = {
   clearRequestedAccount: () => void
 }
 
-const StateContext = React.createContext<State>({
+const StateContext = createContext<State>({
   showLoggedOut: false,
   requestedAccountSwitchTo: undefined,
 })
 StateContext.displayName = 'LoggedOutStateContext'
 
-const ControlsContext = React.createContext<Controls>({
+const ControlsContext = createContext<Controls>({
   setShowLoggedOut: () => {},
   requestSwitchToAccount: () => {},
   clearRequestedAccount: () => {},
@@ -52,7 +52,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const activeStarterPack = useActiveStarterPack()
   const {hasSession} = useSession()
   const shouldShowStarterPack = Boolean(activeStarterPack?.uri) && !hasSession
-  const [state, setState] = React.useState<State>({
+  const [state, setState] = useState<State>({
     showLoggedOut: shouldShowStarterPack,
     requestedAccountSwitchTo: shouldShowStarterPack
       ? IS_WEB
@@ -61,7 +61,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       : undefined,
   })
 
-  const controls = React.useMemo<Controls>(
+  const controls = useMemo<Controls>(
     () => ({
       setShowLoggedOut(show) {
         setState(s => ({
@@ -96,9 +96,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useLoggedOutView() {
-  return React.useContext(StateContext)
+  return useContext(StateContext)
 }
 
 export function useLoggedOutViewControls() {
-  return React.useContext(ControlsContext)
+  return useContext(ControlsContext)
 }

src/state/shell/minimal-mode.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useMemo} from 'react'
 import {
   type SharedValue,
   useSharedValue,
@@ -11,7 +11,7 @@ type StateContext = {
 }
 type SetContext = (v: boolean) => void
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   headerMode: {
     value: 0,
     addListener() {},
@@ -34,13 +34,13 @@ const stateContext = React.createContext<StateContext>({
   },
 })
 stateContext.displayName = 'MinimalModeStateContext'
-const setContext = React.createContext<SetContext>((_: boolean) => {})
+const setContext = createContext<SetContext>((_: boolean) => {})
 setContext.displayName = 'MinimalModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerMode = useSharedValue(0)
   const footerMode = useSharedValue(0)
-  const setMode = React.useCallback(
+  const setMode = useCallback(
     (v: boolean) => {
       'worklet'
       headerMode.set(() =>
@@ -56,7 +56,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     },
     [headerMode, footerMode],
   )
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       headerMode,
       footerMode,
@@ -71,9 +71,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useMinimalShellMode() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useSetMinimalShellMode() {
-  return React.useContext(setContext)
+  return useContext(setContext)
 }

src/state/shell/onboarding.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useReducer} from 'react'
 
 import * as persisted from '#/state/persisted'
 
@@ -26,11 +26,11 @@ export type StateContext = persisted.Schema['onboarding'] & {
 }
 export type DispatchContext = (action: Action) => void
 
-const stateContext = React.createContext<StateContext>(
+const stateContext = createContext<StateContext>(
   compute(persisted.defaults.onboarding),
 )
 stateContext.displayName = 'OnboardingStateContext'
-const dispatchContext = React.createContext<DispatchContext>((_: Action) => {})
+const dispatchContext = createContext<DispatchContext>((_: Action) => {})
 dispatchContext.displayName = 'OnboardingDispatchContext'
 
 function reducer(state: StateContext, action: Action): StateContext {
@@ -74,12 +74,12 @@ function reducer(state: StateContext, action: Action): StateContext {
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, dispatch] = React.useReducer(
+  const [state, dispatch] = useReducer(
     reducer,
     compute(persisted.get('onboarding')),
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     return persisted.onUpdate('onboarding', nextOnboarding => {
       const next = nextOnboarding.step
       // TODO we've introduced a footgun
@@ -102,11 +102,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useOnboardingState() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }
 
 export function useOnboardingDispatch() {
-  return React.useContext(dispatchContext)
+  return useContext(dispatchContext)
 }
 
 export function isOnboardingActive() {

src/state/shell/post-progress.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext} from 'react'
 
 interface PostProgressState {
   progress: number
@@ -6,7 +6,7 @@ interface PostProgressState {
   error?: string
 }
 
-const PostProgressContext = React.createContext<PostProgressState>({
+const PostProgressContext = createContext<PostProgressState>({
   progress: 0,
   status: 'idle',
 })
@@ -15,5 +15,5 @@ PostProgressContext.displayName = 'PostProgressContext'
 export function Provider() {}
 
 export function usePostProgress() {
-  return React.useContext(PostProgressContext)
+  return useContext(PostProgressContext)
 }

src/state/shell/progress-guide.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {createContext, useContext, useMemo, useRef, useState} from 'react'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 
@@ -44,10 +44,10 @@ export type ProgressGuide =
   | Follow10ProgressGuide
   | undefined
 
-const ProgressGuideContext = React.createContext<ProgressGuide>(undefined)
+const ProgressGuideContext = createContext<ProgressGuide>(undefined)
 ProgressGuideContext.displayName = 'ProgressGuideContext'
 
-const ProgressGuideControlContext = React.createContext<{
+const ProgressGuideControlContext = createContext<{
   startProgressGuide(guide: ProgressGuideName): void
   endProgressGuide(): void
   captureAction(action: ProgressGuideAction, count?: number): void
@@ -59,7 +59,7 @@ const ProgressGuideControlContext = React.createContext<{
 ProgressGuideControlContext.displayName = 'ProgressGuideControlContext'
 
 export function useProgressGuide(guide: ProgressGuideName) {
-  const ctx = React.useContext(ProgressGuideContext)
+  const ctx = useContext(ProgressGuideContext)
   if (ctx?.guide === guide) {
     return ctx
   }
@@ -67,7 +67,7 @@ export function useProgressGuide(guide: ProgressGuideName) {
 }
 
 export function useProgressGuideControls() {
-  return React.useContext(ProgressGuideControlContext)
+  return useContext(ProgressGuideControlContext)
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
@@ -101,21 +101,21 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }, [isPending, variables, preferences])
 
   const [localGuideState, setLocalGuideState] =
-    React.useState<ProgressGuide>(undefined)
+    useState<ProgressGuide>(undefined)
 
   if (activeProgressGuide && !localGuideState) {
     // hydrate from the server if needed
     setLocalGuideState(activeProgressGuide)
   }
 
-  const firstLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const fifthLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const tenthLikeToastRef = React.useRef<ProgressGuideToastRef | null>(null)
+  const firstLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const fifthLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const tenthLikeToastRef = useRef<ProgressGuideToastRef | null>(null)
 
-  const fifthFollowToastRef = React.useRef<ProgressGuideToastRef | null>(null)
-  const tenthFollowToastRef = React.useRef<ProgressGuideToastRef | null>(null)
+  const fifthFollowToastRef = useRef<ProgressGuideToastRef | null>(null)
+  const tenthFollowToastRef = useRef<ProgressGuideToastRef | null>(null)
 
-  const controls = React.useMemo(() => {
+  const controls = useMemo(() => {
     return {
       startProgressGuide(guide: ProgressGuideName) {
         if (guide === 'like-10-and-follow-7') {

src/state/shell/shell-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo} from 'react'
 import {type SharedValue, useSharedValue} from 'react-native-reanimated'
 
 type StateContext = {
@@ -6,7 +6,7 @@ type StateContext = {
   footerHeight: SharedValue<number>
 }
 
-const stateContext = React.createContext<StateContext>({
+const stateContext = createContext<StateContext>({
   headerHeight: {
     value: 0,
     addListener() {},
@@ -34,7 +34,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const headerHeight = useSharedValue(0)
   const footerHeight = useSharedValue(0)
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       headerHeight,
       footerHeight,
@@ -46,5 +46,5 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useShellLayout() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }

src/state/shell/starter-pack.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useState} from 'react'
 
 type StateContext =
   | {
@@ -8,13 +8,13 @@ type StateContext =
   | undefined
 type SetContext = (v: StateContext) => void
 
-const stateContext = React.createContext<StateContext>(undefined)
+const stateContext = createContext<StateContext>(undefined)
 stateContext.displayName = 'ActiveStarterPackStateContext'
-const setContext = React.createContext<SetContext>((_: StateContext) => {})
+const setContext = createContext<SetContext>((_: StateContext) => {})
 setContext.displayName = 'ActiveStarterPackSetContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  const [state, setState] = React.useState<StateContext>()
+  const [state, setState] = useState<StateContext>()
 
   return (
     <stateContext.Provider value={state}>
@@ -23,5 +23,5 @@ export function Provider({children}: {children: React.ReactNode}) {
   )
 }
 
-export const useActiveStarterPack = () => React.useContext(stateContext)
-export const useSetActiveStarterPack = () => React.useContext(setContext)
+export const useActiveStarterPack = () => useContext(stateContext)
+export const useSetActiveStarterPack = () => useContext(setContext)

src/state/shell/tick-every-minute.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import {createContext, useContext, useEffect, useState} from 'react'
 
 type StateContext = number
 
-const stateContext = React.createContext<StateContext>(0)
+const stateContext = createContext<StateContext>(0)
 stateContext.displayName = 'TickEveryMinuteContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [tick, setTick] = React.useState(Date.now())
-  React.useEffect(() => {
+  const [tick, setTick] = useState(Date.now())
+  useEffect(() => {
     const i = setInterval(() => {
       setTick(Date.now())
     }, 60_000)
@@ -17,5 +17,5 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 }
 
 export function useTickEveryMinute() {
-  return React.useContext(stateContext)
+  return useContext(stateContext)
 }