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

Refactor invites modal (#1930)

Browse source 
* Refactor invites modal

* Replace in drawer

* Delete stuff from me model
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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