Differential D6292 Diff 21034 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 { useSelector } from 'react-redux';		import { useSelector } from 'react-redux';

import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';		import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';

import {		import { useThreadIsActive } from '../selectors/thread-selectors';
useOnClickThread,		import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react';
useThreadIsActive,
} from '../selectors/thread-selectors';
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,
▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines	return (
</div>		</div>
);		);
}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);		}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);

const active = useThreadIsActive(threadInfo.id);		const active = useThreadIsActive(threadInfo.id);
const isCreateMode = useSelector(		const isCreateMode = useSelector(
state => state.navInfo.chatMode === 'create',		state => state.navInfo.chatMode === 'create',
);		);
const onClick = useOnClickThread(threadInfo);		const tab = useSelector(state => state.navInfo.tab);
const selectItemIfNotActiveCreation = React.useCallback(		const Handler = React.useMemo(() => getCommunityDrawerItemHandler(tab), [
		tab,
		]);

		const [handler, setHandler] = React.useState({
		// eslint-disable-next-line no-unused-vars
		onClick: event => {},
		});

		const onClick = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {		(event: SyntheticEvent<HTMLAnchorElement>) => {
if (!isCreateMode \|\| !active) {		if (!isCreateMode \|\| !active) {
onClick(event);		handler.onClick(event);
}		}
},		},
[isCreateMode, active, onClick],		[isCreateMode, active, handler],
);		);

const titleLabel = classnames(css.title, css[labelStyle]);		const titleLabel = classnames(css.title, css[labelStyle]);

return (		return (
<>		<>
		<Handler setHandler={setHandler} threadInfo={threadInfo} />
<div className={css.threadEntry}>		<div className={css.threadEntry}>
{itemExpandButton}		{itemExpandButton}
<a onClick={selectItemIfNotActiveCreation} className={css.titleWrapper}>		<a onClick={onClick} className={css.titleWrapper}>
<div className={titleLabel}>{threadInfo.uiName}</div>		<div className={titleLabel}>{threadInfo.uiName}</div>
</a>		</a>
</div>		</div>
<div className={css.threadListContainer}>{children}</div>		<div className={css.threadListContainer}>{children}</div>
</>		</>
);		);
}		}

Show All 33 Lines