diff --git a/web/sidebar/community-drawer-item-handlers.react.js b/web/sidebar/community-drawer-item-handlers.react.js --- a/web/sidebar/community-drawer-item-handlers.react.js +++ b/web/sidebar/community-drawer-item-handlers.react.js @@ -14,7 +14,7 @@ } from '../selectors/thread-selectors.js'; import type { NavigationTab } from '../types/nav-types.js'; -type HandlerProps = { +export type HandlerProps = { +setHandler: (handler: CommunityDrawerItemHandler) => void, +threadInfo: ThreadInfo, }; diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js --- a/web/sidebar/community-drawer-item.react.js +++ b/web/sidebar/community-drawer-item.react.js @@ -6,11 +6,10 @@ import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; -import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js'; +import type { HandlerProps } from './community-drawer-item-handlers.react.js'; import css from './community-drawer-item.css'; import { ExpandButton } from './expand-buttons.react.js'; import SubchannelsButton from './subchannels-button.react.js'; -import { useSelector } from '../redux/redux-utils.js'; export type DrawerItemProps = { +itemData: CommunityDrawerItemData, @@ -18,6 +17,7 @@ +expanded: boolean, +paddingLeft: number, +expandable?: boolean, + +handler: React.ComponentType, }; const indentation = 14; @@ -30,6 +30,7 @@ toggleExpanded, paddingLeft, expandable = true, + handler: Handler, } = props; const children = React.useMemo(() => { @@ -56,6 +57,7 @@ key={item.threadInfo.id} paddingLeft={paddingLeft + indentation} expandable={expandable} + handler={Handler} /> )); }, [ @@ -63,8 +65,9 @@ hasSubchannelsButton, itemChildren, paddingLeft, - expandable, threadInfo, + expandable, + Handler, ]); const onExpandToggled = React.useCallback( @@ -96,10 +99,6 @@ expanded, ]); - const Handler = useSelector(state => - getCommunityDrawerItemHandler(state.navInfo.tab), - ); - const [handler, setHandler] = React.useState({ // eslint-disable-next-line no-unused-vars onClick: event => {}, @@ -132,6 +131,7 @@ +itemData: CommunityDrawerItemData, +paddingLeft: number, +expandable?: boolean, + +handler: React.ComponentType, }; function CommunityDrawerItemChat( diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js --- a/web/sidebar/community-drawer.react.js +++ b/web/sidebar/community-drawer.react.js @@ -13,6 +13,7 @@ import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.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 { ThreadListProvider } from '../chat/thread-list-provider.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -20,6 +21,9 @@ const maxDepth = 2; const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; +const HandlerChat = getCommunityDrawerItemHandler('chat'); +const HandlerCal = getCommunityDrawerItemHandler('calendar'); + function CommunityDrawer(): React.Node { const tab = useSelector(state => state.navInfo.tab); const childThreadInfosMap = useSelector(childThreadInfos); @@ -55,6 +59,7 @@ expanded={item.threadInfo.id === openCommunity} paddingLeft={10} expandable={true} + handler={HandlerChat} /> )), [drawerItemsData, openCommunity, setOpenCommunityOrClose], @@ -69,6 +74,7 @@ expanded={false} paddingLeft={10} expandable={false} + handler={HandlerCal} /> )), [drawerItemsData],