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

Changeset View

Standalone View

web/sidebar/community-drawer.react.js

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

import { ThreadListProvider } from '../chat/thread-list-provider';		import { ThreadListProvider } from '../chat/thread-list-provider';
import CommunityDrawerItemCommunity from './community-drawer-item-community.react';		import CommunityDrawerItemCommunity from './community-drawer-item-community.react';
import css from './community-drawer.css';		import css from './community-drawer.css';

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

function CommunityDrawer(): React.Node {		const maxDepth = 2;

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

		const defaultStyle = React.useMemo(
		() => (tab === 'calendar' ? { display: 'none' } : null),
		[tab],
		);
		const calStyle = React.useMemo(
		() => (tab !== 'calendar' ? { display: 'none' } : null),
		[tab],
		);

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

export default CommunityDrawer;		export default CommunityDrawerContent;