Differential D6668 Diff 22288 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';		import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers';		import { useResolvedThreadInfo } from 'lib/utils/entity-helpers';

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

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,		+expandable?: boolean,
		+Handler: React.ComponentType<HandlerProps>,
		ashoatUnsubmitted Not Done Inline Actions Nit: typical pattern I've seen for this sort of thing is to keep `Handler` lowercase until the place in the code where you use it as a component. Then at that place, you can do something like: const Handler = props.handler; ashoat: Nit: typical pattern I've seen for this sort of thing is to keep `Handler` lowercase until the…
};		};

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,		expandable = true,
		Handler,
} = 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 10 Lines	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}		expandable={expandable}
		Handler={Handler}
/>		/>
));		));
}, [		}, [
expanded,		expanded,
hasSubchannelsButton,		hasSubchannelsButton,
itemChildren,		itemChildren,
paddingLeft,		paddingLeft,
expandable,
threadInfo,		threadInfo,
		expandable,
		Handler,
]);		]);

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

const itemExpandButton = React.useMemo(() => {		const itemExpandButton = React.useMemo(() => {
Show All 15 Lines	function CommunityDrawerItem(props: DrawerItemProps): React.Node {
}, [		}, [
expandable,		expandable,
itemChildren?.length,		itemChildren?.length,
hasSubchannelsButton,		hasSubchannelsButton,
onExpandToggled,		onExpandToggled,
expanded,		expanded,
]);		]);

const Handler = useSelector(state =>
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 => {},
});		});

const { uiName } = useResolvedThreadInfo(threadInfo);		const { uiName } = useResolvedThreadInfo(threadInfo);
const titleLabel = classnames(css.title, css[labelStyle]);		const titleLabel = classnames(css.title, css[labelStyle]);

Show All 16 Lines	return (
</>		</>
);		);
}		}

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

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