You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { Avatar, AvatarSize } from './Avatar';
|
|
import { MessageBodyHighlight } from './MessageBodyHighlight';
|
|
import { Timestamp } from './conversation/Timestamp';
|
|
import { ContactName } from './conversation/ContactName';
|
|
|
|
import {
|
|
FindAndFormatContactType,
|
|
openConversationExternal,
|
|
PropsForSearchResults,
|
|
} from '../state/ducks/conversations';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
type PropsHousekeeping = {
|
|
isSelected?: boolean;
|
|
};
|
|
|
|
type Props = PropsForSearchResults & PropsHousekeeping;
|
|
|
|
const FromName = (props: { from: FindAndFormatContactType; to: FindAndFormatContactType }) => {
|
|
const { from, to } = props;
|
|
|
|
if (from.isMe && to.isMe) {
|
|
return (
|
|
<span className="module-message-search-result__header__name">
|
|
{window.i18n('noteToSelf')}
|
|
</span>
|
|
);
|
|
}
|
|
if (from.isMe) {
|
|
return <span className="module-message-search-result__header__name">{window.i18n('you')}</span>;
|
|
}
|
|
|
|
return (
|
|
// tslint:disable: use-simple-attributes
|
|
<ContactName
|
|
phoneNumber={from.phoneNumber}
|
|
name={from.name || ''}
|
|
profileName={from.profileName || ''}
|
|
module="module-message-search-result__header__name"
|
|
shouldShowPubkey={false}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const From = (props: { from: FindAndFormatContactType; to: FindAndFormatContactType }) => {
|
|
const { to, from } = props;
|
|
const fromName = <FromName from={from} to={to} />;
|
|
|
|
if (!to.isMe) {
|
|
return (
|
|
<div className="module-message-search-result__header__from">
|
|
{fromName} {window.i18n('to')}{' '}
|
|
<span className="module-mesages-search-result__header__group">
|
|
<ContactName
|
|
phoneNumber={to.phoneNumber}
|
|
name={to.name || ''}
|
|
profileName={to.profileName || ''}
|
|
shouldShowPubkey={false}
|
|
/>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div className="module-message-search-result__header__from">{fromName}</div>;
|
|
};
|
|
|
|
const AvatarItem = (props: { from: FindAndFormatContactType }) => {
|
|
const { from } = props;
|
|
const userName = from.profileName || from.phoneNumber;
|
|
|
|
return (
|
|
<Avatar
|
|
avatarPath={from.avatarPath || ''}
|
|
name={userName}
|
|
size={AvatarSize.S}
|
|
pubkey={from.phoneNumber}
|
|
/>
|
|
);
|
|
};
|
|
export const MessageSearchResult = (props: Props) => {
|
|
const { from, id: messageId, isSelected, conversationId, receivedAt, snippet, to } = props;
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
if (!from || !to) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
onClick={() => {
|
|
dispatch(
|
|
openConversationExternal({
|
|
id: conversationId,
|
|
messageId,
|
|
firstUnreadIdOnOpen: undefined,
|
|
})
|
|
);
|
|
}}
|
|
className={classNames(
|
|
'module-message-search-result',
|
|
isSelected ? 'module-message-search-result--is-selected' : null
|
|
)}
|
|
>
|
|
<AvatarItem from={from} />
|
|
<div className="module-message-search-result__text">
|
|
<div className="module-message-search-result__header">
|
|
<From from={from} to={to} />
|
|
<div className="module-message-search-result__header__timestamp">
|
|
<Timestamp timestamp={receivedAt} />
|
|
</div>
|
|
</div>
|
|
<div className="module-message-search-result__body">
|
|
<MessageBodyHighlight text={snippet || ''} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|