Refactor ChangeHandle modal (#1929)

* Refactor ChangeHandle to use new methods

* Better telemetry

* Remove unused logic

* Remove caching

* Add error message

* Persist service changes, don't fall back on change handle

src/state/queries/handle.ts

@@ -1,9 +1,10 @@
 import React from 'react'
-import {useQueryClient} from '@tanstack/react-query'
+import {useQueryClient, useMutation} from '@tanstack/react-query'
 
 import {useSession} from '#/state/session'
 
 const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid]
+const fetchDidQueryKey = (handleOrDid: string) => ['did', handleOrDid]
 
 export function useFetchHandle() {
   const {agent} = useSession()
@@ -23,3 +24,35 @@ export function useFetchHandle() {
     [agent, queryClient],
   )
 }
+
+export function useUpdateHandleMutation() {
+  const {agent} = useSession()
+
+  return useMutation({
+    mutationFn: async ({handle}: {handle: string}) => {
+      await agent.updateHandle({handle})
+    },
+  })
+}
+
+export function useFetchDid() {
+  const {agent} = useSession()
+  const queryClient = useQueryClient()
+
+  return React.useCallback(
+    async (handleOrDid: string) => {
+      return queryClient.fetchQuery({
+        queryKey: fetchDidQueryKey(handleOrDid),
+        queryFn: async () => {
+          let identifier = handleOrDid
+          if (!identifier.startsWith('did:')) {
+            const res = await agent.resolveHandle({handle: identifier})
+            identifier = res.data.did
+          }
+          return identifier
+        },
+      })
+    },
+    [agent, queryClient],
+  )
+}

src/state/queries/service.ts

@@ -0,0 +1,16 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+
+export const RQKEY = (serviceUrl: string) => ['service', serviceUrl]
+
+export function useServiceQuery() {
+  const {agent} = useSession()
+  return useQuery({
+    queryKey: RQKEY(agent.service.toString()),
+    queryFn: async () => {
+      const res = await agent.com.atproto.server.describeServer()
+      return res.data
+    },
+  })
+}