Changeset View
Changeset View
Standalone View
Standalone View
web/sidebar/community-drawer.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | import { | ||||
childThreadInfos, | childThreadInfos, | ||||
communityThreadSelector, | communityThreadSelector, | ||||
} from 'lib/selectors/thread-selectors.js'; | } from 'lib/selectors/thread-selectors.js'; | ||||
import { | import { | ||||
createRecursiveDrawerItemsData, | createRecursiveDrawerItemsData, | ||||
appendSuffix, | appendSuffix, | ||||
} from 'lib/utils/drawer-utils.react.js'; | } from 'lib/utils/drawer-utils.react.js'; | ||||
import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js'; | import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js'; | ||||
import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js'; | import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js'; | ||||
import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js'; | |||||
import css from './community-drawer.css'; | import css from './community-drawer.css'; | ||||
import { ThreadListProvider } from '../chat/thread-list-provider.js'; | import { ThreadListProvider } from '../chat/thread-list-provider.js'; | ||||
import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
const maxDepth = 2; | const maxDepth = 2; | ||||
const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; | const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; | ||||
const HandlerChat = getCommunityDrawerItemHandler('chat'); | |||||
const HandlerCal = getCommunityDrawerItemHandler('calendar'); | |||||
function CommunityDrawer(): React.Node { | function CommunityDrawer(): React.Node { | ||||
const tab = useSelector(state => state.navInfo.tab); | const tab = useSelector(state => state.navInfo.tab); | ||||
const childThreadInfosMap = useSelector(childThreadInfos); | const childThreadInfosMap = useSelector(childThreadInfos); | ||||
const communities = useSelector(communityThreadSelector); | const communities = useSelector(communityThreadSelector); | ||||
const resolvedCommunities = useResolvedThreadInfos(communities); | const resolvedCommunities = useResolvedThreadInfos(communities); | ||||
const communitiesSuffixed = React.useMemo( | const communitiesSuffixed = React.useMemo( | ||||
() => appendSuffix(resolvedCommunities), | () => appendSuffix(resolvedCommunities), | ||||
[resolvedCommunities], | [resolvedCommunities], | ||||
Show All 19 Lines | () => | ||||
drawerItemsData.map(item => ( | drawerItemsData.map(item => ( | ||||
<CommunityDrawerItemCommunity | <CommunityDrawerItemCommunity | ||||
itemData={item} | itemData={item} | ||||
key={`${item.threadInfo.id}_chat`} | key={`${item.threadInfo.id}_chat`} | ||||
toggleExpanded={setOpenCommunityOrClose} | toggleExpanded={setOpenCommunityOrClose} | ||||
expanded={item.threadInfo.id === openCommunity} | expanded={item.threadInfo.id === openCommunity} | ||||
paddingLeft={10} | paddingLeft={10} | ||||
expandable={true} | expandable={true} | ||||
handler={HandlerChat} | |||||
/> | /> | ||||
)), | )), | ||||
[drawerItemsData, openCommunity, setOpenCommunityOrClose], | [drawerItemsData, openCommunity, setOpenCommunityOrClose], | ||||
); | ); | ||||
const communitiesComponentsCal = React.useMemo( | const communitiesComponentsCal = React.useMemo( | ||||
() => | () => | ||||
drawerItemsData.map(item => ( | drawerItemsData.map(item => ( | ||||
<CommunityDrawerItemCommunity | <CommunityDrawerItemCommunity | ||||
itemData={item} | itemData={item} | ||||
key={`${item.threadInfo.id}_cal`} | key={`${item.threadInfo.id}_cal`} | ||||
expanded={false} | expanded={false} | ||||
paddingLeft={10} | paddingLeft={10} | ||||
expandable={false} | expandable={false} | ||||
handler={HandlerCal} | |||||
/> | /> | ||||
)), | )), | ||||
[drawerItemsData], | [drawerItemsData], | ||||
); | ); | ||||
const defaultStyle = tab === 'calendar' ? css.hidden : null; | const defaultStyle = tab === 'calendar' ? css.hidden : null; | ||||
const calStyle = tab !== 'calendar' ? css.hidden : null; | const calStyle = tab !== 'calendar' ? css.hidden : null; | ||||
Show All 11 Lines |