diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js --- a/native/navigation/community-drawer-content.react.js +++ b/native/navigation/community-drawer-content.react.js @@ -9,6 +9,7 @@ childThreadInfos, communityThreadSelector, } from 'lib/selectors/thread-selectors'; +import { threadIsChannel } from 'lib/shared/thread-utils'; import { type ThreadInfo, communitySubthreads } from 'lib/types/thread-types'; import { useNavigateToThread } from '../chat/message-list-types'; @@ -43,6 +44,7 @@ threadInfo: item.threadInfo, itemChildren: item.itemChildren, labelStyle: item.labelStyle, + hasSubchannelsButton: item.subchannelsButton, }; return ( [item, 0]); @@ -108,6 +111,9 @@ threadInfo: childItem, itemChildren: [], labelStyle: labelStyles[Math.min(lvl + 1, labelStyles.length - 1)], + hasSubchannelsButton: + lvl + 1 === maxDepth && + threadHasSubchannels(childItem, childThreadInfosMap), })); queue = queue.concat( item.itemChildren.map(childItem => [childItem, lvl + 1]), @@ -117,6 +123,18 @@ return result; } +function threadHasSubchannels( + threadInfo: ThreadInfo, + childThreadInfosMap: { +[id: string]: $ReadOnlyArray }, +) { + if (!childThreadInfosMap[threadInfo.id]?.length) { + return false; + } + return childThreadInfosMap[threadInfo.id].some(thread => + threadIsChannel(thread), + ); +} + function appendSuffix(chats: $ReadOnlyArray): ThreadInfo[] { const result = []; const names = new Map(); diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js --- a/native/navigation/community-drawer-item.react.js +++ b/native/navigation/community-drawer-item.react.js @@ -10,11 +10,13 @@ import { useStyles } from '../themes/colors'; import type { TextStyle } from '../types/styles'; import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react'; +import SubchannelsButton from './subchannels-button.react'; export type CommunityDrawerItemData = { +threadInfo: ThreadInfo, +itemChildren?: $ReadOnlyArray, +labelStyle: TextStyle, + +hasSubchannelsButton: boolean, }; export type DrawerItemProps = { @@ -26,7 +28,7 @@ function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { - itemData: { threadInfo, itemChildren, labelStyle }, + itemData: { threadInfo, itemChildren, labelStyle, hasSubchannelsButton }, navigateToThread, expanded, toggleExpanded, @@ -49,19 +51,33 @@ if (!expanded) { return null; } + if (hasSubchannelsButton) { + return ( + + + + ); + } return ; - }, [expanded, itemChildren, renderItem]); + }, [ + expanded, + itemChildren, + renderItem, + hasSubchannelsButton, + styles.subchannelsButton, + threadInfo, + ]); const onExpandToggled = React.useCallback(() => { toggleExpanded(threadInfo.id); }, [toggleExpanded, threadInfo.id]); const itemExpandButton = React.useMemo(() => { - if (!itemChildren?.length) { + if (!itemChildren?.length && !hasSubchannelsButton) { return ; } return ; - }, [itemChildren?.length, expanded, onExpandToggled]); + }, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]); const onPress = React.useCallback(() => { navigateToThread({ threadInfo }); @@ -95,6 +111,10 @@ textTouchableWrapper: { flex: 1, }, + subchannelsButton: { + marginLeft: 24, + marginBottom: 6, + }, }; export type CommunityDrawerItemChatProps = {