Refactor ConversationHeader into function component
This commit is contained in:
Jamie Kyle
GitHub
parent
9533796c81
commit
33d30c6e74
6 changed files with 1273 additions and 1112 deletions
|
|
@ -46,32 +46,32 @@ const commonProps = {
|
|||
|
||||
i18n,
|
||||
|
||||
setDisappearingMessages: action('setDisappearingMessages'),
|
||||
destroyMessages: action('destroyMessages'),
|
||||
leaveGroup: action('leaveGroup'),
|
||||
onOutgoingAudioCallInConversation: action(
|
||||
'onOutgoingAudioCallInConversation'
|
||||
onConversationAccept: action('onConversationAccept'),
|
||||
onConversationArchive: action('onConversationArchive'),
|
||||
onConversationBlock: action('onConversationBlock'),
|
||||
onConversationBlockAndReportSpam: action('onConversationBlockAndReportSpam'),
|
||||
onConversationDelete: action('onConversationDelete'),
|
||||
onConversationDeleteMessages: action('onConversationDeleteMessages'),
|
||||
onConversationDisappearingMessagesChange: action(
|
||||
'onConversationDisappearingMessagesChange'
|
||||
),
|
||||
onOutgoingVideoCallInConversation: action(
|
||||
'onOutgoingVideoCallInConversation'
|
||||
onConversationLeaveGroup: action('onConversationLeaveGroup'),
|
||||
onConversationMarkUnread: action('onConversationMarkUnread'),
|
||||
onConversationMuteExpirationChange: action(
|
||||
'onConversationMuteExpirationChange'
|
||||
),
|
||||
|
||||
onArchive: action('onArchive'),
|
||||
onMarkUnread: action('onMarkUnread'),
|
||||
toggleSelectMode: action('toggleSelectMode'),
|
||||
onMoveToInbox: action('onMoveToInbox'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
popPanelForConversation: action('popPanelForConversation'),
|
||||
searchInConversation: action('searchInConversation'),
|
||||
setMuteExpiration: action('onSetMuteNotifications'),
|
||||
setPinned: action('setPinned'),
|
||||
viewUserStories: action('viewUserStories'),
|
||||
|
||||
acceptConversation: action('acceptConversation'),
|
||||
blockAndReportSpam: action('blockAndReportSpam'),
|
||||
blockConversation: action('blockConversation'),
|
||||
reportSpam: action('reportSpam'),
|
||||
deleteConversation: action('deleteConversation'),
|
||||
onConversationPin: action('onConversationPin'),
|
||||
onConversationReportSpam: action('onConversationReportSpam'),
|
||||
onConversationUnarchive: action('onConversationUnarchive'),
|
||||
onConversationUnpin: action('onConversationUnpin'),
|
||||
onOutgoingAudioCall: action('onOutgoingAudioCall'),
|
||||
onOutgoingVideoCall: action('onOutgoingVideoCall'),
|
||||
onSearchInConversation: action('onSearchInConversation'),
|
||||
onSelectModeEnter: action('onSelectModeEnter'),
|
||||
onShowMembers: action('onShowMembers'),
|
||||
onViewConversationDetails: action('onViewConversationDetails'),
|
||||
onViewRecentMedia: action('onViewRecentMedia'),
|
||||
onViewUserStories: action('onViewUserStories'),
|
||||
};
|
||||
|
||||
export function PrivateConvo(): JSX.Element {
|
||||
|
|
@ -80,69 +80,79 @@ export function PrivateConvo(): JSX.Element {
|
|||
title: 'With name and profile, verified',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
isVerified: true,
|
||||
avatarPath: gifUrl,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0001',
|
||||
type: 'direct',
|
||||
id: '1',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
isVerified: true,
|
||||
avatarPath: gifUrl,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0001',
|
||||
type: 'direct',
|
||||
id: '1',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With name, not verified, no avatar',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '2',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '2',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With name, not verified, descenders',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
title: 'Joyrey 🔥 Leppey',
|
||||
name: 'Joyrey 🔥 Leppey',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '3',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
title: 'Joyrey 🔥 Leppey',
|
||||
name: 'Joyrey 🔥 Leppey',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '3',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Profile, no name',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
phoneNumber: '(202) 555-0003',
|
||||
type: 'direct',
|
||||
id: '4',
|
||||
title: '🔥Flames🔥',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
isVerified: false,
|
||||
phoneNumber: '(202) 555-0003',
|
||||
type: 'direct',
|
||||
id: '4',
|
||||
title: '🔥Flames🔥',
|
||||
profileName: '🔥Flames🔥',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'No name, no profile, no color',
|
||||
props: {
|
||||
...commonProps,
|
||||
title: '(202) 555-0011',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
type: 'direct',
|
||||
id: '5',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
title: '(202) 555-0011',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
type: 'direct',
|
||||
id: '5',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -150,66 +160,76 @@ export function PrivateConvo(): JSX.Element {
|
|||
props: {
|
||||
...commonProps,
|
||||
showBackButton: true,
|
||||
color: getRandomColor(),
|
||||
phoneNumber: '(202) 555-0004',
|
||||
title: '(202) 555-0004',
|
||||
type: 'direct',
|
||||
id: '6',
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
phoneNumber: '(202) 555-0004',
|
||||
title: '(202) 555-0004',
|
||||
type: 'direct',
|
||||
id: '6',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Disappearing messages set',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '7',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '7',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Disappearing messages + verified',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '8',
|
||||
expireTimer: DurationInSeconds.fromSeconds(300),
|
||||
acceptedMessageRequest: true,
|
||||
isVerified: true,
|
||||
canChangeTimer: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '8',
|
||||
expireTimer: DurationInSeconds.fromSeconds(300),
|
||||
acceptedMessageRequest: true,
|
||||
isVerified: true,
|
||||
canChangeTimer: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Muting Conversation',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0006',
|
||||
phoneNumber: '(202) 555-0006',
|
||||
type: 'direct',
|
||||
id: '9',
|
||||
acceptedMessageRequest: true,
|
||||
muteExpiresAt: new Date('3000-10-18T11:11:11Z').valueOf(),
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0006',
|
||||
phoneNumber: '(202) 555-0006',
|
||||
type: 'direct',
|
||||
id: '9',
|
||||
acceptedMessageRequest: true,
|
||||
muteExpiresAt: new Date('3000-10-18T11:11:11Z').valueOf(),
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'SMS-only conversation',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0006',
|
||||
phoneNumber: '(202) 555-0006',
|
||||
type: 'direct',
|
||||
id: '10',
|
||||
acceptedMessageRequest: true,
|
||||
isSMSOnly: true,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0006',
|
||||
phoneNumber: '(202) 555-0006',
|
||||
type: 'direct',
|
||||
id: '10',
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -236,62 +256,71 @@ export function Group(): JSX.Element {
|
|||
title: 'Basic',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '11',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '11',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'In a group you left - no disappearing messages',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '12',
|
||||
type: 'group',
|
||||
left: true,
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '12',
|
||||
type: 'group',
|
||||
left: true,
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'In a group with an active group call',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '13',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.Join,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '13',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'In a forever muted group',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: 'Way too many messages',
|
||||
name: 'Way too many messages',
|
||||
phoneNumber: '',
|
||||
id: '14',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
|
||||
muteExpiresAt: Infinity,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: 'Way too many messages',
|
||||
name: 'Way too many messages',
|
||||
phoneNumber: '',
|
||||
id: '14',
|
||||
type: 'group',
|
||||
expireTimer: DurationInSeconds.fromSeconds(10),
|
||||
acceptedMessageRequest: true,
|
||||
|
||||
muteExpiresAt: Infinity,
|
||||
}),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -318,14 +347,16 @@ export function NoteToSelf(): JSX.Element {
|
|||
title: 'In chat with yourself',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '15',
|
||||
type: 'direct',
|
||||
isMe: true,
|
||||
acceptedMessageRequest: true,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '15',
|
||||
type: 'direct',
|
||||
isMe: true,
|
||||
acceptedMessageRequest: true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -352,14 +383,16 @@ export function Unaccepted(): JSX.Element {
|
|||
title: '1:1 conversation',
|
||||
props: {
|
||||
...commonProps,
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '16',
|
||||
type: 'direct',
|
||||
isMe: false,
|
||||
acceptedMessageRequest: false,
|
||||
outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
|
||||
conversation: getDefaultConversation({
|
||||
color: getRandomColor(),
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '16',
|
||||
type: 'direct',
|
||||
isMe: false,
|
||||
acceptedMessageRequest: false,
|
||||
}),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
132
ts/hooks/useMinimalConversation.ts
Normal file
132
ts/hooks/useMinimalConversation.ts
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
import { useMemo } from 'react';
|
||||
import type { ConversationType } from '../state/ducks/conversations';
|
||||
|
||||
type Primitive = undefined | null | boolean | number | bigint | string;
|
||||
type PrimitiveObject = Record<string, Primitive>;
|
||||
type Satisfies<Expected, Actual extends Expected> = Actual;
|
||||
|
||||
/**
|
||||
* This type is a subset of ConversationType that includes only the fields that
|
||||
* are not updated frequently and can be shallow compared. This is useful for
|
||||
* memoization, because it allows us to avoid re-rendering when the conversation
|
||||
* changes in ways that don't affect the UI.
|
||||
*
|
||||
* You are welcome to add to this type, as long as the value is a primitive
|
||||
* type (no objects or arrays), and it is not updated frequently.
|
||||
*/
|
||||
export type MinimalConversation = Satisfies<
|
||||
PrimitiveObject,
|
||||
Pick<
|
||||
ConversationType,
|
||||
| 'acceptedMessageRequest'
|
||||
| 'announcementsOnly'
|
||||
| 'areWeAdmin'
|
||||
| 'avatarPath'
|
||||
| 'canChangeTimer'
|
||||
| 'color'
|
||||
| 'expireTimer'
|
||||
| 'groupVersion'
|
||||
| 'id'
|
||||
| 'isArchived'
|
||||
| 'isBlocked'
|
||||
| 'isMe'
|
||||
| 'isPinned'
|
||||
| 'isReported'
|
||||
| 'isVerified'
|
||||
| 'left'
|
||||
| 'markedUnread'
|
||||
| 'muteExpiresAt'
|
||||
| 'name'
|
||||
| 'phoneNumber'
|
||||
| 'profileName'
|
||||
| 'title'
|
||||
| 'type'
|
||||
| 'unblurredAvatarPath'
|
||||
>
|
||||
>;
|
||||
|
||||
export function useMinimalConversation(
|
||||
conversation: ConversationType
|
||||
): MinimalConversation {
|
||||
const {
|
||||
acceptedMessageRequest,
|
||||
announcementsOnly,
|
||||
areWeAdmin,
|
||||
avatarPath,
|
||||
canChangeTimer,
|
||||
color,
|
||||
expireTimer,
|
||||
groupVersion,
|
||||
id,
|
||||
isArchived,
|
||||
isBlocked,
|
||||
isMe,
|
||||
isPinned,
|
||||
isReported,
|
||||
isVerified,
|
||||
left,
|
||||
markedUnread,
|
||||
muteExpiresAt,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
type,
|
||||
unblurredAvatarPath,
|
||||
} = conversation;
|
||||
return useMemo(() => {
|
||||
return {
|
||||
acceptedMessageRequest,
|
||||
announcementsOnly,
|
||||
areWeAdmin,
|
||||
avatarPath,
|
||||
canChangeTimer,
|
||||
color,
|
||||
expireTimer,
|
||||
groupVersion,
|
||||
id,
|
||||
isArchived,
|
||||
isBlocked,
|
||||
isMe,
|
||||
isPinned,
|
||||
isReported,
|
||||
isVerified,
|
||||
left,
|
||||
markedUnread,
|
||||
muteExpiresAt,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
type,
|
||||
unblurredAvatarPath,
|
||||
};
|
||||
}, [
|
||||
acceptedMessageRequest,
|
||||
announcementsOnly,
|
||||
areWeAdmin,
|
||||
avatarPath,
|
||||
canChangeTimer,
|
||||
color,
|
||||
expireTimer,
|
||||
groupVersion,
|
||||
id,
|
||||
isArchived,
|
||||
isBlocked,
|
||||
isMe,
|
||||
isPinned,
|
||||
isReported,
|
||||
isVerified,
|
||||
left,
|
||||
markedUnread,
|
||||
muteExpiresAt,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
type,
|
||||
unblurredAvatarPath,
|
||||
]);
|
||||
}
|
||||
|
|
@ -1,43 +1,45 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import React, { memo, useCallback, useMemo } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { pick } from 'lodash';
|
||||
import type { ConversationType } from '../ducks/conversations';
|
||||
import { useContactNameData } from '../../components/conversation/ContactName';
|
||||
import {
|
||||
ConversationHeader,
|
||||
OutgoingCallButtonStyle,
|
||||
} from '../../components/conversation/ConversationHeader';
|
||||
import { getPreferredBadgeSelector } from '../selectors/badges';
|
||||
import {
|
||||
getConversationByServiceIdSelector,
|
||||
getConversationSelector,
|
||||
getHasPanelOpen,
|
||||
getSelectedMessageIds,
|
||||
isMissingRequiredProfileSharing,
|
||||
} from '../selectors/conversations';
|
||||
import { getCannotLeaveBecauseYouAreLastAdmin } from '../../components/conversation/conversation-details/ConversationDetails';
|
||||
import { useMinimalConversation } from '../../hooks/useMinimalConversation';
|
||||
import { CallMode } from '../../types/Calling';
|
||||
import { PanelType } from '../../types/Panels';
|
||||
import { StoryViewModeType } from '../../types/Stories';
|
||||
import { strictAssert } from '../../util/assert';
|
||||
import { getAddedByForOurPendingInvitation } from '../../util/getAddedByForOurPendingInvitation';
|
||||
import { getGroupMemberships } from '../../util/getGroupMemberships';
|
||||
import { isConversationSMSOnly } from '../../util/isConversationSMSOnly';
|
||||
import { isGroupOrAdhocCallState } from '../../util/isGroupOrAdhocCall';
|
||||
import { isSignalConversation } from '../../util/isSignalConversation';
|
||||
import { missingCaseError } from '../../util/missingCaseError';
|
||||
import { useCallingActions } from '../ducks/calling';
|
||||
import { isAnybodyElseInGroupCall } from '../ducks/callingHelpers';
|
||||
import type { ConversationType } from '../ducks/conversations';
|
||||
import {
|
||||
getConversationCallMode,
|
||||
useConversationsActions,
|
||||
} from '../ducks/conversations';
|
||||
import { getHasStoriesSelector } from '../selectors/stories2';
|
||||
import { getUserACI, getIntl, getTheme } from '../selectors/user';
|
||||
import { isConversationSMSOnly } from '../../util/isConversationSMSOnly';
|
||||
import { missingCaseError } from '../../util/missingCaseError';
|
||||
import { strictAssert } from '../../util/assert';
|
||||
import { isSignalConversation } from '../../util/isSignalConversation';
|
||||
import { useSearchActions } from '../ducks/search';
|
||||
import { useStoriesActions } from '../ducks/stories';
|
||||
import { getCannotLeaveBecauseYouAreLastAdmin } from '../../components/conversation/conversation-details/ConversationDetails';
|
||||
import { getGroupMemberships } from '../../util/getGroupMemberships';
|
||||
import { isGroupOrAdhocCallState } from '../../util/isGroupOrAdhocCall';
|
||||
import { useContactNameData } from '../../components/conversation/ContactName';
|
||||
import { getAddedByForOurPendingInvitation } from '../../util/getAddedByForOurPendingInvitation';
|
||||
import { getPreferredBadgeSelector } from '../selectors/badges';
|
||||
import { getActiveCallState, getCallSelector } from '../selectors/calling';
|
||||
import {
|
||||
getConversationByServiceIdSelector,
|
||||
getConversationSelector,
|
||||
getHasPanelOpen,
|
||||
isMissingRequiredProfileSharing as getIsMissingRequiredProfileSharing,
|
||||
getSelectedMessageIds,
|
||||
} from '../selectors/conversations';
|
||||
import { getHasStoriesSelector } from '../selectors/stories2';
|
||||
import { getIntl, getTheme, getUserACI } from '../selectors/user';
|
||||
|
||||
export type OwnProps = {
|
||||
id: string;
|
||||
|
|
@ -102,7 +104,6 @@ export const SmartConversationHeader = memo(function SmartConversationHeader({
|
|||
onArchive,
|
||||
onMarkUnread,
|
||||
onMoveToInbox,
|
||||
popPanelForConversation,
|
||||
pushPanelForConversation,
|
||||
setDisappearingMessages,
|
||||
setMuteExpiration,
|
||||
|
|
@ -145,73 +146,149 @@ export const SmartConversationHeader = memo(function SmartConversationHeader({
|
|||
const conversationName = useContactNameData(conversation);
|
||||
strictAssert(conversationName, 'conversationName is required');
|
||||
|
||||
const isMissingMandatoryProfileSharing =
|
||||
getIsMissingRequiredProfileSharing(conversation);
|
||||
|
||||
const onConversationAccept = useCallback(() => {
|
||||
acceptConversation(conversation.id);
|
||||
}, [acceptConversation, conversation.id]);
|
||||
|
||||
const onConversationArchive = useCallback(() => {
|
||||
onArchive(conversation.id);
|
||||
}, [onArchive, conversation.id]);
|
||||
|
||||
const onConversationBlock = useCallback(() => {
|
||||
blockConversation(conversation.id);
|
||||
}, [blockConversation, conversation.id]);
|
||||
|
||||
const onConversationBlockAndReportSpam = useCallback(() => {
|
||||
blockAndReportSpam(conversation.id);
|
||||
}, [blockAndReportSpam, conversation.id]);
|
||||
|
||||
const onConversationDelete = useCallback(() => {
|
||||
deleteConversation(conversation.id);
|
||||
}, [deleteConversation, conversation.id]);
|
||||
|
||||
const onConversationDeleteMessages = useCallback(() => {
|
||||
destroyMessages(conversation.id);
|
||||
}, [destroyMessages, conversation.id]);
|
||||
|
||||
const onConversationDisappearingMessagesChange = useCallback(
|
||||
seconds => {
|
||||
setDisappearingMessages(conversation.id, seconds);
|
||||
},
|
||||
[setDisappearingMessages, conversation.id]
|
||||
);
|
||||
|
||||
const onConversationLeaveGroup = useCallback(() => {
|
||||
leaveGroup(conversation.id);
|
||||
}, [leaveGroup, conversation.id]);
|
||||
|
||||
const onConversationMarkUnread = useCallback(() => {
|
||||
onMarkUnread(conversation.id);
|
||||
}, [onMarkUnread, conversation.id]);
|
||||
|
||||
const onConversationMuteExpirationChange = useCallback(
|
||||
seconds => {
|
||||
setMuteExpiration(conversation.id, seconds);
|
||||
},
|
||||
[setMuteExpiration, conversation.id]
|
||||
);
|
||||
|
||||
const onConversationPin = useCallback(() => {
|
||||
setPinned(conversation.id, true);
|
||||
}, [setPinned, conversation.id]);
|
||||
|
||||
const onConversationReportSpam = useCallback(() => {
|
||||
reportSpam(conversation.id);
|
||||
}, [reportSpam, conversation.id]);
|
||||
|
||||
const onConversationUnarchive = useCallback(() => {
|
||||
onMoveToInbox(conversation.id);
|
||||
}, [onMoveToInbox, conversation.id]);
|
||||
|
||||
const onConversationUnpin = useCallback(() => {
|
||||
setPinned(conversation.id, false);
|
||||
}, [setPinned, conversation.id]);
|
||||
|
||||
const onOutgoingAudioCall = useCallback(() => {
|
||||
onOutgoingAudioCallInConversation(conversation.id);
|
||||
}, [onOutgoingAudioCallInConversation, conversation.id]);
|
||||
|
||||
const onOutgoingVideoCall = useCallback(() => {
|
||||
onOutgoingVideoCallInConversation(conversation.id);
|
||||
}, [onOutgoingVideoCallInConversation, conversation.id]);
|
||||
|
||||
const onSearchInConversation = useCallback(() => {
|
||||
searchInConversation(conversation.id);
|
||||
}, [searchInConversation, conversation.id]);
|
||||
|
||||
const onSelectModeEnter = useCallback(() => {
|
||||
toggleSelectMode(true);
|
||||
}, [toggleSelectMode]);
|
||||
|
||||
const onShowMembers = useCallback(() => {
|
||||
pushPanelForConversation({ type: PanelType.GroupV1Members });
|
||||
}, [pushPanelForConversation]);
|
||||
|
||||
const onViewConversationDetails = useCallback(() => {
|
||||
pushPanelForConversation({ type: PanelType.ConversationDetails });
|
||||
}, [pushPanelForConversation]);
|
||||
|
||||
const onViewRecentMedia = useCallback(() => {
|
||||
pushPanelForConversation({ type: PanelType.AllMedia });
|
||||
}, [pushPanelForConversation]);
|
||||
|
||||
const onViewUserStories = useCallback(() => {
|
||||
viewUserStories({
|
||||
conversationId: conversation.id,
|
||||
storyViewMode: StoryViewModeType.User,
|
||||
});
|
||||
}, [viewUserStories, conversation.id]);
|
||||
|
||||
const minimalConversation = useMinimalConversation(conversation);
|
||||
|
||||
return (
|
||||
<ConversationHeader
|
||||
{...pick(conversation, [
|
||||
'acceptedMessageRequest',
|
||||
'announcementsOnly',
|
||||
'areWeAdmin',
|
||||
'avatarPath',
|
||||
'canChangeTimer',
|
||||
'color',
|
||||
'expireTimer',
|
||||
'groupVersion',
|
||||
'isArchived',
|
||||
'isMe',
|
||||
'isPinned',
|
||||
'isVerified',
|
||||
'left',
|
||||
'markedUnread',
|
||||
'muteExpiresAt',
|
||||
'name',
|
||||
'phoneNumber',
|
||||
'profileName',
|
||||
'sharedGroupNames',
|
||||
'title',
|
||||
'type',
|
||||
'unblurredAvatarPath',
|
||||
])}
|
||||
addedByName={addedByName}
|
||||
badge={badge}
|
||||
cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
|
||||
destroyMessages={destroyMessages}
|
||||
conversation={minimalConversation}
|
||||
conversationName={conversationName}
|
||||
hasPanelShowing={hasPanelShowing}
|
||||
hasStories={hasStories}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
isMissingMandatoryProfileSharing={isMissingRequiredProfileSharing(
|
||||
conversation
|
||||
)}
|
||||
isMissingMandatoryProfileSharing={isMissingMandatoryProfileSharing}
|
||||
isSelectMode={isSelectMode}
|
||||
isSignalConversation={isSignalConversation(conversation)}
|
||||
isSMSOnly={isConversationSMSOnly(conversation)}
|
||||
leaveGroup={leaveGroup}
|
||||
onArchive={onArchive}
|
||||
onMarkUnread={onMarkUnread}
|
||||
onMoveToInbox={onMoveToInbox}
|
||||
onOutgoingAudioCallInConversation={onOutgoingAudioCallInConversation}
|
||||
onOutgoingVideoCallInConversation={onOutgoingVideoCallInConversation}
|
||||
onConversationAccept={onConversationAccept}
|
||||
onConversationArchive={onConversationArchive}
|
||||
onConversationBlock={onConversationBlock}
|
||||
onConversationBlockAndReportSpam={onConversationBlockAndReportSpam}
|
||||
onConversationDelete={onConversationDelete}
|
||||
onConversationDeleteMessages={onConversationDeleteMessages}
|
||||
onConversationDisappearingMessagesChange={
|
||||
onConversationDisappearingMessagesChange
|
||||
}
|
||||
onConversationLeaveGroup={onConversationLeaveGroup}
|
||||
onConversationMarkUnread={onConversationMarkUnread}
|
||||
onConversationMuteExpirationChange={onConversationMuteExpirationChange}
|
||||
onConversationPin={onConversationPin}
|
||||
onConversationReportSpam={onConversationReportSpam}
|
||||
onConversationUnarchive={onConversationUnarchive}
|
||||
onConversationUnpin={onConversationUnpin}
|
||||
onOutgoingAudioCall={onOutgoingAudioCall}
|
||||
onOutgoingVideoCall={onOutgoingVideoCall}
|
||||
onSearchInConversation={onSearchInConversation}
|
||||
onSelectModeEnter={onSelectModeEnter}
|
||||
onShowMembers={onShowMembers}
|
||||
onViewConversationDetails={onViewConversationDetails}
|
||||
onViewRecentMedia={onViewRecentMedia}
|
||||
onViewUserStories={onViewUserStories}
|
||||
outgoingCallButtonStyle={outgoingCallButtonStyle}
|
||||
popPanelForConversation={popPanelForConversation}
|
||||
pushPanelForConversation={pushPanelForConversation}
|
||||
searchInConversation={searchInConversation}
|
||||
setDisappearingMessages={setDisappearingMessages}
|
||||
setMuteExpiration={setMuteExpiration}
|
||||
setPinned={setPinned}
|
||||
sharedGroupNames={conversation.sharedGroupNames}
|
||||
theme={theme}
|
||||
isSelectMode={isSelectMode}
|
||||
toggleSelectMode={toggleSelectMode}
|
||||
viewUserStories={viewUserStories}
|
||||
// MessageRequestActionsConfirmation
|
||||
addedByName={addedByName}
|
||||
conversationId={id}
|
||||
conversationType={conversation.type}
|
||||
conversationName={conversationName}
|
||||
isBlocked={conversation.isBlocked ?? false}
|
||||
isReported={conversation.isReported ?? false}
|
||||
acceptConversation={acceptConversation}
|
||||
blockAndReportSpam={blockAndReportSpam}
|
||||
blockConversation={blockConversation}
|
||||
reportSpam={reportSpam}
|
||||
deleteConversation={deleteConversation}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export type MuteOption = {
|
|||
};
|
||||
|
||||
export function getMuteOptions(
|
||||
muteExpiresAt: undefined | number,
|
||||
muteExpiresAt: null | undefined | number,
|
||||
i18n: LocalizerType
|
||||
): Array<MuteOption> {
|
||||
return [
|
||||
|
|
|
|||
|
|
@ -3520,20 +3520,18 @@
|
|||
"updated": "2023-12-08T20:28:57.595Z"
|
||||
},
|
||||
{
|
||||
"rule": "React-createRef",
|
||||
"rule": "React-useRef",
|
||||
"path": "ts/components/conversation/ConversationHeader.tsx",
|
||||
"line": " this.menuTriggerRef = React.createRef();",
|
||||
"line": " const menuTriggerRef = useRef<any>(null);",
|
||||
"reasonCategory": "usageTrusted",
|
||||
"updated": "2020-05-20T20:10:43.540Z",
|
||||
"reasonDetail": "Used to reference popup menu"
|
||||
"updated": "2024-03-15T18:29:48.327Z"
|
||||
},
|
||||
{
|
||||
"rule": "React-createRef",
|
||||
"rule": "React-useRef",
|
||||
"path": "ts/components/conversation/ConversationHeader.tsx",
|
||||
"line": " this.headerRef = React.createRef();",
|
||||
"line": " const headerRef = useRef<HTMLDivElement>(null);",
|
||||
"reasonCategory": "usageTrusted",
|
||||
"updated": "2021-01-18T22:24:05.937Z",
|
||||
"reasonDetail": "Used to reference popup menu boundaries element"
|
||||
"updated": "2024-03-15T18:29:48.327Z"
|
||||
},
|
||||
{
|
||||
"rule": "React-useRef",
|
||||
|
|
|
|||
Loading…
Reference in a new issue