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

Changeset View

Standalone View

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

// @flow		// @flow

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

import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';		import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';		import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';

import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';		import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
import css from './community-drawer-item.css';		import css from './community-drawer-item.css';
import { ExpandButton } from './expand-buttons.react.js';		import { ExpandButton } from './expand-buttons.react.js';
import SubchannelsButton from './subchannels-button.react.js';		import SubchannelsButton from './subchannels-button.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';

export type DrawerItemProps = {		export type DrawerItemProps = {
+itemData: CommunityDrawerItemData<string>,		+itemData: CommunityDrawerItemData<string>,
+toggleExpanded: (threadID: string) => void,		+toggleExpanded?: (threadID: string) => void,
+expanded: boolean,		+expanded: boolean,
+paddingLeft: number,		+paddingLeft: number,
		+expandable?: boolean,
};		};

const indentation = 14;		const indentation = 14;
const subchannelsButtonIndentation = 24;		const subchannelsButtonIndentation = 24;

function CommunityDrawerItem(props: DrawerItemProps): React.Node {		function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {		const {
itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },		itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
expanded,		expanded,
toggleExpanded,		toggleExpanded,
paddingLeft,		paddingLeft,
		expandable = true,
} = props;		} = props;

const children = React.useMemo(() => {		const children = React.useMemo(() => {
if (!expanded) {		if (!expanded) {
return null;		return null;
}		}
if (hasSubchannelsButton) {		if (hasSubchannelsButton) {
const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;		const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
Show All 9 Lines	const children = React.useMemo(() => {
if (!itemChildren) {		if (!itemChildren) {
return null;		return null;
}		}
return itemChildren.map(item => (		return itemChildren.map(item => (
<MemoizedCommunityDrawerItemChat		<MemoizedCommunityDrawerItemChat
itemData={item}		itemData={item}
key={item.threadInfo.id}		key={item.threadInfo.id}
paddingLeft={paddingLeft + indentation}		paddingLeft={paddingLeft + indentation}
		expandable={expandable}
/>		/>
));		));
}, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);		}, [
		expanded,
		hasSubchannelsButton,
		itemChildren,
		paddingLeft,
		expandable,
		threadInfo,
		]);

const onExpandToggled = React.useCallback(		const onExpandToggled = React.useCallback(
() => toggleExpanded(threadInfo.id),		() => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
[toggleExpanded, threadInfo.id],		[toggleExpanded, threadInfo.id],
);		);

const itemExpandButton = React.useMemo(() => {		const itemExpandButton = React.useMemo(() => {
		if (!expandable) {
		return null;
		}
if (itemChildren?.length === 0 && !hasSubchannelsButton) {		if (itemChildren?.length === 0 && !hasSubchannelsButton) {
return (		return (
<div className={css.buttonContainer}>		<div className={css.buttonContainer}>
<ExpandButton disabled={true} />		<ExpandButton disabled={true} />
</div>		</div>
);		);
}		}
return (		return (
<div className={css.buttonContainer}>		<div className={css.buttonContainer}>
<ExpandButton onClick={onExpandToggled} expanded={expanded} />		<ExpandButton onClick={onExpandToggled} expanded={expanded} />
</div>		</div>
);		);
}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);		}, [
		expandable,
		itemChildren?.length,
		hasSubchannelsButton,
		onExpandToggled,
		expanded,
		]);

const Handler = useSelector(state =>		const Handler = useSelector(state =>
getCommunityDrawerItemHandler(state.navInfo.tab),		getCommunityDrawerItemHandler(state.navInfo.tab),
);		);

const [handler, setHandler] = React.useState({		const [handler, setHandler] = React.useState({
// eslint-disable-next-line no-unused-vars		// eslint-disable-next-line no-unused-vars
onClick: event => {},		onClick: event => {},
Show All 16 Lines	<>
<div className={css.threadListContainer}>{children}</div>		<div className={css.threadListContainer}>{children}</div>
</>		</>
);		);
}		}

export type CommunityDrawerItemChatProps = {		export type CommunityDrawerItemChatProps = {
+itemData: CommunityDrawerItemData<string>,		+itemData: CommunityDrawerItemData<string>,
+paddingLeft: number,		+paddingLeft: number,
		+expandable?: boolean,
};		};

function CommunityDrawerItemChat(		function CommunityDrawerItemChat(
props: CommunityDrawerItemChatProps,		props: CommunityDrawerItemChatProps,
): React.Node {		): React.Node {
const [expanded, setExpanded] = React.useState(false);		const [expanded, setExpanded] = React.useState(false);

const toggleExpanded = React.useCallback(() => {		const toggleExpanded = React.useCallback(() => {
Show All 21 Lines