Differential D6363 Diff 22580 web/sidebar/community-drawer.react.js

Changeset View

Standalone View

web/sidebar/community-drawer.react.js

	Show All 15 Lines
	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'];

	function CommunityDrawer(): React.Node {			function CommunityDrawer(): React.Node {
				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],
	);			);

	const drawerItemsData = createRecursiveDrawerItemsData(			const drawerItemsData = createRecursiveDrawerItemsData(
	childThreadInfosMap,			childThreadInfosMap,
	communitiesSuffixed,			communitiesSuffixed,
	labelStyles,			labelStyles,
	maxDepth,			maxDepth,
	);			);

	const [openCommunity, setOpenCommunity] = React.useState(			const [openCommunity, setOpenCommunity] = React.useState(
	communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,			communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
	);			);

	const setOpenCommunityOrClose = React.useCallback((communityID: string) => {			const setOpenCommunityOrClose = React.useCallback((index: string) => {
	setOpenCommunity(open => (open === communityID ? null : communityID));			setOpenCommunity(open => (open === index ? null : index));
	}, []);			}, []);

	const communitiesComponents = React.useMemo(			const communitiesComponentsDefault = React.useMemo(
	() =>			() =>
	drawerItemsData.map(item => (			drawerItemsData.map(item => (
	<CommunityDrawerItemCommunity			<CommunityDrawerItemCommunity
	itemData={item}			itemData={item}
	key={item.threadInfo.id}			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}
	/>			/>
	)),			)),
	[drawerItemsData, openCommunity, setOpenCommunityOrClose],			[drawerItemsData, openCommunity, setOpenCommunityOrClose],
	);			);

				const communitiesComponentsCal = React.useMemo(
				() =>
				drawerItemsData.map(item => (
				<CommunityDrawerItemCommunity
				itemData={item}
				key={`${item.threadInfo.id}_cal`}
				expanded={false}
				paddingLeft={10}
				expandable={false}
				/>
				)),
				[drawerItemsData],
				);

				const defaultStyle = tab === 'calendar' ? css.hidden : null;
				const calStyle = tab !== 'calendar' ? css.hidden : null;

	return (			return (
	<ThreadListProvider>			<ThreadListProvider>
	<div className={css.container}>{communitiesComponents}</div>			<div className={css.container}>
				<div className={defaultStyle}>{communitiesComponentsDefault}</div>
				<div className={calStyle}>{communitiesComponentsCal}</div>
				</div>
	</ThreadListProvider>			</ThreadListProvider>
	);			);
	}			}

	export default CommunityDrawer;			export default CommunityDrawer;