Differential D7210 Diff 24629 web/chat/chat-thread-list-item.react.js

Changeset View

Standalone View

web/chat/chat-thread-list-item.react.js

Show All 11 Lines	import {
useResolvedThreadInfos,		useResolvedThreadInfos,
} from 'lib/utils/entity-helpers.js';		} from 'lib/utils/entity-helpers.js';

import ChatThreadListItemMenu from './chat-thread-list-item-menu.react.js';		import ChatThreadListItemMenu from './chat-thread-list-item-menu.react.js';
import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js';		import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js';
import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';		import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
import css from './chat-thread-list.css';		import css from './chat-thread-list.css';
import MessagePreview from './message-preview.react.js';		import MessagePreview from './message-preview.react.js';
		import ThreadAvatar from '../components/thread-avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import {		import {
useOnClickThread,		useOnClickThread,
useThreadIsActive,		useThreadIsActive,
} from '../selectors/thread-selectors.js';		} from '../selectors/thread-selectors.js';

type Props = {		type Props = {
+item: ChatThreadItem,		+item: ChatThreadItem,
▲ Show 20 Lines • Show All 49 Lines • ▼ Show 20 Lines	const breadCrumbsClassName = classNames(css.breadCrumbs, {
[css.unread]: unread,		[css.unread]: unread,
});		});

let unreadDot;		let unreadDot;
if (unread) {		if (unread) {
unreadDot = <div className={css.unreadDot} />;		unreadDot = <div className={css.unreadDot} />;
}		}

const { color } = item.threadInfo;
const colorSplotchStyle = React.useMemo(
() => ({ backgroundColor: `#${color}` }),
[color],
);

const sidebars = item.sidebars.map((sidebarItem, index) => {		const sidebars = item.sidebars.map((sidebarItem, index) => {
if (sidebarItem.type === 'sidebar') {		if (sidebarItem.type === 'sidebar') {
const { type, ...sidebarInfo } = sidebarItem;		const { type, ...sidebarInfo } = sidebarItem;
return (		return (
<ChatThreadListSidebar		<ChatThreadListSidebar
sidebarInfo={sidebarInfo}		sidebarInfo={sidebarInfo}
isSubsequentItem={index > 0}		isSubsequentItem={index > 0}
key={sidebarInfo.threadInfo.id}		key={sidebarInfo.threadInfo.id}
Show All 24 Lines	return (
<React.Fragment key={thread.id}>		<React.Fragment key={thread.id}>
<span className={css.breadCrumb}>{thread.uiName}</span>		<span className={css.breadCrumb}>{thread.uiName}</span>
{chevron}		{chevron}
</React.Fragment>		</React.Fragment>
);		);
});		});

const { uiName } = useResolvedThreadInfo(threadInfo);		const { uiName } = useResolvedThreadInfo(threadInfo);

return (		return (
<>		<>
<a className={containerClassName} onClick={selectItemIfNotActiveCreation}>		<a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
<div className={css.colorContainer}>		<div className={css.colorContainer}>
<div className={css.colorSplotchContainer}>		<div className={css.colorSplotchContainer}>
<div className={css.dotContainer}>{unreadDot}</div>		<div className={css.dotContainer}>{unreadDot}</div>
<div className={css.colorSplotch} style={colorSplotchStyle} />		<ThreadAvatar size="large" threadInfo={threadInfo} />
</div>		</div>
</div>		</div>
<div className={css.threadButton}>		<div className={css.threadButton}>
<p className={breadCrumbsClassName}>{ancestorPath}</p>		<p className={breadCrumbsClassName}>{ancestorPath}</p>
<div className={css.threadRow}>		<div className={css.threadRow}>
<div className={titleClassName}>{uiName}</div>		<div className={titleClassName}>{uiName}</div>
</div>		</div>
<div className={css.threadRow}>		<div className={css.threadRow}>
Show All 20 Lines