[Session] Add useAgent hook and replace (#3706)

* Hook it up

* Memoize getAgent method

* Use one shared reference

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/view/com/composer/Composer.tsx

@@ -32,7 +32,7 @@ import {
 import {useProfileQuery} from '#/state/queries/profile'
 import {Gif} from '#/state/queries/tenor'
 import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {getAgent, useSession} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as apilib from 'lib/api/index'
@@ -83,6 +83,7 @@ export const ComposePost = observer(function ComposePost({
   imageUris: initImageUris,
 }: Props) {
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
   const {isModalActive} = useModals()
   const {closeComposer} = useComposerControls()

src/view/com/composer/useExternalLinkFetch.e2e.ts

@@ -1,12 +1,14 @@
-import {useState, useEffect} from 'react'
+import {useEffect, useState} from 'react'
+
+import {useAgent} from '#/state/session'
 import * as apilib from 'lib/api/index'
 import {getLinkMeta} from 'lib/link-meta/link-meta'
 import {ComposerOpts} from 'state/shell/composer'
-import {getAgent} from '#/state/session'
 
 export function useExternalLinkFetch({}: {
   setQuote: (opts: ComposerOpts['quote']) => void
 }) {
+  const {getAgent} = useAgent()
   const [extLink, setExtLink] = useState<apilib.ExternalEmbedDraft | undefined>(
     undefined,
   )
@@ -39,7 +41,7 @@ export function useExternalLinkFetch({}: {
       })
     }
     return cleanup
-  }, [extLink])
+  }, [extLink, getAgent])
 
   return {extLink, setExtLink}
 }

src/view/com/composer/useExternalLinkFetch.ts

@@ -1,24 +1,25 @@
-import {useState, useEffect} from 'react'
-import {ImageModel} from 'state/models/media/image'
+import {useEffect, useState} from 'react'
+
+import {logger} from '#/logger'
+import {useFetchDid} from '#/state/queries/handle'
+import {useGetPost} from '#/state/queries/post'
+import {useAgent} from '#/state/session'
 import * as apilib from 'lib/api/index'
-import {getLinkMeta} from 'lib/link-meta/link-meta'
+import {POST_IMG_MAX} from 'lib/constants'
 import {
-  getPostAsQuote,
   getFeedAsEmbed,
   getListAsEmbed,
+  getPostAsQuote,
 } from 'lib/link-meta/bsky'
+import {getLinkMeta} from 'lib/link-meta/link-meta'
 import {downloadAndResize} from 'lib/media/manip'
 import {
-  isBskyPostUrl,
   isBskyCustomFeedUrl,
   isBskyListUrl,
+  isBskyPostUrl,
 } from 'lib/strings/url-helpers'
+import {ImageModel} from 'state/models/media/image'
 import {ComposerOpts} from 'state/shell/composer'
-import {POST_IMG_MAX} from 'lib/constants'
-import {logger} from '#/logger'
-import {getAgent} from '#/state/session'
-import {useGetPost} from '#/state/queries/post'
-import {useFetchDid} from '#/state/queries/handle'
 
 export function useExternalLinkFetch({
   setQuote,
@@ -30,6 +31,7 @@ export function useExternalLinkFetch({
   )
   const getPost = useGetPost()
   const fetchDid = useFetchDid()
+  const {getAgent} = useAgent()
 
   useEffect(() => {
     let aborted = false
@@ -135,7 +137,7 @@ export function useExternalLinkFetch({
       })
     }
     return cleanup
-  }, [extLink, setQuote, getPost, fetchDid])
+  }, [extLink, setQuote, getPost, fetchDid, getAgent])
 
   return {extLink, setExtLink}
 }

src/view/com/modals/ChangeEmail.tsx

@@ -1,19 +1,20 @@
 import React, {useState} from 'react'
 import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native'
-import {ScrollView, TextInput} from './util'
-import {Text} from '../util/text/Text'
-import {Button} from '../util/forms/Button'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import * as Toast from '../util/Toast'
-import {s, colors} from 'lib/styles'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useModalControls} from '#/state/modals'
+import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
-import {useSession, useSessionApi, getAgent} from '#/state/session'
+import {colors, s} from 'lib/styles'
+import {isWeb} from 'platform/detection'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import * as Toast from '../util/Toast'
+import {ScrollView, TextInput} from './util'
 
 enum Stages {
   InputEmail,
@@ -26,6 +27,7 @@ export const snapPoints = ['90%']
 export function Component() {
   const pal = usePalette('default')
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const {updateCurrentAccount} = useSessionApi()
   const {_} = useLingui()
   const [stage, setStage] = useState<Stages>(Stages.InputEmail)

src/view/com/modals/ChangeHandle.tsx

@@ -16,8 +16,8 @@ import {useModalControls} from '#/state/modals'
 import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle'
 import {useServiceQuery} from '#/state/queries/service'
 import {
-  getAgent,
   SessionAccount,
+  useAgent,
   useSession,
   useSessionApi,
 } from '#/state/session'
@@ -40,6 +40,7 @@ export type Props = {onChanged: () => void}
 
 export function Component(props: Props) {
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const {
     isLoading,
     data: serviceInfo,

src/view/com/modals/ChangePassword.tsx

@@ -6,24 +6,25 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {ScrollView} from './util'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {TextInput} from './util'
-import {Text} from '../util/text/Text'
-import {Button} from '../util/forms/Button'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {s, colors} from 'lib/styles'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import * as EmailValidator from 'email-validator'
+
+import {logger} from '#/logger'
+import {useModalControls} from '#/state/modals'
+import {useAgent, useSession} from '#/state/session'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isAndroid, isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
 import {checkAndFormatResetCode} from 'lib/strings/password'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
-import {useSession, getAgent} from '#/state/session'
-import * as EmailValidator from 'email-validator'
-import {logger} from '#/logger'
+import {colors, s} from 'lib/styles'
+import {isAndroid, isWeb} from 'platform/detection'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
+import {ScrollView} from './util'
+import {TextInput} from './util'
 
 enum Stages {
   RequestCode,
@@ -36,6 +37,7 @@ export const snapPoints = isAndroid ? ['90%'] : ['45%']
 export function Component() {
   const pal = usePalette('default')
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const {_} = useLingui()
   const [stage, setStage] = useState<Stages>(Stages.RequestCode)
   const [isProcessing, setIsProcessing] = useState<boolean>(false)

src/view/com/modals/CreateOrEditList.tsx

@@ -25,7 +25,7 @@ import {
   useListCreateMutation,
   useListMetadataMutation,
 } from '#/state/queries/list'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -62,6 +62,7 @@ export function Component({
   const {_} = useLingui()
   const listCreateMutation = useListCreateMutation()
   const listMetadataMutation = useListMetadataMutation()
+  const {getAgent} = useAgent()
 
   const activePurpose = useMemo(() => {
     if (list?.purpose) {
@@ -228,6 +229,7 @@ export function Component({
     listMetadataMutation,
     listCreateMutation,
     _,
+    getAgent,
   ])
 
   return (

src/view/com/modals/DeleteAccount.tsx

@@ -11,7 +11,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useModalControls} from '#/state/modals'
-import {getAgent, useSession, useSessionApi} from '#/state/session'
+import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
@@ -30,6 +30,7 @@ export function Component({}: {}) {
   const pal = usePalette('default')
   const theme = useTheme()
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const {clearCurrentAccount, removeAccount} = useSessionApi()
   const {_} = useLingui()
   const {closeModal} = useModalControls()

src/view/com/modals/VerifyEmail.tsx

@@ -13,7 +13,7 @@ import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {useModalControls} from '#/state/modals'
-import {getAgent, useSession, useSessionApi} from '#/state/session'
+import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
@@ -41,6 +41,7 @@ export function Component({
   onSuccess?: () => void
 }) {
   const pal = usePalette('default')
+  const {getAgent} = useAgent()
   const {currentAccount} = useSession()
   const {updateCurrentAccount} = useSessionApi()
   const {_} = useLingui()

src/view/screens/Profile.tsx

@@ -19,7 +19,7 @@ import {resetProfilePostsQueries} from '#/state/queries/post-feed'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
-import {getAgent, useSession} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
@@ -472,6 +472,7 @@ function ProfileScreenLoaded({
 }
 
 function useRichText(text: string): [RichTextAPI, boolean] {
+  const {getAgent} = useAgent()
   const [prevText, setPrevText] = React.useState(text)
   const [rawRT, setRawRT] = React.useState(() => new RichTextAPI({text}))
   const [resolvedRT, setResolvedRT] = React.useState<RichTextAPI | null>(null)
@@ -495,7 +496,7 @@ function useRichText(text: string): [RichTextAPI, boolean] {
     return () => {
       ignore = true
     }
-  }, [text])
+  }, [text, getAgent])
   const isResolving = resolvedRT === null
   return [resolvedRT ?? rawRT, isResolving]
 }

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {isNative} from '#/platform/detection'
-import {getAgent, useSession, useSessionApi} from '#/state/session'
+import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
@@ -31,6 +31,7 @@ export function DisableEmail2FADialog({
   const {gtMobile} = useBreakpoints()
   const {currentAccount} = useSession()
   const {updateCurrentAccount} = useSessionApi()
+  const {getAgent} = useAgent()
 
   const [stage, setStage] = useState<Stages>(Stages.Email)
   const [confirmationCode, setConfirmationCode] = useState<string>('')

src/view/screens/Settings/Email2FAToggle.tsx

@@ -3,7 +3,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useModalControls} from '#/state/modals'
-import {getAgent, useSession, useSessionApi} from '#/state/session'
+import {useAgent, useSession, useSessionApi} from '#/state/session'
 import {ToggleButton} from 'view/com/util/forms/ToggleButton'
 import {useDialogControl} from '#/components/Dialog'
 import {DisableEmail2FADialog} from './DisableEmail2FADialog'
@@ -14,6 +14,7 @@ export function Email2FAToggle() {
   const {updateCurrentAccount} = useSessionApi()
   const {openModal} = useModalControls()
   const disableDialogCtrl = useDialogControl()
+  const {getAgent} = useAgent()
 
   const enableEmailAuthFactor = React.useCallback(async () => {
     if (currentAccount?.email) {
@@ -25,7 +26,7 @@ export function Email2FAToggle() {
         emailAuthFactor: true,
       })
     }
-  }, [currentAccount, updateCurrentAccount])
+  }, [currentAccount, updateCurrentAccount, getAgent])
 
   const onToggle = React.useCallback(() => {
     if (!currentAccount) {

src/view/screens/Settings/ExportCarDialog.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {getAgent, useSession} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -19,6 +19,7 @@ export function ExportCarDialog({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {currentAccount} = useSession()
+  const {getAgent} = useAgent()
 
   const downloadUrl = React.useMemo(() => {
     const agent = getAgent()
@@ -30,7 +31,7 @@ export function ExportCarDialog({
     url.pathname = '/xrpc/com.atproto.sync.getRepo'
     url.searchParams.set('did', agent.session.did)
     return url.toString()
-  }, [currentAccount])
+  }, [currentAccount, getAgent])
 
   return (
     <Dialog.Outer control={control}>

src/view/shell/index.tsx

@@ -13,7 +13,7 @@ import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigationState} from '@react-navigation/native'
 
-import {getAgent, useSession} from '#/state/session'
+import {useAgent, useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
   useIsDrawerSwipeDisabled,
@@ -57,6 +57,7 @@ function ShellInner() {
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   const {hasSession, currentAccount} = useSession()
+  const {getAgent} = useAgent()
   const closeAnyActiveElement = useCloseAnyActiveElement()
   const {importantForAccessibility} = useDialogStateContext()
   // start undefined
@@ -85,7 +86,7 @@ function ShellInner() {
       )
       return unsub
     }
-  }, [currentAccount])
+  }, [currentAccount, getAgent])
 
   return (
     <>