Moves message details into React pane land

This commit is contained in:
Josh Perez 2022-12-21 15:44:23 -05:00 committed by GitHub
parent 3def746014
commit a80c6d89a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 501 additions and 558 deletions

View file

@ -462,7 +462,7 @@ export function CompositionArea({
recentStickers={recentStickers}
clearInstalledStickerPack={clearInstalledStickerPack}
onClickAddPack={() =>
pushPanelForConversation(conversationId, {
pushPanelForConversation({
type: PanelType.StickerManager,
})
}

View file

@ -154,12 +154,12 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
private renderBackButton(): ReactNode {
const { i18n, id, popPanelForConversation, showBackButton } = this.props;
const { i18n, popPanelForConversation, showBackButton } = this.props;
return (
<button
type="button"
onClick={() => popPanelForConversation(id)}
onClick={popPanelForConversation}
className={classNames(
'module-ConversationHeader__back-icon',
showBackButton ? 'module-ConversationHeader__back-icon--show' : null
@ -474,7 +474,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
{!isGroup || hasGV2AdminEnabled ? (
<MenuItem
onClick={() =>
pushPanelForConversation(id, {
pushPanelForConversation({
type: PanelType.ConversationDetails,
})
}
@ -487,16 +487,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
{isGroup && !hasGV2AdminEnabled ? (
<MenuItem
onClick={() =>
pushPanelForConversation(id, { type: PanelType.GroupV1Members })
pushPanelForConversation({ type: PanelType.GroupV1Members })
}
>
{i18n('showMembers')}
</MenuItem>
) : null}
<MenuItem
onClick={() =>
pushPanelForConversation(id, { type: PanelType.AllMedia })
}
onClick={() => pushPanelForConversation({ type: PanelType.AllMedia })}
>
{i18n('viewRecentMedia')}
</MenuItem>
@ -565,13 +563,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
}
private renderHeader(): ReactNode {
const {
conversationTitle,
id,
groupVersion,
pushPanelForConversation,
type,
} = this.props;
const { conversationTitle, groupVersion, pushPanelForConversation, type } =
this.props;
if (conversationTitle !== undefined) {
return (
@ -589,14 +582,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
switch (type) {
case 'direct':
onClick = () => {
pushPanelForConversation(id, { type: PanelType.ConversationDetails });
pushPanelForConversation({ type: PanelType.ConversationDetails });
};
break;
case 'group': {
const hasGV2AdminEnabled = groupVersion === 2;
onClick = hasGV2AdminEnabled
? () => {
pushPanelForConversation(id, {
pushPanelForConversation({
type: PanelType.ConversationDetails,
});
}

View file

@ -167,6 +167,7 @@ export type AudioAttachmentProps = {
id: string;
conversationId: string;
played: boolean;
pushPanelForConversation: PushPanelForConversationActionType;
status?: MessageStatusType;
textPending?: boolean;
timestamp: number;
@ -750,27 +751,25 @@ export class Message extends React.PureComponent<Props, State> {
}
const {
conversationId,
deletedForEveryone,
direction,
expirationLength,
expirationTimestamp,
i18n,
id,
isSticker,
isTapToViewExpired,
status,
i18n,
pushPanelForConversation,
status,
text,
textAttachment,
timestamp,
id,
} = this.props;
const isStickerLike = isSticker || this.canRenderStickerLikeEmoji();
return (
<MessageMetadata
conversationId={conversationId}
deletedForEveryone={deletedForEveryone}
direction={direction}
expirationLength={expirationLength}
@ -827,23 +826,24 @@ export class Message extends React.PureComponent<Props, State> {
public renderAttachment(): JSX.Element | null {
const {
attachments,
conversationId,
direction,
expirationLength,
expirationTimestamp,
i18n,
id,
conversationId,
isSticker,
kickOffAttachmentDownload,
markAttachmentAsCorrupted,
pushPanelForConversation,
quote,
readStatus,
reducedMotion,
renderAudioAttachment,
renderingContext,
showLightbox,
shouldCollapseAbove,
shouldCollapseBelow,
showLightbox,
status,
text,
textAttachment,
@ -966,6 +966,7 @@ export class Message extends React.PureComponent<Props, State> {
id,
conversationId,
played,
pushPanelForConversation,
status,
textPending: textAttachment?.pending,
timestamp,
@ -1562,7 +1563,6 @@ export class Message extends React.PureComponent<Props, State> {
public renderEmbeddedContact(): JSX.Element | null {
const {
contact,
conversationId,
conversationType,
direction,
i18n,
@ -1598,7 +1598,7 @@ export class Message extends React.PureComponent<Props, State> {
}
: undefined;
pushPanelForConversation(conversationId, {
pushPanelForConversation({
type: PanelType.ContactDetails,
args: {
contact,
@ -2243,7 +2243,6 @@ export class Message extends React.PureComponent<Props, State> {
const {
attachments,
contact,
conversationId,
showLightboxForViewOnceMedia,
direction,
giftBadge,
@ -2381,7 +2380,7 @@ export class Message extends React.PureComponent<Props, State> {
uuid: contact.uuid,
}
: undefined;
pushPanelForConversation(conversationId, {
pushPanelForConversation({
type: PanelType.ContactDetails,
args: {
contact,

View file

@ -9,6 +9,7 @@ import { animated, useSpring } from '@react-spring/web';
import type { LocalizerType } from '../../types/Util';
import type { AttachmentType } from '../../types/Attachment';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
import { isDownloaded } from '../../types/Attachment';
import type { DirectionType, MessageStatusType } from './Message';
@ -16,7 +17,6 @@ import type { ComputePeaksResult } from '../GlobalAudioContext';
import { MessageMetadata } from './MessageMetadata';
import * as log from '../../logging/log';
import type { ActiveAudioPlayerStateType } from '../../state/ducks/audioPlayer';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
export type OwnProps = Readonly<{
active: ActiveAudioPlayerStateType | undefined;
@ -592,7 +592,6 @@ export function MessageAudio(props: Props): JSX.Element {
{!withContentBelow && !collapseMetadata && (
<MessageMetadata
conversationId={conversationId}
direction={direction}
expirationLength={expirationLength}
expirationTimestamp={expirationTimestamp}

View file

@ -8,14 +8,13 @@ import Measure from 'react-measure';
import type { LocalizerType } from '../../types/Util';
import type { DirectionType, MessageStatusType } from './Message';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
import { ExpireTimer } from './ExpireTimer';
import { MessageTimestamp } from './MessageTimestamp';
import { Spinner } from '../Spinner';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
import { PanelType } from '../../types/Panels';
import { Spinner } from '../Spinner';
type PropsType = {
conversationId: string;
deletedForEveryone?: boolean;
direction: DirectionType;
expirationLength?: number;
@ -35,7 +34,6 @@ type PropsType = {
};
export function MessageMetadata({
conversationId,
deletedForEveryone,
direction,
expirationLength,
@ -80,7 +78,7 @@ export function MessageMetadata({
event.stopPropagation();
event.preventDefault();
pushPanelForConversation(conversationId, {
pushPanelForConversation({
type: PanelType.MessageDetails,
args: { messageId: id },
});

View file

@ -23,12 +23,12 @@ import type {
PropsData as MessagePropsData,
PropsHousekeeping,
} from './Message';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
import { doesMessageBodyOverflow } from './MessageBodyReadMore';
import type { Props as ReactionPickerProps } from './ReactionPicker';
import { ConfirmationDialog } from '../ConfirmationDialog';
import { useToggleReactionPicker } from '../../hooks/useKeyboardShortcuts';
import { PanelType } from '../../types/Panels';
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
export type PropsData = {
canDownload: boolean;
@ -46,8 +46,8 @@ export type PropsActions = {
messageId: string;
}) => void;
deleteMessageForEveryone: (id: string) => void;
toggleForwardMessageModal: (id: string) => void;
pushPanelForConversation: PushPanelForConversationActionType;
toggleForwardMessageModal: (id: string) => void;
reactToMessage: (
id: string,
{ emoji, remove }: { emoji: string; remove: boolean }
@ -75,42 +75,42 @@ type Trigger = {
*/
export function TimelineMessage(props: Props): JSX.Element {
const {
i18n,
id,
author,
attachments,
author,
canDeleteForEveryone,
canDownload,
canReact,
canReply,
canRetry,
canDeleteForEveryone,
canRetryDeleteForEveryone,
contact,
payment,
conversationId,
containerElementRef,
containerWidthBreakpoint,
deletedForEveryone,
conversationId,
deleteMessage,
deleteMessageForEveryone,
deletedForEveryone,
direction,
giftBadge,
i18n,
id,
isSelected,
isSticker,
isTapToView,
kickOffAttachmentDownload,
payment,
pushPanelForConversation,
reactToMessage,
setQuoteByMessageId,
renderReactionPicker,
renderEmojiPicker,
retryMessageSend,
renderReactionPicker,
retryDeleteForEveryone,
retryMessageSend,
saveAttachment,
selectedReaction,
toggleForwardMessageModal,
setQuoteByMessageId,
text,
timestamp,
kickOffAttachmentDownload,
saveAttachment,
toggleForwardMessageModal,
} = props;
const [reactionPickerRoot, setReactionPickerRoot] = useState<
@ -410,7 +410,7 @@ export function TimelineMessage(props: Props): JSX.Element {
canDeleteForEveryone ? () => setHasDOEConfirmation(true) : undefined
}
onMoreInfo={() =>
pushPanelForConversation(conversationId, {
pushPanelForConversation({
type: PanelType.MessageDetails,
args: { messageId: id },
})

View file

@ -441,7 +441,7 @@ export function ConversationDetails({
}
label={i18n('showChatColorEditor')}
onClick={() => {
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.ChatColorEditor,
});
}}
@ -464,7 +464,7 @@ export function ConversationDetails({
}
label={i18n('ConversationDetails--notifications')}
onClick={() =>
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.NotificationSettings,
})
}
@ -520,7 +520,7 @@ export function ConversationDetails({
}
label={i18n('ConversationDetails--group-link')}
onClick={() =>
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.GroupLinkManagement,
})
}
@ -536,7 +536,7 @@ export function ConversationDetails({
}
label={i18n('ConversationDetails--requests-and-invites')}
onClick={() =>
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.GroupInvites,
})
}
@ -552,7 +552,7 @@ export function ConversationDetails({
}
label={i18n('permissions')}
onClick={() =>
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.GroupPermissions,
})
}
@ -566,7 +566,7 @@ export function ConversationDetails({
i18n={i18n}
loadRecentMediaItems={loadRecentMediaItems}
showAllMedia={() =>
pushPanelForConversation(conversation.id, {
pushPanelForConversation({
type: PanelType.AllMedia,
})
}