zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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

zio/stable
Paul Frazee 2023-11-16 11:11:56 -08:00 committed by GitHub
parent 310a7eaca7
commit 9f7a162a96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 177 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/state/models/me.ts
View File

@ -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})
}
}
}
}

56
src/state/queries/app-passwords.ts 100644
View File

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

25
src/view/com/modals/AddAppPasswords.tsx
View File

@ -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})
}
}

6
src/view/com/util/Toast.tsx
View File

@ -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()

9
src/view/com/util/Toast.web.tsx
View File

@ -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)

139
src/view/screens/AppPasswords.tsx
View File

@ -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,33 +110,47 @@ export const AppPasswords = withAuthRequired(
)
}
// has app passwords
return (
<CenteredView
style={[
styles.container,
isTabletOrDesktop && styles.containerDesktop,
pal.view,
pal.border,
]}
testID="appPasswordsScreen">
<AppPasswordsHeader />
<ScrollView
if (appPasswords?.length) {
// has app passwords
return (
<CenteredView
style={[
styles.scrollContainer,
styles.container,
isTabletOrDesktop && styles.containerDesktop,
pal.view,
pal.border,
!isTabletOrDesktop && styles.flex1,
]}>
{store.me.appPasswords.map((password, i) => (
<AppPassword
key={password.name}
testID={`appPassword-${i}`}
name={password.name}
createdAt={password.createdAt}
/>
))}
{isTabletOrDesktop && (
<View style={[styles.btnContainer, styles.btnContainerDesktop]}>
]}
testID="appPasswordsScreen">
<AppPasswordsHeader />
<ScrollView
style={[
styles.scrollContainer,
pal.border,
!isTabletOrDesktop && styles.flex1,
]}>
{appPasswords.map((password, i) => (
<AppPassword
key={password.name}
testID={`appPassword-${i}`}
name={password.name}
createdAt={password.createdAt}
/>
))}
{isTabletOrDesktop && (
<View style={[styles.btnContainer, styles.btnContainerDesktop]}>
<Button
testID="appPasswordBtn"
type="primary"
label="Add App Password"
style={styles.btn}
labelStyle={styles.btnLabel}
onPress={onAdd}
/>
</View>
)}
</ScrollView>
{!isTabletOrDesktop && (
<View style={styles.btnContainer}>
<Button
testID="appPasswordBtn"
type="primary"
@ -119,22 +161,23 @@ export const AppPasswords = withAuthRequired(
/>
</View>
)}
</ScrollView>
{!isTabletOrDesktop && (
<View style={styles.btnContainer}>
<Button
testID="appPasswordBtn"
type="primary"
label="Add App Password"
style={styles.btn}
labelStyle={styles.btnLabel}
onPress={onAdd}
/>
</View>
)}
</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'