Moves message details into React pane land

2022-12-21 15:44:23 -05:00 · 2022-12-21 15:44:23 -05:00 · a80c6d89a8
commit a80c6d89a8
parent 3def746014
20 changed files with 501 additions and 558 deletions
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@ -462,7 +462,7 @@ export function CompositionArea({
        recentStickers={recentStickers}
        clearInstalledStickerPack={clearInstalledStickerPack}
        onClickAddPack={() =>
-          pushPanelForConversation(conversationId, {
+          pushPanelForConversation({
            type: PanelType.StickerManager,
          })
        }
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@ -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,
              });
            }
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -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,
--- a/ts/components/conversation/MessageAudio.tsx
+++ b/ts/components/conversation/MessageAudio.tsx
@ -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}
--- a/ts/components/conversation/MessageMetadata.tsx
+++ b/ts/components/conversation/MessageMetadata.tsx
@ -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 },
              });
--- a/ts/components/conversation/TimelineMessage.tsx
+++ b/ts/components/conversation/TimelineMessage.tsx
@ -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 },
          })
--- a/ts/components/conversation/conversation-details/ConversationDetails.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.tsx
@ -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,
          })
        }