make timer notification work with empty profile name (display pubkey)

js/modules/signal.js

@@ -104,9 +104,6 @@ const {
   MessageDetail,
 } = require('../../ts/components/conversation/MessageDetail');
 const { Quote } = require('../../ts/components/conversation/Quote');
-const {
-  TimerNotification,
-} = require('../../ts/components/conversation/TimerNotification');
 const {
   TypingBubble,
 } = require('../../ts/components/conversation/TypingBubble');
@@ -287,7 +284,6 @@ exports.setup = (options = {}) => {
     MessageBody,
     MessageDetail,
     Quote,
-    TimerNotification,
     Types: {
       Message: MediaGalleryMessage,
     },

stylesheets/_modules.scss

@@ -890,6 +890,12 @@
   text-align: center;
 }
 
+.module-timer-notification__contact {
+  font-family: 'Public Sans';
+  font-weight: bold;
+  padding-inline-end: $session-margin-xs;
+}
+
 .module-timer-notification__icon-container {
   margin-inline-start: auto;
   margin-inline-end: auto;
@@ -931,7 +937,6 @@
   & > div {
     align-self: center;
     justify-self: center;
-    display: flex;
     align-items: center;
     justify-content: center;
   }

ts/components/conversation/ContactName.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { Emojify } from './Emojify';
 import { LocalizerType } from '../../types/Util';
 
-interface Props {
+type Props = {
   phoneNumber: string;
   name?: string;
   profileName?: string;
@@ -13,48 +13,46 @@ interface Props {
   boldProfileName?: Boolean;
   compact?: Boolean;
   shouldShowPubkey: Boolean;
-}
+};
 
-export class ContactName extends React.Component<Props> {
-  public render() {
-    const {
-      phoneNumber,
-      name,
-      profileName,
-      i18n,
-      module,
-      boldProfileName,
-      compact,
-      shouldShowPubkey,
-    } = this.props;
-    const prefix = module ? module : 'module-contact-name';
+export const ContactName = (props: Props) => {
+  const {
+    phoneNumber,
+    name,
+    profileName,
+    i18n,
+    module,
+    boldProfileName,
+    compact,
+    shouldShowPubkey,
+  } = props;
+  const prefix = module ? module : 'module-contact-name';
 
-    const title = name ? name : phoneNumber;
-    const shouldShowProfile = Boolean(profileName || name);
-    const styles = (boldProfileName
-      ? {
-          fontWeight: 'bold',
-        }
-      : {}) as React.CSSProperties;
-    const textProfile = profileName || name || i18n('anonymous');
-    const profileElement = shouldShowProfile ? (
-      <span style={styles} className={`${prefix}__profile-name`}>
-        <Emojify text={textProfile} i18n={i18n} />
-      </span>
-    ) : null;
+  const title = name ? name : phoneNumber;
+  const shouldShowProfile = Boolean(profileName || name);
+  const styles = (boldProfileName
+    ? {
+        fontWeight: 'bold',
+      }
+    : {}) as React.CSSProperties;
+  const textProfile = profileName || name || i18n('anonymous');
+  const profileElement = shouldShowProfile ? (
+    <span style={styles} className={`${prefix}__profile-name`}>
+      <Emojify text={textProfile} i18n={i18n} />
+    </span>
+  ) : null;
 
-    const pubKeyElement = shouldShowPubkey ? (
-      <span className={`${prefix}__profile-number`}>
-        <Emojify text={title} i18n={i18n} />
-      </span>
-    ) : null;
+  const pubKeyElement = shouldShowPubkey ? (
+    <span className={`${prefix}__profile-number`}>
+      <Emojify text={title} i18n={i18n} />
+    </span>
+  ) : null;
 
-    return (
-      <span className={classNames(prefix, compact && 'compact')} dir="auto">
-        {profileElement}
-        {shouldShowProfile ? ' ' : null}
-        {pubKeyElement}
-      </span>
-    );
-  }
-}
+  return (
+    <span className={classNames(prefix, compact && 'compact')} dir="auto">
+      {profileElement}
+      {shouldShowProfile ? ' ' : null}
+      {pubKeyElement}
+    </span>
+  );
+};

ts/components/conversation/GroupNotification.tsx

@@ -17,14 +17,13 @@ interface Change {
   contacts?: Array<Contact>;
 }
 
-interface Props {
+type Props = {
   changes: Array<Change>;
-}
+};
 
 // This component is used to display group updates in the conversation view.
 // This is a not a "notification" as the name suggests, but a message inside the conversation
 export const GroupNotification = (props: Props) => {
-
   function renderChange(change: Change) {
     const { isMe, contacts, type, newName } = change;
     const { i18n } = window;
@@ -93,7 +92,6 @@ export const GroupNotification = (props: Props) => {
     }
   }
 
-
   const { changes } = props;
   return (
     <div className="module-group-notification">
@@ -104,5 +102,4 @@ export const GroupNotification = (props: Props) => {
       ))}
     </div>
   );
-
-}
+};

ts/components/conversation/TimerNotification.tsx

@@ -2,30 +2,34 @@ import React from 'react';
 
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
-import { LocalizerType } from '../../types/Util';
 
 import { missingCaseError } from '../../util/missingCaseError';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
 
-interface Props {
+type Props = {
   type: 'fromOther' | 'fromMe' | 'fromSync';
   phoneNumber: string;
   profileName?: string;
   name?: string;
   disabled: boolean;
   timespan: string;
-}
+};
 
-export class TimerNotification extends React.Component<Props> {
-  public renderContents() {
-    const { phoneNumber, profileName, timespan, type, disabled } = this.props;
+export const TimerNotification = (props: Props) => {
+  function renderContents() {
+    const { phoneNumber, profileName, timespan, type, disabled } = props;
     const changeKey = disabled
       ? 'disabledDisappearingMessages'
       : 'theyChangedTheTimer';
 
-    const displayedPubkey = profileName
-      ? window.shortenPubkey(phoneNumber)
-      : phoneNumber;
+    const contact = (
+      <span
+        key={`external-${phoneNumber}`}
+        className="module-timer-notification__contact"
+      >
+        {profileName || phoneNumber}
+      </span>
+    );
 
     switch (type) {
       case 'fromOther':
@@ -33,19 +37,7 @@ export class TimerNotification extends React.Component<Props> {
           <Intl
             i18n={window.i18n}
             id={changeKey}
-            components={[
-              <ContactName
-                i18n={window.i18n}
-                key="external-1"
-                phoneNumber={displayedPubkey}
-                profileName={profileName}
-                name={name}
-                module="module-message__author"
-                boldProfileName={true}
-                shouldShowPubkey={false}
-              />,
-              timespan,
-            ]}
+            components={[contact, timespan]}
           />
         );
       case 'fromMe':
@@ -61,21 +53,19 @@ export class TimerNotification extends React.Component<Props> {
     }
   }
 
-  public render() {
-    return (
-      <div className="module-timer-notification">
-        <div className="module-timer-notification__message">
-          <div>
-            <SessionIcon
-              iconType={SessionIconType.Stopwatch}
-              iconSize={SessionIconSize.Small}
-              iconColor={'#ABABAB'}
-            />
-          </div>
-
-          <div>{this.renderContents()}</div>
+  return (
+    <div className="module-timer-notification">
+      <div className="module-timer-notification__message">
+        <div>
+          <SessionIcon
+            iconType={SessionIconType.Stopwatch}
+            iconSize={SessionIconSize.Small}
+            iconColor={'#ABABAB'}
+          />
         </div>
+
+        <div>{renderContents()}</div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};