diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index 4d10456b..4fbaf697 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/src/views/toolbar/ToolbarView.tsx @@ -2,7 +2,7 @@ import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, Nitro import { FC, useCallback, useState } from 'react'; import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api'; import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events'; -import { AchievementsUIEvent } from '../../events/achievements'; +import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements'; import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent'; import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; @@ -27,9 +27,9 @@ export const ToolbarView: FC = props => const [ isMeExpanded, setMeExpanded ] = useState(false); const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN); const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0); + const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0); const unseenFriendListCount = 0; - const unseenAchievementsCount = 0; const onUserInfoEvent = useCallback((event: UserInfoEvent) => { @@ -64,6 +64,13 @@ export const ToolbarView: FC = props => useUiEvent(UnseenItemTrackerUpdateEvent.UPDATE_COUNT, onUnseenItemTrackerUpdateEvent); + const onAchievementsUIUnseenCountEvent = useCallback((event: AchievementsUIUnseenCountEvent) => + { + setUnseenAchievementCount(event.count); + }, []); + + useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent); + const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) => { const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement); @@ -160,15 +167,15 @@ export const ToolbarView: FC = props => return (
- +
setMeExpanded(!isMeExpanded) }> - { (unseenAchievementsCount > 0) && -
{ unseenAchievementsCount }
} + { (unseenAchievementCount > 0) && +
{ unseenAchievementCount }
}
{ isInRoom && (
diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx index 790168b3..d1128da7 100644 --- a/src/views/toolbar/me/ToolbarMeView.tsx +++ b/src/views/toolbar/me/ToolbarMeView.tsx @@ -4,7 +4,7 @@ import { ToolbarMeViewProps } from './ToolbarMeView.types'; export const ToolbarMeView: FC = props => { - const { handleToolbarItemClick = null } = props; + const { unseenAchievementCount = 0, handleToolbarItemClick = null } = props; return (
@@ -17,6 +17,8 @@ export const ToolbarMeView: FC = props =>
handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }> + { (unseenAchievementCount > 0) && +
{ unseenAchievementCount }
}
handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }> diff --git a/src/views/toolbar/me/ToolbarMeView.types.ts b/src/views/toolbar/me/ToolbarMeView.types.ts index 002c610b..aeb05a5b 100644 --- a/src/views/toolbar/me/ToolbarMeView.types.ts +++ b/src/views/toolbar/me/ToolbarMeView.types.ts @@ -1,5 +1,6 @@ export interface ToolbarMeViewProps { + unseenAchievementCount: number; handleToolbarItemClick: (item: string) => void; }