Page MenuHomePhorge
Files F32768896

app-switcher.react.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

app-switcher.react.js
View Options

// @flow
import * as React from 'react';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import { mostRecentlyReadThreadSelector } from 'lib/selectors/thread-selectors.js';
import { useDispatch } from 'lib/utils/redux-utils.js';
import NavigationPanel from './navigation-panel.react.js';
import css from './topbar.css';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import { navTabSelector } from '../selectors/nav-selectors.js';
import { unreadCountInSelectedCommunity } from '../selectors/thread-selectors.js';
function AppSwitcher(): React.Node {
const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID,
);
const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
const isActiveThreadCurrentlyUnread = useSelector(
state =>
!activeChatThreadID ||
!!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
);
const dispatch = useDispatch();
const onClickChat = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: {
tab: 'chat',
activeChatThreadID: isActiveThreadCurrentlyUnread
? mostRecentlyReadThread
: activeChatThreadID,
},
});
},
[
dispatch,
isActiveThreadCurrentlyUnread,
mostRecentlyReadThread,
activeChatThreadID,
],
);
const boundUnreadCount = useSelector(unreadCountInSelectedCommunity);
let chatBadge = null;
if (boundUnreadCount > 0) {
chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
}
const chatNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="chat">
<a className={css.navigationPanelTab} onClick={onClickChat}>
<span className={css.chatIconWrapper}>
<SWMansionIcon icon="message-square" size={20} />
{chatBadge}
</span>
<p>Chat</p>
</a>
</NavigationPanel.Item>
),
[chatBadge, onClickChat],
);
const onClickCalendar = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: { tab: 'calendar' },
});
},
[dispatch],
);
const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
const calendarNavigationItem = React.useMemo(() => {
if (!isCalendarEnabled) {
return null;
}
return (
<NavigationPanel.Item tab="calendar">
<a className={css.navigationPanelTab} onClick={onClickCalendar}>
<SWMansionIcon icon="calendar" size={20} />
<p>Calendar</p>
</a>
</NavigationPanel.Item>
);
}, [isCalendarEnabled, onClickCalendar]);
return (
<NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
{chatNavigationItem}
{calendarNavigationItem}
</NavigationPanel.Container>
);
}
export default AppSwitcher;

File Metadata

Mime Type
text/x-java
Expires
Fri, Jan 9, 1:26 PM (21 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5884169
Default Alt Text
app-switcher.react.js (3 KB)

Event Timeline