diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js --- a/web/sidebar/community-drawer-item-community.react.js +++ b/web/sidebar/community-drawer-item-community.react.js @@ -5,6 +5,7 @@ import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; +import { getCommunityDrawerItemCommunityHandler } from './community-drawer-item-community-handlers.react.js'; import css from './community-drawer-item.css'; import type { DrawerItemProps } from './community-drawer-item.react.js'; import { @@ -15,32 +16,40 @@ function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node { const { itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle }, - expanded, - toggleExpanded, paddingLeft, expandable = true, - handler: Handler, + handlerType, } = props; + const Handler = getCommunityDrawerItemCommunityHandler(handlerType); + + const [handler, setHandler] = React.useState({ + // eslint-disable-next-line no-unused-vars + onClick: event => {}, + isActive: false, + expanded: false, + toggleExpanded: () => {}, + }); + const children = React.useMemo( () => getChildren({ - expanded, + expanded: handler.expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo, expandable, - handler: Handler, + handlerType, }), [ - expanded, + handler.expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo, expandable, - Handler, + handlerType, ], ); @@ -50,28 +59,15 @@ expandable, childrenLength: itemChildren?.length, hasSubchannelsButton, - expanded, + onExpandToggled: null, + expanded: handler.expanded, }), - [expandable, itemChildren?.length, hasSubchannelsButton, expanded], - ); - - const [handler, setHandler] = React.useState({ - // eslint-disable-next-line no-unused-vars - onClick: event => {}, - isActive: false, - }); - - const onClick = React.useCallback( - (event: SyntheticEvent) => { - toggleExpanded?.(threadInfo.id); - handler.onClick(event); - }, - [threadInfo.id, toggleExpanded, handler], + [expandable, itemChildren?.length, hasSubchannelsButton, handler.expanded], ); const classes = classnames({ [css.communityBase]: true, - [css.communityExpanded]: props.expanded, + [css.communityExpanded]: handler.expanded, }); const { uiName } = useResolvedThreadInfo(threadInfo); @@ -85,7 +81,7 @@ return (
- + {itemExpandButton}
{uiName}
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 @@ -7,83 +7,80 @@ import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import type { HandlerProps } from './community-drawer-item-handlers.react.js'; +import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js'; import css from './community-drawer-item.css'; import { getChildren, getExpandButton, } from './community-drawer-utils.react.js'; import ThreadAvatar from '../components/thread-avatar.react.js'; +import type { NavigationTab } from '../types/nav-types.js'; import { shouldRenderAvatars } from '../utils/avatar-utils.js'; export type DrawerItemProps = { +itemData: CommunityDrawerItemData, - +toggleExpanded?: (threadID: string) => void, - +expanded: boolean, +paddingLeft: number, +expandable?: boolean, - +handler: React.ComponentType, + +handlerType: NavigationTab, }; function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle }, - expanded, - toggleExpanded, paddingLeft, expandable = true, - handler: Handler, + handlerType, } = props; + const [handler, setHandler] = React.useState({ + // eslint-disable-next-line no-unused-vars + onClick: event => {}, + expanded: false, + toggleExpanded: () => {}, + }); + + const Handler = getCommunityDrawerItemHandler(handlerType); + const children = React.useMemo( () => getChildren({ - expanded, + expanded: handler.expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo, expandable, - handler: Handler, + handlerType, }), [ - expanded, + handler.expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo, expandable, - Handler, + handlerType, ], ); - const onExpandToggled = React.useCallback( - () => (toggleExpanded ? toggleExpanded(threadInfo.id) : null), - [toggleExpanded, threadInfo.id], - ); - const itemExpandButton = React.useMemo( () => getExpandButton({ expandable, childrenLength: itemChildren.length, hasSubchannelsButton, - onExpandToggled, - expanded, + onExpandToggled: handler.toggleExpanded, + expanded: handler.expanded, }), [ expandable, itemChildren.length, hasSubchannelsButton, - onExpandToggled, - expanded, + handler.toggleExpanded, + handler.expanded, ], ); - const [handler, setHandler] = React.useState({ - // eslint-disable-next-line no-unused-vars - onClick: event => {}, - }); - const { uiName } = useResolvedThreadInfo(threadInfo); const titleLabel = classnames({ @@ -128,28 +125,7 @@ +handler: React.ComponentType, }; -function CommunityDrawerItemChat( - props: CommunityDrawerItemChatProps, -): React.Node { - const [expanded, setExpanded] = React.useState(false); - - const toggleExpanded = React.useCallback(() => { - setExpanded(isExpanded => !isExpanded); - }, []); - - return ( - - ); -} - -const MemoizedCommunityDrawerItemChat: React.ComponentType = - React.memo(CommunityDrawerItemChat); - const MemoizedCommunityDrawerItem: React.ComponentType = React.memo(CommunityDrawerItem); -export default MemoizedCommunityDrawerItemChat; +export default MemoizedCommunityDrawerItem; diff --git a/web/sidebar/community-drawer-utils.react.js b/web/sidebar/community-drawer-utils.react.js --- a/web/sidebar/community-drawer-utils.react.js +++ b/web/sidebar/community-drawer-utils.react.js @@ -5,11 +5,11 @@ import type { ThreadInfo } from 'lib/types/thread-types'; import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react'; -import type { HandlerProps } from './community-drawer-item-handlers.react'; import css from './community-drawer-item.css'; import CommunityDrawerItemChat from './community-drawer-item.react.js'; import { ExpandButton } from './expand-buttons.react.js'; import SubchannelsButton from './subchannels-button.react.js'; +import type { NavigationTab } from '../types/nav-types.js'; const indentation = 14; const subchannelsButtonIndentation = 24; @@ -21,7 +21,7 @@ paddingLeft, threadInfo, expandable, - handler, + handlerType, }: { expanded: boolean, hasSubchannelsButton: boolean, @@ -29,7 +29,7 @@ paddingLeft: number, threadInfo: ThreadInfo, expandable: boolean, - handler: React.ComponentType, + handlerType: NavigationTab, }): React.Node { if (!expanded) { return null; @@ -51,7 +51,7 @@ key={item.threadInfo.id} paddingLeft={paddingLeft + indentation} expandable={expandable} - handler={handler} + handlerType={handlerType} /> )); } 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,7 +13,6 @@ 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'; @@ -21,9 +20,6 @@ const maxDepth = 2; const labelStyles = ['title']; -const HandlerChat = getCommunityDrawerItemHandler('chat'); -const HandlerCal = getCommunityDrawerItemHandler('calendar'); - function CommunityDrawer(): React.Node { const tab = useSelector(state => state.navInfo.tab); const childThreadInfosMap = useSelector(childThreadInfos); @@ -41,28 +37,18 @@ maxDepth, ); - const [openCommunity, setOpenCommunity] = React.useState( - communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null, - ); - - const setOpenCommunityOrClose = React.useCallback((index: string) => { - setOpenCommunity(open => (open === index ? null : index)); - }, []); - const communitiesComponentsDefault = React.useMemo( () => drawerItemsData.map(item => ( )), - [drawerItemsData, openCommunity, setOpenCommunityOrClose], + [drawerItemsData], ); const communitiesComponentsCal = React.useMemo( @@ -71,10 +57,9 @@ )), [drawerItemsData],