Differential D6292 Diff 22570 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 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';
import {
useOnClickThread,
useThreadIsActive,
} from '../selectors/thread-selectors.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,
};		};

function CommunityDrawerItem(props: DrawerItemProps): React.Node {		function CommunityDrawerItem(props: DrawerItemProps): React.Node {
Show All 40 Lines	const itemExpandButton = React.useMemo(() => {
}		}
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]);		}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);

const active = useThreadIsActive(threadInfo.id);		const Handler = useSelector(state =>
const isCreateMode = useSelector(		getCommunityDrawerItemHandler(state.navInfo.tab),
state => state.navInfo.chatMode === 'create',
);
const onClick = useOnClickThread(threadInfo);
const selectItemIfNotActiveCreation = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
if (!isCreateMode \|\| !active) {
onClick(event);
}
},
[isCreateMode, active, onClick],
);		);

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

const { uiName } = useResolvedThreadInfo(threadInfo);		const { uiName } = useResolvedThreadInfo(threadInfo);
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={handler.onClick} className={css.titleWrapper}>
<div className={titleLabel}>{uiName}</div>		<div className={titleLabel}>{uiName}</div>
</a>		</a>
</div>		</div>
<div className={css.threadListContainer}>{children}</div>		<div className={css.threadListContainer}>{children}</div>
</>		</>
);		);
}		}

Show All 33 Lines