Differential D6976 Diff 24791 web/sidebar/community-drawer.react.js

Changeset View

Standalone View

web/sidebar/community-drawer.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	import {			import {
	childThreadInfos,			childThreadInfos,
	communityThreadSelector,			communityThreadSelector,
	} from 'lib/selectors/thread-selectors.js';			} from 'lib/selectors/thread-selectors.js';
	import {			import {
	createRecursiveDrawerItemsData,			createRecursiveDrawerItemsData,
	appendSuffix,			appendSuffix,
	} from 'lib/utils/drawer-utils.react.js';			} from 'lib/utils/drawer-utils.react.js';
	import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';			import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';

	import CommunityDrawerItemCommunity from './community-drawer-item-community.react.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 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 = ['title'];			const labelStyles = ['title'];

	const HandlerChat = getCommunityDrawerItemHandler('chat');
	const HandlerCal = getCommunityDrawerItemHandler('calendar');

	function CommunityDrawer(): React.Node {			function CommunityDrawer(): React.Node {
	const tab = useSelector(state => state.navInfo.tab);			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(
	communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
	);

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

	const communitiesComponentsDefault = React.useMemo(			const communitiesComponentsDefault = React.useMemo(
	() =>			() =>
	drawerItemsData.map(item => (			drawerItemsData.map(item => (
	<CommunityDrawerItemCommunity			<CommunityDrawerItemCommunity
	itemData={item}			itemData={item}
	key={`${item.threadInfo.id}_chat`}			key={`${item.threadInfo.id}_chat`}
	toggleExpanded={setOpenCommunityOrClose}
	expanded={item.threadInfo.id === openCommunity}
	paddingLeft={10}			paddingLeft={10}
	expandable={true}			expandable={true}
	handler={HandlerChat}			handlerType="chat"
	/>			/>
	)),			)),
	[drawerItemsData, openCommunity, setOpenCommunityOrClose],			[drawerItemsData],
	);			);

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

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

	Show All 11 Lines