Confine message selector cache to component

2023-01-19 11:56:02 -08:00 · 2023-01-19 11:56:02 -08:00 · ef13eb06fc
commit ef13eb06fc
parent 7f0ed2599d
11 changed files with 395 additions and 311 deletions
--- a/package.json
+++ b/package.json
@ -86,7 +86,7 @@
  "dependencies": {
    "@formatjs/fast-memoize": "1.2.6",
    "@indutny/frameless-titlebar": "2.3.5",
-    "@indutny/sneequals": "3.2.0",
+    "@indutny/sneequals": "4.0.0",
    "@popperjs/core": "2.11.6",
    "@react-spring/web": "9.5.5",
    "@signalapp/better-sqlite3": "8.1.1",
--- a/ts/hooks/useProxySelector.ts
+++ b/ts/hooks/useProxySelector.ts
@ -0,0 +1,23 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { memoize } from '@indutny/sneequals';
+
+import type { StateType } from '../state/reducer';
+
+export function useProxySelector<Params extends Array<unknown>, Result>(
+  selector: (state: StateType, ...params: Params) => Result,
+  ...params: Params
+): Result {
+  const memoized = useMemo(() => memoize(selector), [selector]);
+
+  return useSelector(
+    useCallback(
+      (state: StateType) => memoized(state, ...params),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [memoized, ...params]
+    )
+  );
+}
--- a/ts/state/ducks/calling.ts
+++ b/ts/state/ducks/calling.ts
@ -55,6 +55,8 @@ import { ToastType } from '../../types/Toast';
 import type { ShowToastActionType } from './toast';
 import { singleProtoJobQueue } from '../../jobs/singleProtoJobQueue';
 import MessageSender from '../../textsecure/SendMessage';
+import type { BoundActionCreatorsMapObject } from '../../hooks/useBoundActions';
+import { useBoundActions } from '../../hooks/useBoundActions';

 // State

@ -1566,6 +1568,10 @@ export const actions = {
  toggleSpeakerView,
 };

+export const useCallingActions = (): BoundActionCreatorsMapObject<
+  typeof actions
+> => useBoundActions(actions);
+
 export type ActionsType = ReadonlyDeep<typeof actions>;

 // Reducer
--- a/ts/state/selectors/message.ts
+++ b/ts/state/selectors/message.ts
@ -7,7 +7,6 @@ import filesize from 'filesize';
 import getDirection from 'direction';
 import emojiRegex from 'emoji-regex';
 import LinkifyIt from 'linkify-it';
-import { memoize } from '@indutny/sneequals';

 import type { StateType } from '../reducer';
 import type {
@ -269,8 +268,7 @@ export function getConversation(

 // Message

-export const getAttachmentsForMessage = memoize(
-  ({
+export const getAttachmentsForMessage = ({
  sticker,
  attachments = [],
 }: MessageWithUIFieldsType): Array<AttachmentType> => {
@ -298,11 +296,9 @@ export const getAttachmentsForMessage = memoize(
    .filter(attachment => !attachment.error || canBeDownloaded(attachment))
    .map(attachment => getPropsForAttachment(attachment))
    .filter(isNotNil);
-  }
-);
+};

-export const processBodyRanges = memoize(
-  (
+export const processBodyRanges = (
  { bodyRanges }: Pick<MessageWithUIFieldsType, 'bodyRanges'>,
  options: { conversationSelector: GetConversationByIdType }
 ): HydratedBodyRangesType | undefined => {
@ -323,8 +319,7 @@ export const processBodyRanges = memoize(
      };
    })
    .sort((a, b) => b.start - a.start);
-  }
-);
+};

 const getAuthorForMessage = (
  message: MessageWithUIFieldsType,
@ -482,8 +477,7 @@ const getPropsForStoryReplyContext = (
  };
 };

-export const getPropsForQuote = memoize(
-  (
+export const getPropsForQuote = (
  message: Pick<
    MessageWithUIFieldsType,
    'conversationId' | 'quote' | 'payment'
@ -548,8 +542,7 @@ export const getPropsForQuote = memoize(
    sentAt: Number(sentAt),
    text,
  };
-  }
-);
+};

 export type GetPropsForMessageOptions = Pick<
  GetPropsForBubbleOptions,
@ -632,8 +625,7 @@ function getTextDirection(body?: string): TextDirection {
  }
 }

-export const getPropsForMessage = memoize(
-  (
+export const getPropsForMessage = (
  message: MessageWithUIFieldsType,
  options: GetPropsForMessageOptions
 ): Omit<PropsForMessage, 'renderingContext' | 'menu' | 'contextMenu'> => {
@ -673,8 +665,7 @@ export const getPropsForMessage = memoize(
  const isSelected = message.id === selectedMessageId;

  const selectedReaction = (
-      (message.reactions || []).find(re => re.fromId === ourConversationId) ||
-      {}
+    (message.reactions || []).find(re => re.fromId === ourConversationId) || {}
  ).emoji;

  const authorId = getContactId(message, {
@ -737,8 +728,7 @@ export const getPropsForMessage = memoize(
    textDirection: getTextDirection(message.body),
    timestamp: message.sent_at,
  };
-  }
-);
+};

 // This is getPropsForMessage but wrapped in reselect's createSelector so that
 // we can derive all of the selector dependencies that getPropsForMessage
@ -1067,7 +1057,7 @@ function getPropsForTimerNotification(
  const { expireTimer, fromSync, source, sourceUuid } = timerUpdate;
  const disabled = !expireTimer;
  const sourceId = sourceUuid || source;
-  const formattedContact = conversationSelector(sourceId);
+  const { id: formattedContactId, title } = conversationSelector(sourceId);

  // Pacify typescript
  type MaybeExpireTimerType =
@ -1087,7 +1077,7 @@ function getPropsForTimerNotification(
      };

  const basicProps = {
-    ...formattedContact,
+    title,
    ...maybeExpireTimer,
    type: 'fromOther' as const,
  };
@ -1098,7 +1088,7 @@ function getPropsForTimerNotification(
      type: 'fromSync' as const,
    };
  }
-  if (formattedContact.id === ourConversationId) {
+  if (formattedContactId === ourConversationId) {
    return {
      ...basicProps,
      type: 'fromMe' as const,
--- a/ts/state/selectors/timeline.ts
+++ b/ts/state/selectors/timeline.ts
@ -1,11 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import { memoize } from '@indutny/sneequals';
 import type { TimelineItemType } from '../../components/conversation/TimelineItem';

 import type { StateType } from '../reducer';
-import type { MessageWithUIFieldsType } from '../ducks/conversations';
 import {
  getContactNameColorSelector,
  getConversationSelector,
@ -23,8 +21,21 @@ import {
 import { getActiveCall, getCallSelector } from './calling';
 import { getPropsForBubble } from './message';

-const getTimelineItemInner = memoize(
-  (message: MessageWithUIFieldsType, state: StateType): TimelineItemType => {
+export const getTimelineItem = (
+  state: StateType,
+  id?: string
+): TimelineItemType | undefined => {
+  if (id === undefined) {
+    return undefined;
+  }
+
+  const messageLookup = getMessages(state);
+
+  const message = messageLookup[id];
+  if (!message) {
+    return undefined;
+  }
+
  const selectedMessage = getSelectedMessage(state);
  const conversationSelector = getConversationSelector(state);
  const regionCode = getRegionCode(state);
@ -51,19 +62,4 @@ const getTimelineItemInner = memoize(
    activeCall,
    accountSelector,
  });
-  }
-);
-
-export const getTimelineItem = (
-  state: StateType,
-  id: string
-): TimelineItemType | undefined => {
-  const messageLookup = getMessages(state);
-
-  const message = messageLookup[id];
-  if (!message) {
-    return undefined;
-  }
-
-  return getTimelineItemInner(message, state);
 };
--- a/ts/state/smart/Timeline.tsx
+++ b/ts/state/smart/Timeline.tsx
@ -32,9 +32,6 @@ import { SmartContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog'
 import type { PropsType as SmartContactSpoofingReviewDialogPropsType } from './ContactSpoofingReviewDialog';
 import { SmartTypingBubble } from './TypingBubble';
 import { SmartHeroRow } from './HeroRow';
-import { renderAudioAttachment } from './renderAudioAttachment';
-import { renderEmojiPicker } from './renderEmojiPicker';
-import { renderReactionPicker } from './renderReactionPicker';

 import { getOwn } from '../../util/getOwn';
 import { assertDev } from '../../util/assert';
@ -82,9 +79,6 @@ function renderItem({
      messageId={messageId}
      previousMessageId={previousMessageId}
      nextMessageId={nextMessageId}
-      renderEmojiPicker={renderEmojiPicker}
-      renderReactionPicker={renderReactionPicker}
-      renderAudioAttachment={renderAudioAttachment}
      unreadIndicatorPlacement={unreadIndicatorPlacement}
    />
  );
--- a/ts/state/smart/TimelineItem.tsx
+++ b/ts/state/smart/TimelineItem.tsx
@ -3,18 +3,21 @@

 import type { RefObject } from 'react';
 import React from 'react';
-import { connect } from 'react-redux';
-
-import { mapDispatchToProps } from '../actions';
-import type { StateType } from '../reducer';
+import { useSelector } from 'react-redux';

 import { TimelineItem } from '../../components/conversation/TimelineItem';
+import type { WidthBreakpoint } from '../../components/_util';
+import { useProxySelector } from '../../hooks/useProxySelector';
+import { useConversationsActions } from '../ducks/conversations';
+import { useComposerActions } from '../ducks/composer';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { useAccountsActions } from '../ducks/accounts';
+import { useLightboxActions } from '../ducks/lightbox';
+import { useStoriesActions } from '../ducks/stories';
+import { useCallingActions } from '../ducks/calling';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getIntl, getInteractionMode, getTheme } from '../selectors/user';
-import {
-  getConversationSelector,
-  getSelectedMessage,
-} from '../selectors/conversations';
+import { getSelectedMessage } from '../selectors/conversations';
 import { getTimelineItem } from '../selectors/timeline';
 import {
  areMessagesInSameGroup,
@ -25,9 +28,13 @@ import {
 import { SmartContactName } from './ContactName';
 import { SmartUniversalTimerNotification } from './UniversalTimerNotification';
 import { isSameDay } from '../../util/timestamp';
+import { renderAudioAttachment } from './renderAudioAttachment';
+import { renderEmojiPicker } from './renderEmojiPicker';
+import { renderReactionPicker } from './renderReactionPicker';

 type ExternalProps = {
  containerElementRef: RefObject<HTMLElement>;
+  containerWidthBreakpoint: WidthBreakpoint;
  conversationId: string;
  isOldestTimelineItem: boolean;
  messageId: string;
@ -44,9 +51,10 @@ function renderUniversalTimerNotification(): JSX.Element {
  return <SmartUniversalTimerNotification />;
 }

-const mapStateToProps = (state: StateType, props: ExternalProps) => {
+export function SmartTimelineItem(props: ExternalProps): JSX.Element {
  const {
    containerElementRef,
+    containerWidthBreakpoint,
    conversationId,
    isOldestTimelineItem,
    messageId,
@ -55,21 +63,19 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
    unreadIndicatorPlacement,
  } = props;

-  const item = getTimelineItem(state, messageId);
-  const previousItem = previousMessageId
-    ? getTimelineItem(state, previousMessageId)
-    : undefined;
-  const nextItem = nextMessageId
-    ? getTimelineItem(state, nextMessageId)
-    : undefined;
+  const i18n = useSelector(getIntl);
+  const getPreferredBadge = useSelector(getPreferredBadgeSelector);
+  const interactionMode = useSelector(getInteractionMode);
+  const theme = useSelector(getTheme);
+  const item = useProxySelector(getTimelineItem, messageId);
+  const previousItem = useProxySelector(getTimelineItem, previousMessageId);
+  const nextItem = useProxySelector(getTimelineItem, nextMessageId);

-  const selectedMessage = getSelectedMessage(state);
+  const selectedMessage = useSelector(getSelectedMessage);
  const isSelected = Boolean(
    selectedMessage && messageId === selectedMessage.id
  );

-  const conversation = getConversationSelector(state)(conversationId);
-
  const isNextItemCallingNotification = nextItem?.type === 'callHistory';

  const shouldCollapseAbove = areMessagesInSameGroup(
@ -97,28 +103,96 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
        !isSameDay(previousItem.timestamp, item.timestamp)
    );

-  return {
-    item,
-    id: messageId,
-    containerElementRef,
-    conversationId,
-    conversationColor: conversation.conversationColor,
-    customColor: conversation.customColor,
-    getPreferredBadge: getPreferredBadgeSelector(state),
-    isNextItemCallingNotification,
-    isSelected,
-    renderContact,
-    renderUniversalTimerNotification,
-    shouldCollapseAbove,
-    shouldCollapseBelow,
-    shouldHideMetadata,
-    shouldRenderDateHeader,
-    i18n: getIntl(state),
-    interactionMode: getInteractionMode(state),
-    theme: getTheme(state),
-  };
-};
+  const {
+    blockGroupLinkRequests,
+    clearSelectedMessage,
+    deleteMessage,
+    deleteMessageForEveryone,
+    doubleCheckMissingQuoteReference,
+    kickOffAttachmentDownload,
+    markAttachmentAsCorrupted,
+    messageExpanded,
+    openGiftBadge,
+    pushPanelForConversation,
+    retryDeleteForEveryone,
+    retryMessageSend,
+    saveAttachment,
+    selectMessage,
+    showConversation,
+    showExpiredIncomingTapToViewToast,
+    showExpiredOutgoingTapToViewToast,
+    startConversation,
+  } = useConversationsActions();

-const smart = connect(mapStateToProps, mapDispatchToProps);
+  const { reactToMessage, scrollToQuotedMessage, setQuoteByMessageId } =
+    useComposerActions();

-export const SmartTimelineItem = smart(TimelineItem);
+  const {
+    showContactModal,
+    toggleForwardMessageModal,
+    toggleSafetyNumberModal,
+  } = useGlobalModalActions();
+
+  const { checkForAccount } = useAccountsActions();
+
+  const { showLightbox, showLightboxForViewOnceMedia } = useLightboxActions();
+
+  const { viewStory } = useStoriesActions();
+
+  const { returnToActiveCall, startCallingLobby } = useCallingActions();
+
+  return (
+    <TimelineItem
+      item={item}
+      id={messageId}
+      containerElementRef={containerElementRef}
+      containerWidthBreakpoint={containerWidthBreakpoint}
+      conversationId={conversationId}
+      getPreferredBadge={getPreferredBadge}
+      isNextItemCallingNotification={isNextItemCallingNotification}
+      isSelected={isSelected}
+      renderAudioAttachment={renderAudioAttachment}
+      renderContact={renderContact}
+      renderEmojiPicker={renderEmojiPicker}
+      renderReactionPicker={renderReactionPicker}
+      renderUniversalTimerNotification={renderUniversalTimerNotification}
+      shouldCollapseAbove={shouldCollapseAbove}
+      shouldCollapseBelow={shouldCollapseBelow}
+      shouldHideMetadata={shouldHideMetadata}
+      shouldRenderDateHeader={shouldRenderDateHeader}
+      i18n={i18n}
+      interactionMode={interactionMode}
+      theme={theme}
+      blockGroupLinkRequests={blockGroupLinkRequests}
+      checkForAccount={checkForAccount}
+      clearSelectedMessage={clearSelectedMessage}
+      deleteMessage={deleteMessage}
+      deleteMessageForEveryone={deleteMessageForEveryone}
+      doubleCheckMissingQuoteReference={doubleCheckMissingQuoteReference}
+      kickOffAttachmentDownload={kickOffAttachmentDownload}
+      markAttachmentAsCorrupted={markAttachmentAsCorrupted}
+      messageExpanded={messageExpanded}
+      openGiftBadge={openGiftBadge}
+      pushPanelForConversation={pushPanelForConversation}
+      reactToMessage={reactToMessage}
+      retryDeleteForEveryone={retryDeleteForEveryone}
+      retryMessageSend={retryMessageSend}
+      returnToActiveCall={returnToActiveCall}
+      saveAttachment={saveAttachment}
+      scrollToQuotedMessage={scrollToQuotedMessage}
+      selectMessage={selectMessage}
+      setQuoteByMessageId={setQuoteByMessageId}
+      showContactModal={showContactModal}
+      showConversation={showConversation}
+      showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
+      showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
+      showLightbox={showLightbox}
+      showLightboxForViewOnceMedia={showLightboxForViewOnceMedia}
+      startCallingLobby={startCallingLobby}
+      startConversation={startConversation}
+      toggleForwardMessageModal={toggleForwardMessageModal}
+      toggleSafetyNumberModal={toggleSafetyNumberModal}
+      viewStory={viewStory}
+    />
+  );
+}
--- a/ts/test-mock/benchmarks/group_send_bench.ts
+++ b/ts/test-mock/benchmarks/group_send_bench.ts
@ -123,7 +123,10 @@ void (async () => {
      const leftPane = window.locator('.left-pane-wrapper');

      const item = leftPane
-        .locator('.module-conversation-list__item--contact-or-conversation')
+        .locator(
+          '.module-conversation-list__item--contact-or-conversation' +
+            `>> text=${LAST_MESSAGE}`
+        )
        .first();
      await item.click();
    }
--- a/ts/test-mock/benchmarks/send_bench.ts
+++ b/ts/test-mock/benchmarks/send_bench.ts
@ -75,7 +75,7 @@ void (async () => {
    {
      const leftPane = window.locator('.left-pane-wrapper');
      const item = leftPane.locator(
-        `[data-testid="${first.toContact().uuid}"]`
+        `[data-testid="${first.toContact().uuid}"] >> text=${LAST_MESSAGE}`
      );
      await item.click();
    }
--- a/ts/util/getOwn.ts
+++ b/ts/util/getOwn.ts
@ -1,11 +1,9 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import { has } from 'lodash';
-
 export function getOwn<TObject extends object, TKey extends keyof TObject>(
  obj: TObject,
  key: TKey
 ): TObject[TKey] | undefined {
-  return has(obj, key) ? obj[key] : undefined;
+  return Object.hasOwn(obj, key) ? obj[key] : undefined;
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1705,10 +1705,10 @@
    classnames "^2.2.6"
    deepmerge "^4.2.2"

-"@indutny/sneequals@3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@indutny/sneequals/-/sneequals-3.2.0.tgz#dd73d097fca6c8a89b1766bb87cc78f32017165d"
-  integrity sha512-dnL/SCNA2BceqJ4J/CR8R+dUCBfHnDBgPFBUv5w7Sa7QRoi2pNplJoundP9b8L8FnVrh4VAVPqM5q3H0f+n6Dg==
+"@indutny/sneequals@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@indutny/sneequals/-/sneequals-4.0.0.tgz#94f74e577019759c5d12818e7c7ff1b9300653a4"
+  integrity sha512-kQUBQtcm4aVqJil+KRfA7SycJqcWlFEa7MJTYyl4XAahHOPXnzgqvlzUPQOw1tRFlvnzxRpXNUpJxej2fdAPjg==

 "@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
  version "0.1.3"