Refactor app passwords to use react-query (#1932)

src/state/models/me.ts

@@ -1,5 +1,4 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {ComAtprotoServerListAppPasswords} from '@atproto/api'
 import {RootStoreModel} from './root-store'
 import {isObj, hasProp} from 'lib/type-guards'
 import {logger} from '#/logger'
@@ -14,7 +13,6 @@ export class MeModel {
   avatar: string = ''
   followsCount: number | undefined
   followersCount: number | undefined
-  appPasswords: ComAtprotoServerListAppPasswords.AppPassword[] = []
   lastProfileStateUpdate = Date.now()
 
   constructor(public rootStore: RootStoreModel) {
@@ -33,7 +31,6 @@ export class MeModel {
     this.displayName = ''
     this.description = ''
     this.avatar = ''
-    this.appPasswords = []
   }
 
   serialize(): unknown {
@@ -81,7 +78,6 @@ export class MeModel {
       this.did = sess.currentSession?.did || ''
       await this.fetchProfile()
       this.rootStore.emitSessionLoaded()
-      await this.fetchAppPasswords()
     } else {
       this.clear()
     }
@@ -92,7 +88,6 @@ export class MeModel {
       logger.debug('Updating me profile information')
       this.lastProfileStateUpdate = Date.now()
       await this.fetchProfile()
-      await this.fetchAppPasswords()
     }
   }
 
@@ -117,56 +112,4 @@ export class MeModel {
       }
     })
   }
-
-  async fetchAppPasswords() {
-    if (this.rootStore.session) {
-      try {
-        const res =
-          await this.rootStore.agent.com.atproto.server.listAppPasswords({})
-        runInAction(() => {
-          this.appPasswords = res.data.passwords
-        })
-      } catch (e) {
-        logger.error('Failed to fetch user app passwords', {
-          error: e,
-        })
-      }
-    }
-  }
-
-  async createAppPassword(name: string) {
-    if (this.rootStore.session) {
-      try {
-        if (this.appPasswords.find(p => p.name === name)) {
-          // TODO: this should be handled by the backend but it's not
-          throw new Error('App password with this name already exists')
-        }
-        const res =
-          await this.rootStore.agent.com.atproto.server.createAppPassword({
-            name,
-          })
-        runInAction(() => {
-          this.appPasswords.push(res.data)
-        })
-        return res.data
-      } catch (e) {
-        logger.error('Failed to create app password', {error: e})
-      }
-    }
-  }
-
-  async deleteAppPassword(name: string) {
-    if (this.rootStore.session) {
-      try {
-        await this.rootStore.agent.com.atproto.server.revokeAppPassword({
-          name: name,
-        })
-        runInAction(() => {
-          this.appPasswords = this.appPasswords.filter(p => p.name !== name)
-        })
-      } catch (e) {
-        logger.error('Failed to delete app password', {error: e})
-      }
-    }
-  }
 }

src/state/queries/app-passwords.ts

@@ -0,0 +1,56 @@
+import {ComAtprotoServerCreateAppPassword} from '@atproto/api'
+import {useQuery, useQueryClient, useMutation} from '@tanstack/react-query'
+import {useSession} from '../session'
+
+export const RQKEY = () => ['app-passwords']
+
+export function useAppPasswordsQuery() {
+  const {agent} = useSession()
+  return useQuery({
+    queryKey: RQKEY(),
+    queryFn: async () => {
+      const res = await agent.com.atproto.server.listAppPasswords({})
+      return res.data.passwords
+    },
+  })
+}
+
+export function useAppPasswordCreateMutation() {
+  const {agent} = useSession()
+  const queryClient = useQueryClient()
+  return useMutation<
+    ComAtprotoServerCreateAppPassword.OutputSchema,
+    Error,
+    {name: string}
+  >({
+    mutationFn: async ({name}) => {
+      return (
+        await agent.com.atproto.server.createAppPassword({
+          name,
+        })
+      ).data
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: RQKEY(),
+      })
+    },
+  })
+}
+
+export function useAppPasswordDeleteMutation() {
+  const {agent} = useSession()
+  const queryClient = useQueryClient()
+  return useMutation<void, Error, {name: string}>({
+    mutationFn: async ({name}) => {
+      await agent.com.atproto.server.revokeAppPassword({
+        name,
+      })
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: RQKEY(),
+      })
+    },
+  })
+}