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(),
+      })
+    },
+  })
+}

src/view/com/modals/AddAppPasswords.tsx

@@ -3,7 +3,6 @@ import {StyleSheet, TextInput, View, TouchableOpacity} from 'react-native'
 import {Text} from '../util/text/Text'
 import {Button} from '../util/forms/Button'
 import {s} from 'lib/styles'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isNative} from 'platform/detection'
 import {
@@ -16,6 +15,10 @@ import {logger} from '#/logger'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {
+  useAppPasswordsQuery,
+  useAppPasswordCreateMutation,
+} from '#/state/queries/app-passwords'
 
 export const snapPoints = ['70%']
 
@@ -56,9 +59,10 @@ const shadesOfBlue: string[] = [
 
 export function Component({}: {}) {
   const pal = usePalette('default')
-  const store = useStores()
   const {_} = useLingui()
   const {closeModal} = useModalControls()
+  const {data: passwords} = useAppPasswordsQuery()
+  const createMutation = useAppPasswordCreateMutation()
   const [name, setName] = useState(
     shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
   )
@@ -82,25 +86,34 @@ export function Component({}: {}) {
     if (!name || !name.trim()) {
       Toast.show(
         'Please enter a name for your app password. All spaces is not allowed.',
+        'times',
       )
       return
     }
     // if name is too short (under 4 chars), we don't allow it
     if (name.length < 4) {
-      Toast.show('App Password names must be at least 4 characters long.')
+      Toast.show(
+        'App Password names must be at least 4 characters long.',
+        'times',
+      )
+      return
+    }
+
+    if (passwords?.find(p => p.name === name)) {
+      Toast.show('This name is already in use', 'times')
       return
     }
 
     try {
-      const newPassword = await store.me.createAppPassword(name)
+      const newPassword = await createMutation.mutateAsync({name})
       if (newPassword) {
         setAppPassword(newPassword.password)
       } else {
-        Toast.show('Failed to create app password.')
+        Toast.show('Failed to create app password.', 'times')
         // TODO: better error handling (?)
       }
     } catch (e) {
-      Toast.show('Failed to create app password.')
+      Toast.show('Failed to create app password.', 'times')
       logger.error('Failed to create app password', {error: e})
     }
   }

src/view/com/util/Toast.tsx

@@ -1,6 +1,7 @@
 import RootSiblings from 'react-native-root-siblings'
 import React from 'react'
 import {Animated, StyleSheet, View} from 'react-native'
+import {Props as FontAwesomeProps} from '@fortawesome/react-native-fontawesome'
 import {Text} from './text/Text'
 import {colors} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
@@ -9,7 +10,10 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 
 const TIMEOUT = 4e3
 
-export function show(message: string) {
+export function show(
+  message: string,
+  _icon: FontAwesomeProps['icon'] = 'check',
+) {
   const item = new RootSiblings(<Toast message={message} />)
   setTimeout(() => {
     item.destroy()

src/view/com/util/Toast.web.tsx

@@ -7,12 +7,14 @@ import {StyleSheet, Text, View} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
+  Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
 
 const DURATION = 3500
 
 interface ActiveToast {
   text: string
+  icon: FontAwesomeProps['icon']
 }
 type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
 
@@ -36,7 +38,7 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
       {activeToast && (
         <View style={styles.container}>
           <FontAwesomeIcon
-            icon="check"
+            icon={activeToast.icon}
             size={24}
             style={styles.icon as FontAwesomeIconStyle}
           />
@@ -49,11 +51,12 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 
 // methods
 // =
-export function show(text: string) {
+
+export function show(text: string, icon: FontAwesomeProps['icon'] = 'check') {
   if (toastTimeout) {
     clearTimeout(toastTimeout)
   }
-  globalSetActiveToast?.({text})
+  globalSetActiveToast?.({text, icon})
   toastTimeout = setTimeout(() => {
     globalSetActiveToast?.(undefined)
   }, DURATION)

src/view/screens/AppPasswords.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ScrollView} from 'react-native-gesture-handler'
 import {Text} from '../com/util/text/Text'
 import {Button} from '../com/util/forms/Button'
 import * as Toast from '../com/util/Toast'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
-import {observer} from 'mobx-react-lite'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {useAnalytics} from 'lib/analytics/analytics'
@@ -21,16 +24,22 @@ import {useLingui} from '@lingui/react'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useModalControls} from '#/state/modals'
 import {useLanguagePrefs} from '#/state/preferences'
+import {
+  useAppPasswordsQuery,
+  useAppPasswordDeleteMutation,
+} from '#/state/queries/app-passwords'
+import {ErrorScreen} from '../com/util/error/ErrorScreen'
+import {cleanError} from '#/lib/strings/errors'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
 export const AppPasswords = withAuthRequired(
-  observer(function AppPasswordsImpl({}: Props) {
+  function AppPasswordsImpl({}: Props) {
     const pal = usePalette('default')
-    const store = useStores()
     const setMinimalShellMode = useSetMinimalShellMode()
     const {screen} = useAnalytics()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {openModal} = useModalControls()
+    const {data: appPasswords, error} = useAppPasswordsQuery()
 
     useFocusEffect(
       React.useCallback(() => {
@@ -43,8 +52,27 @@ export const AppPasswords = withAuthRequired(
       openModal({name: 'add-app-password'})
     }, [openModal])
 
+    if (error) {
+      return (
+        <CenteredView
+          style={[
+            styles.container,
+            isTabletOrDesktop && styles.containerDesktop,
+            pal.view,
+            pal.border,
+          ]}
+          testID="appPasswordsScreen">
+          <ErrorScreen
+            title="Oops!"
+            message="There was an issue with fetching your app passwords"
+            details={cleanError(error)}
+          />
+        </CenteredView>
+      )
+    }
+
     // no app passwords (empty) state
-    if (store.me.appPasswords.length === 0) {
+    if (appPasswords?.length === 0) {
       return (
         <CenteredView
           style={[
@@ -82,6 +110,7 @@ export const AppPasswords = withAuthRequired(
       )
     }
 
+    if (appPasswords?.length) {
       // has app passwords
       return (
         <CenteredView
@@ -99,7 +128,7 @@ export const AppPasswords = withAuthRequired(
               pal.border,
               !isTabletOrDesktop && styles.flex1,
             ]}>
-          {store.me.appPasswords.map((password, i) => (
+            {appPasswords.map((password, i) => (
               <AppPassword
                 key={password.name}
                 testID={`appPassword-${i}`}
@@ -134,7 +163,21 @@ export const AppPasswords = withAuthRequired(
           )}
         </CenteredView>
       )
-  }),
+    }
+
+    return (
+      <CenteredView
+        style={[
+          styles.container,
+          isTabletOrDesktop && styles.containerDesktop,
+          pal.view,
+          pal.border,
+        ]}
+        testID="appPasswordsScreen">
+        <ActivityIndicator />
+      </CenteredView>
+    )
+  },
 )
 
 function AppPasswordsHeader() {
@@ -169,10 +212,10 @@ function AppPassword({
   createdAt: string
 }) {
   const pal = usePalette('default')
-  const store = useStores()
   const {_} = useLingui()
   const {openModal} = useModalControls()
   const {contentLanguages} = useLanguagePrefs()
+  const deleteMutation = useAppPasswordDeleteMutation()
 
   const onDelete = React.useCallback(async () => {
     openModal({
@@ -180,11 +223,11 @@ function AppPassword({
       title: 'Delete App Password',
       message: `Are you sure you want to delete the app password "${name}"?`,
       async onPressConfirm() {
-        await store.me.deleteAppPassword(name)
+        await deleteMutation.mutateAsync({name})
         Toast.show('App password deleted')
       },
     })
-  }, [store, openModal, name])
+  }, [deleteMutation, openModal, name])
 
   const primaryLocale =
     contentLanguages.length > 0 ? contentLanguages[0] : 'en-US'