Spam Reporting UI changes

ts/components/conversation/ContactName.tsx

@@ -1,21 +1,47 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 
 import { Emojify } from './Emojify';
 import type { ContactNameColorType } from '../../types/Colors';
 import { getClassNamesFor } from '../../util/getClassNamesFor';
+import type { ConversationType } from '../../state/ducks/conversations';
+import { isSignalConversation as getIsSignalConversation } from '../../util/isSignalConversation';
 
-export type PropsType = {
+export type ContactNameData = {
   contactNameColor?: ContactNameColorType;
   firstName?: string;
   isSignalConversation?: boolean;
   isMe?: boolean;
+  title: string;
+};
+
+export function useContactNameData(
+  conversation: ConversationType | null,
+  contactNameColor?: ContactNameColorType
+): ContactNameData | null {
+  const { firstName, title, isMe } = conversation ?? {};
+  const isSignalConversation =
+    conversation != null ? getIsSignalConversation(conversation) : null;
+  return useMemo(() => {
+    if (title == null || isSignalConversation == null) {
+      return null;
+    }
+    return {
+      contactNameColor,
+      firstName,
+      isSignalConversation,
+      isMe,
+      title,
+    };
+  }, [contactNameColor, firstName, isSignalConversation, isMe, title]);
+}
+
+export type PropsType = ContactNameData & {
   module?: string;
   preferFirstName?: boolean;
-  title: string;
   onClick?: VoidFunction;
 };