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

Changeset View

Standalone View

web/sidebar/community-drawer-content.react.js

	Show All 9 Lines
	import {			import {
	createRecursiveDrawerItemsData,			createRecursiveDrawerItemsData,
	appendSuffix,			appendSuffix,
	} from 'lib/utils/drawer-utils.react';			} from 'lib/utils/drawer-utils.react';

	import css from './community-drawer-content.css';			import css from './community-drawer-content.css';
	import CommunityDrawerItemCommunity from './community-drawer-item-community.react';			import CommunityDrawerItemCommunity from './community-drawer-item-community.react';

	const maxDepth = 2;
	const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];			const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];

				const maxDepth = 2;

	function CommunityDrawerContent(): React.Node {			function CommunityDrawerContent(): 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 communitiesSuffixed = React.useMemo(() => appendSuffix(communities), [			const communitiesSuffixed = React.useMemo(() => appendSuffix(communities), [
	communities,			communities,
	]);			]);

	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((index: string) => {			const setOpenCommunityOrClose = React.useCallback((index: string) => {
	setOpenCommunity(open => (open === index ? null : index));			setOpenCommunity(open => (open === index ? null : index));
	}, []);			}, []);

	const communitiesComponents = drawerItemsData.map(item => (			const communitiesComponentsDefault = React.useMemo(
				() =>
				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],
				);

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

	return <div className={css.container}>{communitiesComponents}</div>;			const defaultStyle = React.useMemo(
				() => (tab === 'calendar' ? { display: 'none' } : null),
				[tab],
				);
				const calStyle = React.useMemo(
				() => (tab !== 'calendar' ? { display: 'none' } : null),
				[tab],
				);

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

	export default CommunityDrawerContent;			export default CommunityDrawerContent;