signal-desktop/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

148 lines
4.8 KiB
TypeScript
Raw Normal View History

2021-04-21 16:31:12 +00:00
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2022-11-18 00:45:19 +00:00
import type { ReactNode } from 'react';
import React, { useEffect } from 'react';
2021-04-21 16:31:12 +00:00
import type { ConversationType } from '../../state/ducks/conversations';
2021-11-30 10:07:24 +00:00
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { PreferredBadgeSelectorType } from '../../state/selectors/badges';
import { assertDev } from '../../util/assert';
2021-04-21 16:31:12 +00:00
import { Avatar, AvatarSize } from '../Avatar';
import { ContactName } from './ContactName';
import { SharedGroupNames } from '../SharedGroupNames';
import { UserText } from '../UserText';
2024-05-15 21:48:02 +00:00
import { I18n } from '../I18n';
2021-04-21 16:31:12 +00:00
export type PropsType = Readonly<{
2021-04-21 16:31:12 +00:00
children?: ReactNode;
conversation: ConversationType;
2021-11-30 10:07:24 +00:00
getPreferredBadge: PreferredBadgeSelectorType;
2021-04-21 16:31:12 +00:00
i18n: LocalizerType;
onClick?: () => void;
toggleSignalConnectionsModal: () => void;
updateSharedGroups: (conversationId: string) => void;
2021-11-30 10:07:24 +00:00
theme: ThemeType;
oldName: string | undefined;
isSignalConnection: boolean;
}>;
2021-04-21 16:31:12 +00:00
2022-11-18 00:45:19 +00:00
export function ContactSpoofingReviewDialogPerson({
children,
conversation,
getPreferredBadge,
i18n,
onClick,
toggleSignalConnectionsModal,
updateSharedGroups,
2022-11-18 00:45:19 +00:00
theme,
oldName,
isSignalConnection,
2022-11-18 00:45:19 +00:00
}: PropsType): JSX.Element {
assertDev(
2022-03-22 20:45:34 +00:00
conversation.type === 'direct',
'<ContactSpoofingReviewDialogPerson> expected a direct conversation'
);
2021-04-21 16:31:12 +00:00
useEffect(() => {
// Kick off the expensive hydration of the current sharedGroupNames
updateSharedGroups(conversation.id);
}, [conversation.id, updateSharedGroups]);
const newName = conversation.profileName || conversation.title;
let callout: JSX.Element | undefined;
if (oldName && oldName !== newName) {
callout = (
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--person" />
<div>
2024-05-15 21:48:02 +00:00
<I18n
i18n={i18n}
id="icu:ContactSpoofingReviewDialog__group__name-change-info"
components={{
oldName: <UserText text={oldName} />,
newName: <UserText text={newName} />,
}}
/>
</div>
</div>
);
}
const name = (
<ContactName
module="module-ContactSpoofingReviewDialogPerson__info__contact-name"
title={conversation.title}
/>
);
2022-03-22 20:45:34 +00:00
const contents = (
<>
<Avatar
{...conversation}
badge={getPreferredBadge(conversation.badges)}
conversationType={conversation.type}
2022-12-09 20:37:45 +00:00
size={AvatarSize.FORTY_EIGHT}
2022-03-22 20:45:34 +00:00
className="module-ContactSpoofingReviewDialogPerson__avatar"
i18n={i18n}
theme={theme}
onClick={onClick}
2022-03-22 20:45:34 +00:00
/>
<div className="module-ContactSpoofingReviewDialogPerson__info">
{onClick ? (
<button
type="button"
className="module-ContactSpoofingReviewDialogPerson"
onClick={onClick}
>
{name}
</button>
) : (
name
)}
{callout}
2022-03-22 20:45:34 +00:00
{conversation.phoneNumber ? (
2021-04-21 16:31:12 +00:00
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--phone" />
<div>{conversation.phoneNumber}</div>
</div>
) : null}
{isSignalConnection ? (
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--connections" />
<button
type="button"
className="module-ContactSpoofingReviewDialogPerson__info__property__signal-connection"
onClick={toggleSignalConnectionsModal}
>
{i18n('icu:ContactSpoofingReviewDialog__signal-connection')}
</button>
2021-04-21 16:31:12 +00:00
</div>
2022-03-22 20:45:34 +00:00
) : null}
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--group" />
<div>
{conversation.sharedGroupNames?.length ? (
<SharedGroupNames
i18n={i18n}
sharedGroupNames={conversation.sharedGroupNames || []}
/>
) : (
i18n(
'icu:ContactSpoofingReviewDialog__group__members__no-shared-groups'
)
)}
</div>
2021-04-21 16:31:12 +00:00
</div>
2022-03-22 20:45:34 +00:00
{children}
</div>
</>
);
2021-04-21 16:31:12 +00:00
2022-03-22 20:45:34 +00:00
return (
<div className="module-ContactSpoofingReviewDialogPerson">{contents}</div>
);
2022-11-18 00:45:19 +00:00
}