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

Refactor invites modal (#1930) 

* Refactor invites modal

* Replace in drawer

* Delete stuff from me model
zio/stable
Eric Bailey 2023-11-16 10:40:31 -06:00 committed by GitHub
parent 8a1fd160e6
commit e6efeea7c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 103 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

36
src/state/queries/invites.ts 100644
View File

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

54
src/view/com/modals/InviteCodes.tsx
View File

@ -1,5 +1,10 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {
StyleSheet,
TouchableOpacity,
View,
ActivityIndicator,
} from 'react-native'
import {observer} from 'mobx-react-lite'
import {ComAtprotoServerDefs} from '@atproto/api'
import {
@ -10,23 +15,41 @@ import Clipboard from '@react-native-clipboard/clipboard'
import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {ScrollView} from './util'
import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {Trans} from '@lingui/macro'
import {cleanError} from 'lib/strings/errors'
import {useModalControls} from '#/state/modals'
import {useInvitesState, useInvitesAPI} from '#/state/invites'
import {UserInfoText} from '../util/UserInfoText'
import {makeProfileLink} from '#/lib/routes/links'
import {Link} from '../util/Link'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {
useInviteCodesQuery,
InviteCodesQueryResponse,
} from '#/state/queries/invites'
export const snapPoints = ['70%']
export function Component({}: {}) {
export function Component() {
const {isLoading, data: invites, error} = useInviteCodesQuery()
return error ? (
<ErrorMessage message={cleanError(error)} />
) : isLoading || !invites ? (
<View style={{padding: 18}}>
<ActivityIndicator />
</View>
) : (
<Inner invites={invites} />
)
}
export function Inner({invites}: {invites: InviteCodesQueryResponse}) {
const pal = usePalette('default')
const store = useStores()
const {closeModal} = useModalControls()
const {isTabletOrDesktop} = useWebMediaQueries()
@ -34,7 +57,7 @@ export function Component({}: {}) {
closeModal()
}, [closeModal])
if (store.me.invites.length === 0) {
if (invites.all.length === 0) {
return (
<View style={[styles.container, pal.view]} testID="inviteCodesModal">
<View style={[styles.empty, pal.viewLight]}>
@ -74,12 +97,21 @@ export function Component({}: {}) {
</Trans>
</Text>
<ScrollView style={[styles.scrollContainer, pal.border]}>
{store.me.invites.map((invite, i) => (
{invites.available.map((invite, i) => (
<InviteCode
testID={`inviteCode-${i}`}
key={invite.code}
invite={invite}
used={invite.available - invite.uses.length <= 0 || invite.disabled}
invites={invites}
/>
))}
{invites.used.map((invite, i) => (
<InviteCode
used
testID={`inviteCode-${i}`}
key={invite.code}
invite={invite}
invites={invites}
/>
))}
</ScrollView>
@ -101,14 +133,14 @@ const InviteCode = observer(function InviteCodeImpl({
testID,
invite,
used,
invites,
}: {
testID: string
invite: ComAtprotoServerDefs.InviteCode
used?: boolean
invites: InviteCodesQueryResponse
}) {
const pal = usePalette('default')
const store = useStores()
const {invitesAvailable} = store.me
const invitesState = useInvitesState()
const {setInviteCopied} = useInvitesAPI()
@ -130,9 +162,9 @@ const InviteCode = observer(function InviteCodeImpl({
onPress={onPress}
accessibilityRole="button"
accessibilityLabel={
invitesAvailable === 1
invites.available.length === 1
? 'Invite codes: 1 available'
: `Invite codes: ${invitesAvailable} available`
: `Invite codes: ${invites.available.length} available`
}
accessibilityHint="Opens list of invite codes">
<Text

16
src/view/screens/Settings.tsx
View File

@ -60,6 +60,7 @@ import {
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
import {useClearPreferencesMutation} from '#/state/queries/preferences'
import {useInviteCodesQuery} from '#/state/queries/invites'
// TEMPORARY (APP-700)
// remove after backend testing finishes
@ -155,6 +156,8 @@ export const SettingsScreen = withAuthRequired(
const {isSwitchingAccounts, accounts, currentAccount} = useSession()
const {clearCurrentAccount} = useSessionApi()
const {mutate: clearPreferences} = useClearPreferencesMutation()
const {data: invites} = useInviteCodesQuery()
const invitesAvailable = invites?.available?.length ?? 0
const primaryBg = useCustomPalette<ViewStyle>({
light: {backgroundColor: colors.blue0},
@ -362,6 +365,7 @@ export const SettingsScreen = withAuthRequired(
<Text type="xl-bold" style={[pal.text, styles.heading]}>
<Trans>Invite a Friend</Trans>
</Text>
<TouchableOpacity
testID="inviteFriendBtn"
style={[
@ -376,22 +380,20 @@ export const SettingsScreen = withAuthRequired(
<View
style={[
styles.iconContainer,
store.me.invitesAvailable > 0 ? primaryBg : pal.btn,
invitesAvailable > 0 ? primaryBg : pal.btn,
]}>
<FontAwesomeIcon
icon="ticket"
style={
(store.me.invitesAvailable > 0
(invitesAvailable > 0
? primaryText
: pal.text) as FontAwesomeIconStyle
}
/>
</View>
<Text
type="lg"
style={store.me.invitesAvailable > 0 ? pal.link : pal.text}>
{formatCount(store.me.invitesAvailable)} invite{' '}
{pluralize(store.me.invitesAvailable, 'code')} available
<Text type="lg" style={invitesAvailable > 0 ? pal.link : pal.text}>
{formatCount(invitesAvailable)} invite{' '}
{pluralize(invitesAvailable, 'code')} available
</Text>
</TouchableOpacity>

14
src/view/shell/Drawer.tsx
View File

@ -17,7 +17,6 @@ import {
} from '@fortawesome/react-native-fontawesome'
import {s, colors} from 'lib/styles'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
import {useStores} from 'state/index'
import {
HomeIcon,
HomeIconSolid,
@ -51,6 +50,7 @@ import {useSession, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {emitSoftReset} from '#/state/events'
import {useInviteCodesQuery} from '#/state/queries/invites'
export function DrawerProfileCard({
account,
@ -464,10 +464,10 @@ const InviteCodes = observer(function InviteCodesImpl({
style?: StyleProp<ViewStyle>
}) {
const {track} = useAnalytics()
const store = useStores()
const setDrawerOpen = useSetDrawerOpen()
const pal = usePalette('default')
const {invitesAvailable} = store.me
const {data: invites} = useInviteCodesQuery()
const invitesAvailable = invites?.available?.length ?? 0
const {openModal} = useModalControls()
const onPress = React.useCallback(() => {
track('Menu:ItemClicked', {url: '#invite-codes'})
@ -490,15 +490,15 @@ const InviteCodes = observer(function InviteCodesImpl({
icon="ticket"
style={[
styles.inviteCodesIcon,
store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
invitesAvailable > 0 ? pal.link : pal.textLight,
]}
size={18}
/>
<Text
type="lg-medium"
style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
{formatCount(store.me.invitesAvailable)} invite{' '}
{pluralize(store.me.invitesAvailable, 'code')}
style={invitesAvailable > 0 ? pal.link : pal.textLight}>
{formatCount(invitesAvailable)} invite{' '}
{pluralize(invitesAvailable, 'code')}
</Text>
</TouchableOpacity>
)

15
src/view/shell/desktop/RightNav.tsx
View File

@ -9,12 +9,12 @@ import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
import {s} from 'lib/styles'
import {useStores} from 'state/index'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {pluralize} from 'lib/strings/helpers'
import {formatCount} from 'view/com/util/numeric/format'
import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
import {useInviteCodesQuery} from '#/state/queries/invites'
export const DesktopRightNav = observer(function DesktopRightNavImpl() {
const pal = usePalette('default')
@ -83,11 +83,10 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
})
const InviteCodes = observer(function InviteCodesImpl() {
const store = useStores()
const pal = usePalette('default')
const {openModal} = useModalControls()
const {invitesAvailable} = store.me
const {data: invites} = useInviteCodesQuery()
const invitesAvailable = invites?.available?.length ?? 0
const onPress = React.useCallback(() => {
openModal({name: 'invite-codes'})
@ -107,15 +106,15 @@ const InviteCodes = observer(function InviteCodesImpl() {
icon="ticket"
style={[
styles.inviteCodesIcon,
store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
invitesAvailable > 0 ? pal.link : pal.textLight,
]}
size={16}
/>
<Text
type="md-medium"
style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
{formatCount(store.me.invitesAvailable)} invite{' '}
{pluralize(store.me.invitesAvailable, 'code')} available
style={invitesAvailable > 0 ? pal.link : pal.textLight}>
{formatCount(invitesAvailable)} invite{' '}
{pluralize(invitesAvailable, 'code')} available
</Text>
</TouchableOpacity>
)