Refactor invites modal (#1930)

* 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

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

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