Refactor invites modal (#1930)

* Refactor invites modal

* Replace in drawer

* Delete stuff from me model

src/state/models/me.ts

@@ -1,8 +1,5 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {
-  ComAtprotoServerDefs,
-  ComAtprotoServerListAppPasswords,
-} from '@atproto/api'
+import {ComAtprotoServerListAppPasswords} from '@atproto/api'
 import {RootStoreModel} from './root-store'
 import {isObj, hasProp} from 'lib/type-guards'
 import {logger} from '#/logger'
@@ -17,14 +14,9 @@ export class MeModel {
   avatar: string = ''
   followsCount: number | undefined
   followersCount: number | undefined
-  invites: ComAtprotoServerDefs.InviteCode[] = []
   appPasswords: ComAtprotoServerListAppPasswords.AppPassword[] = []
   lastProfileStateUpdate = Date.now()
 
-  get invitesAvailable() {
-    return this.invites.filter(isInviteAvailable).length
-  }
-
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(
       this,
@@ -41,7 +33,6 @@ export class MeModel {
     this.displayName = ''
     this.description = ''
     this.avatar = ''
-    this.invites = []
     this.appPasswords = []
   }
 
@@ -90,7 +81,6 @@ export class MeModel {
       this.did = sess.currentSession?.did || ''
       await this.fetchProfile()
       this.rootStore.emitSessionLoaded()
-      await this.fetchInviteCodes()
       await this.fetchAppPasswords()
     } else {
       this.clear()
@@ -102,7 +92,6 @@ export class MeModel {
       logger.debug('Updating me profile information')
       this.lastProfileStateUpdate = Date.now()
       await this.fetchProfile()
-      await this.fetchInviteCodes()
       await this.fetchAppPasswords()
     }
   }
@@ -129,33 +118,6 @@ export class MeModel {
     })
   }
 
-  async fetchInviteCodes() {
-    if (this.rootStore.session) {
-      try {
-        const res =
-          await this.rootStore.agent.com.atproto.server.getAccountInviteCodes(
-            {},
-          )
-        runInAction(() => {
-          this.invites = res.data.codes
-          this.invites.sort((a, b) => {
-            if (!isInviteAvailable(a)) {
-              return 1
-            }
-            if (!isInviteAvailable(b)) {
-              return -1
-            }
-            return 0
-          })
-        })
-      } catch (e) {
-        logger.error('Failed to fetch user invite codes', {
-          error: e,
-        })
-      }
-    }
-  }
-
   async fetchAppPasswords() {
     if (this.rootStore.session) {
       try {
@@ -208,7 +170,3 @@ export class MeModel {
     }
   }
 }
-
-function isInviteAvailable(invite: ComAtprotoServerDefs.InviteCode): boolean {
-  return invite.available - invite.uses.length > 0 && !invite.disabled
-}

src/state/queries/invites.ts

@@ -0,0 +1,36 @@
+import {ComAtprotoServerDefs} from '@atproto/api'
+import {useQuery} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+
+function isInviteAvailable(invite: ComAtprotoServerDefs.InviteCode): boolean {
+  return invite.available - invite.uses.length > 0 && !invite.disabled
+}
+
+export type InviteCodesQueryResponse = Exclude<
+  ReturnType<typeof useInviteCodesQuery>['data'],
+  undefined
+>
+export function useInviteCodesQuery() {
+  const {agent} = useSession()
+
+  return useQuery({
+    queryKey: ['inviteCodes'],
+    queryFn: async () => {
+      const res = await agent.com.atproto.server.getAccountInviteCodes({})
+
+      if (!res.data?.codes) {
+        throw new Error(`useInviteCodesQuery: no codes returned`)
+      }
+
+      const available = res.data.codes.filter(isInviteAvailable)
+      const used = res.data.codes.filter(code => !isInviteAvailable(code))
+
+      return {
+        all: [...available, ...used],
+        available,
+        used,
+      }
+    },
+  })
+}