add notification count badge mobile web (#4375)
* add notification count badge mobile web * rename var * add gate to types * implement gate * nit * Fix condition order, narrow types --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>zio/stable
parent
aefbab3850
commit
42477d8bbb
|
@ -3,3 +3,4 @@ export type Gate =
|
||||||
| 'request_notifications_permission_after_onboarding_v2'
|
| 'request_notifications_permission_after_onboarding_v2'
|
||||||
| 'show_avi_follow_button'
|
| 'show_avi_follow_button'
|
||||||
| 'show_follow_back_label_v2'
|
| 'show_follow_back_label_v2'
|
||||||
|
| 'show_notification_badge_mobile_web'
|
||||||
|
|
|
@ -16,6 +16,9 @@ import {s} from '#/lib/styles'
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||||
import {useCloseAllActiveElements} from '#/state/util'
|
import {useCloseAllActiveElements} from '#/state/util'
|
||||||
|
import {useGate} from 'lib/statsig/statsig'
|
||||||
|
import {useUnreadMessageCount} from 'state/queries/messages/list-converations'
|
||||||
|
import {useUnreadNotifications} from 'state/queries/notifications/unread'
|
||||||
import {Button} from '#/view/com/util/forms/Button'
|
import {Button} from '#/view/com/util/forms/Button'
|
||||||
import {Text} from '#/view/com/util/text/Text'
|
import {Text} from '#/view/com/util/text/Text'
|
||||||
import {Logo} from '#/view/icons/Logo'
|
import {Logo} from '#/view/icons/Logo'
|
||||||
|
@ -46,11 +49,15 @@ export function BottomBarWeb() {
|
||||||
const {hasSession, currentAccount} = useSession()
|
const {hasSession, currentAccount} = useSession()
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const safeAreaInsets = useSafeAreaInsets()
|
const safeAreaInsets = useSafeAreaInsets()
|
||||||
|
const gate = useGate()
|
||||||
const {footerMinimalShellTransform} = useMinimalShellMode()
|
const {footerMinimalShellTransform} = useMinimalShellMode()
|
||||||
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
||||||
const closeAllActiveElements = useCloseAllActiveElements()
|
const closeAllActiveElements = useCloseAllActiveElements()
|
||||||
const iconWidth = 26
|
const iconWidth = 26
|
||||||
|
|
||||||
|
const unreadMessageCount = useUnreadMessageCount()
|
||||||
|
const notificationCountStr = useUnreadNotifications()
|
||||||
|
|
||||||
const showSignIn = React.useCallback(() => {
|
const showSignIn = React.useCallback(() => {
|
||||||
closeAllActiveElements()
|
closeAllActiveElements()
|
||||||
requestSwitchToAccount({requestedAccount: 'none'})
|
requestSwitchToAccount({requestedAccount: 'none'})
|
||||||
|
@ -103,10 +110,20 @@ export function BottomBarWeb() {
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? MessageFilled : Message
|
const Icon = isActive ? MessageFilled : Message
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Icon
|
<Icon
|
||||||
width={iconWidth - 1}
|
width={iconWidth - 1}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
|
||||||
/>
|
/>
|
||||||
|
{unreadMessageCount.count > 0 &&
|
||||||
|
gate('show_notification_badge_mobile_web') && (
|
||||||
|
<View style={styles.notificationCount}>
|
||||||
|
<Text style={styles.notificationCountLabel}>
|
||||||
|
{unreadMessageCount.numUnread}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</NavItem>
|
</NavItem>
|
||||||
|
@ -114,10 +131,20 @@ export function BottomBarWeb() {
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? BellFilled : Bell
|
const Icon = isActive ? BellFilled : Bell
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Icon
|
<Icon
|
||||||
width={iconWidth}
|
width={iconWidth}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||||
/>
|
/>
|
||||||
|
{notificationCountStr !== '' &&
|
||||||
|
gate('show_notification_badge_mobile_web') && (
|
||||||
|
<View style={styles.notificationCount}>
|
||||||
|
<Text style={styles.notificationCountLabel}>
|
||||||
|
{notificationCountStr}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</NavItem>
|
</NavItem>
|
||||||
|
|
Loading…
Reference in New Issue