Page MenuHomePhabricator
Differential D6292 Diff 21146 web/sidebar/community-drawer-item.react.js

Changeset View

Standalone View

View Options

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 { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react';
useOnClickThread,
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 42 Lines • ▼ Show 20 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( 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) { handler.onClick(event);
onClick(event);
}
}, },
[isCreateMode, active, onClick], [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}>
tomekUnsubmitted
Not Done
Inline Actions
{itemExpandButton}
- <a onClick={onClick} className={css.titleWrapper}>
+ <a onClick={handler.onClick} className={css.titleWrapper}>
<div className={titleLabel}>{threadInfo.uiName}</div>

When the onClick callback is so simple, there's no need to create it at all.

tomek: When the `onClick` callback is so simple, there's no need to create it at all.
<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