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

Revert "Fix invite codes flash on desktop, use loading placeholder (#1591)" (#1656) 

This reverts commit 9278822088.
zio/stable
Paul Frazee 2023-10-10 10:08:04 -07:00 committed by GitHub
parent f452ce74f4
commit 098f4b526e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 89 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,13 +25,13 @@ export class MeModel {
savedFeeds: SavedFeedsModel savedFeeds: SavedFeedsModel
notifications: NotificationsFeedModel notifications: NotificationsFeedModel
follows: MyFollowsCache follows: MyFollowsCache
invites: ComAtprotoServerDefs.InviteCode[] | null = [] invites: ComAtprotoServerDefs.InviteCode[] = []
appPasswords: ComAtprotoServerListAppPasswords.AppPassword[] = [] appPasswords: ComAtprotoServerListAppPasswords.AppPassword[] = []
lastProfileStateUpdate = Date.now() lastProfileStateUpdate = Date.now()
lastNotifsUpdate = Date.now() lastNotifsUpdate = Date.now()
get invitesAvailable() { get invitesAvailable() {
return this.invites?.filter(isInviteAvailable).length || null return this.invites.filter(isInviteAvailable).length
} }
constructor(public rootStore: RootStoreModel) { constructor(public rootStore: RootStoreModel) {
@ -180,9 +180,7 @@ export class MeModel {
} catch (e) { } catch (e) {
this.rootStore.log.error('Failed to fetch user invite codes', e) this.rootStore.log.error('Failed to fetch user invite codes', e)
} }
if (this.invites) { await this.rootStore.invitedUsers.fetch(this.invites)
await this.rootStore.invitedUsers.fetch(this.invites)
}
} }
} }

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

@ -26,33 +26,6 @@ export function Component({}: {}) {
store.shell.closeModal() store.shell.closeModal()
}, [store]) }, [store])
if (store.me.invites === null) {
return (
<View style={[styles.container, pal.view]} testID="inviteCodesModal">
<Text type="title-xl" style={[styles.title, pal.text]}>
Error
</Text>
<Text type="lg" style={[styles.description, pal.text]}>
An error occurred while loading invite codes.
</Text>
<View style={styles.flex1} />
<View
style={[
styles.btnContainer,
isTabletOrDesktop && styles.btnContainerDesktop,
]}>
<Button
type="primary"
label="Done"
style={styles.btn}
labelStyle={styles.btnLabel}
onPress={onClose}
/>
</View>
</View>
)
}
if (store.me.invites.length === 0) { if (store.me.invites.length === 0) {
return ( return (
<View style={[styles.container, pal.view]} testID="inviteCodesModal"> <View style={[styles.container, pal.view]} testID="inviteCodesModal">

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

@ -322,45 +322,37 @@ export const SettingsScreen = withAuthRequired(
<View style={styles.spacer20} /> <View style={styles.spacer20} />
{store.me.invitesAvailable !== null && ( <Text type="xl-bold" style={[pal.text, styles.heading]}>
<> Invite a Friend
<Text type="xl-bold" style={[pal.text, styles.heading]}> </Text>
Invite a Friend <TouchableOpacity
</Text> testID="inviteFriendBtn"
<TouchableOpacity style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
testID="inviteFriendBtn" onPress={isSwitching ? undefined : onPressInviteCodes}
style={[ accessibilityRole="button"
styles.linkCard, accessibilityLabel="Invite"
pal.view, accessibilityHint="Opens invite code list">
isSwitching && styles.dimmed, <View
]} style={[
onPress={isSwitching ? undefined : onPressInviteCodes} styles.iconContainer,
accessibilityRole="button" store.me.invitesAvailable > 0 ? primaryBg : pal.btn,
accessibilityLabel="Invite" ]}>
accessibilityHint="Opens invite code list"> <FontAwesomeIcon
<View icon="ticket"
style={[ style={
styles.iconContainer, (store.me.invitesAvailable > 0
store.me.invitesAvailable > 0 ? primaryBg : pal.btn, ? primaryText
]}> : pal.text) as FontAwesomeIconStyle
<FontAwesomeIcon }
icon="ticket" />
style={ </View>
(store.me.invitesAvailable > 0 <Text
? primaryText type="lg"
: pal.text) as FontAwesomeIconStyle style={store.me.invitesAvailable > 0 ? pal.link : pal.text}>
} {formatCount(store.me.invitesAvailable)} invite{' '}
/> {pluralize(store.me.invitesAvailable, 'code')} available
</View> </Text>
<Text </TouchableOpacity>
type="lg"
style={store.me.invitesAvailable > 0 ? pal.link : pal.text}>
{formatCount(store.me.invitesAvailable)} invite{' '}
{pluralize(store.me.invitesAvailable, 'code')} available
</Text>
</TouchableOpacity>
</>
)}
<View style={styles.spacer20} /> <View style={styles.spacer20} />

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

@ -426,34 +426,32 @@ const InviteCodes = observer(function InviteCodesImpl({
store.shell.openModal({name: 'invite-codes'}) store.shell.openModal({name: 'invite-codes'})
}, [store, track]) }, [store, track])
return ( return (
store.me.invitesAvailable !== null && ( <TouchableOpacity
<TouchableOpacity testID="menuItemInviteCodes"
testID="menuItemInviteCodes" style={[styles.inviteCodes, style]}
style={[styles.inviteCodes, style]} onPress={onPress}
onPress={onPress} accessibilityRole="button"
accessibilityRole="button" accessibilityLabel={
accessibilityLabel={ invitesAvailable === 1
invitesAvailable === 1 ? 'Invite codes: 1 available'
? 'Invite codes: 1 available' : `Invite codes: ${invitesAvailable} available`
: `Invite codes: ${invitesAvailable} available` }
} accessibilityHint="Opens list of invite codes">
accessibilityHint="Opens list of invite codes"> <FontAwesomeIcon
<FontAwesomeIcon icon="ticket"
icon="ticket" style={[
style={[ styles.inviteCodesIcon,
styles.inviteCodesIcon, store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
store.me.invitesAvailable > 0 ? pal.link : pal.textLight, ]}
]} size={18}
size={18} />
/> <Text
<Text type="lg-medium"
type="lg-medium" style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}> {formatCount(store.me.invitesAvailable)} invite{' '}
{formatCount(store.me.invitesAvailable)} invite{' '} {pluralize(store.me.invitesAvailable, 'code')}
{pluralize(store.me.invitesAvailable, 'code')} </Text>
</Text> </TouchableOpacity>
</TouchableOpacity>
)
) )
}) })

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

@ -7,7 +7,6 @@ import {DesktopSearch} from './Search'
import {DesktopFeeds} from './Feeds' import {DesktopFeeds} from './Feeds'
import {Text} from 'view/com/util/text/Text' import {Text} from 'view/com/util/text/Text'
import {TextLink} from 'view/com/util/Link' import {TextLink} from 'view/com/util/Link'
import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useStores} from 'state/index' import {useStores} from 'state/index'
@ -90,41 +89,32 @@ const InviteCodes = observer(function InviteCodesImpl() {
const onPress = React.useCallback(() => { const onPress = React.useCallback(() => {
store.shell.openModal({name: 'invite-codes'}) store.shell.openModal({name: 'invite-codes'})
}, [store]) }, [store])
return ( return (
<View style={[styles.separator, pal.border]}> <TouchableOpacity
{store.me.invitesAvailable === null ? ( style={[styles.inviteCodes, pal.border]}
<View style={[s.p10]}> onPress={onPress}
<LoadingPlaceholder width={186} height={32} style={[styles.br40]} /> accessibilityRole="button"
</View> accessibilityLabel={
) : ( invitesAvailable === 1
<TouchableOpacity ? 'Invite codes: 1 available'
style={[styles.inviteCodes]} : `Invite codes: ${invitesAvailable} available`
onPress={onPress} }
accessibilityRole="button" accessibilityHint="Opens list of invite codes">
accessibilityLabel={ <FontAwesomeIcon
invitesAvailable === 1 icon="ticket"
? 'Invite codes: 1 available' style={[
: `Invite codes: ${invitesAvailable} available` styles.inviteCodesIcon,
} store.me.invitesAvailable > 0 ? pal.link : pal.textLight,
accessibilityHint="Opens list of invite codes"> ]}
<FontAwesomeIcon size={16}
icon="ticket" />
style={[ <Text
styles.inviteCodesIcon, type="md-medium"
store.me.invitesAvailable > 0 ? pal.link : pal.textLight, style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
]} {formatCount(store.me.invitesAvailable)} invite{' '}
size={16} {pluralize(store.me.invitesAvailable, 'code')} available
/> </Text>
<Text </TouchableOpacity>
type="md-medium"
style={store.me.invitesAvailable > 0 ? pal.link : pal.textLight}>
{formatCount(store.me.invitesAvailable)} invite{' '}
{pluralize(store.me.invitesAvailable, 'code')} available
</Text>
</TouchableOpacity>
)}
</View>
) )
}) })
@ -141,20 +131,16 @@ const styles = StyleSheet.create({
message: { message: {
paddingVertical: 18, paddingVertical: 18,
paddingHorizontal: 12, paddingHorizontal: 10,
}, },
messageLine: { messageLine: {
marginBottom: 10, marginBottom: 10,
}, },
separator: {
borderTopWidth: 1,
},
br40: {borderRadius: 40},
inviteCodes: { inviteCodes: {
paddingHorizontal: 12, borderTopWidth: 1,
paddingVertical: 16, paddingHorizontal: 16,
paddingVertical: 12,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}, },