[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/screens/Deactivated.tsx

@@ -1,20 +1,20 @@
 import React from 'react'
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
-import {useOnboardingDispatch} from '#/state/shell'
-import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session'
-import {logger} from '#/logger'
-import {pluralize} from '#/lib/strings/helpers'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme, useBreakpoints} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {Text, P} from '#/components/Typography'
+import {pluralize} from '#/lib/strings/helpers'
+import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {isSessionDeactivated, useAgent, useSessionApi} from '#/state/session'
+import {useOnboardingDispatch} from '#/state/shell'
 import {ScrollView} from '#/view/com/util/Views'
-import {Loader} from '#/components/Loader'
 import {Logo} from '#/view/icons/Logo'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Loader} from '#/components/Loader'
+import {P, Text} from '#/components/Typography'
 
 const COL_WIDTH = 400
 
@@ -25,6 +25,7 @@ export function Deactivated() {
   const {gtMobile} = useBreakpoints()
   const onboardingDispatch = useOnboardingDispatch()
   const {logout} = useSessionApi()
+  const {getAgent} = useAgent()
 
   const [isProcessing, setProcessing] = React.useState(false)
   const [estimatedTime, setEstimatedTime] = React.useState<string | undefined>(
@@ -56,7 +57,13 @@ export function Deactivated() {
     } finally {
       setProcessing(false)
     }
-  }, [setProcessing, setEstimatedTime, setPlaceInQueue, onboardingDispatch])
+  }, [
+    setProcessing,
+    setEstimatedTime,
+    setPlaceInQueue,
+    onboardingDispatch,
+    getAgent,
+  ])
 
   React.useEffect(() => {
     checkStatus()

src/screens/Onboarding/StepFinished.tsx

@@ -8,7 +8,7 @@ import {BSKY_APP_ACCOUNT_DID} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useSetSaveFeedsMutation} from '#/state/queries/preferences'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {
   DescriptionText,
@@ -38,6 +38,7 @@ export function StepFinished() {
   const onboardDispatch = useOnboardingDispatch()
   const [saving, setSaving] = React.useState(false)
   const {mutateAsync: saveFeeds} = useSetSaveFeedsMutation()
+  const {getAgent} = useAgent()
 
   const finishOnboarding = React.useCallback(async () => {
     setSaving(true)
@@ -81,7 +82,7 @@ export function StepFinished() {
     track('OnboardingV2:StepFinished:End')
     track('OnboardingV2:Complete')
     logEvent('onboarding:finished:nextPressed', {})
-  }, [state, dispatch, onboardDispatch, setSaving, saveFeeds, track])
+  }, [state, dispatch, onboardDispatch, setSaving, saveFeeds, track, getAgent])
 
   React.useEffect(() => {
     track('OnboardingV2:StepFinished:Start')

src/screens/Onboarding/StepInterests/index.tsx

@@ -8,7 +8,7 @@ import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {capitalize} from '#/lib/strings/capitalize'
 import {logger} from '#/logger'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {
   DescriptionText,
@@ -39,6 +39,7 @@ export function StepInterests() {
     state.interestsStepResults.selectedInterests.map(i => i),
   )
   const onboardDispatch = useOnboardingDispatch()
+  const {getAgent} = useAgent()
   const {isLoading, isError, error, data, refetch, isFetching} = useQuery({
     queryKey: ['interests'],
     queryFn: async () => {

src/screens/Signup/index.tsx

@@ -9,7 +9,7 @@ import {FEEDBACK_FORM_URL} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
 import {createFullHandle} from '#/lib/strings/handles'
 import {useServiceQuery} from '#/state/queries/service'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {
   initialState,
@@ -35,6 +35,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   const [state, dispatch] = React.useReducer(reducer, initialState)
   const submit = useSubmitSignup({state, dispatch})
   const {gtMobile} = useBreakpoints()
+  const {getAgent} = useAgent()
 
   const {
     data: serviceInfo,
@@ -113,6 +114,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
     state.serviceDescription?.phoneVerificationRequired,
     state.userDomain,
     submit,
+    getAgent,
   ])
 
   const onBackPress = React.useCallback(() => {