Add getAvatarFromUser and getAvatarFromMessage

We duplicate the same trivaial code for extracting an avatar's url
either from a User object or a Message object.

This code extracts that into two utility functions and replaces the
duplicate code with function calls. DRY.

src/common/OwnAvatar.js

@@ -5,8 +5,7 @@ import { connect } from 'react-redux';
 import type { GlobalState, User } from '../types';
 import { getCurrentRealm, getSelfUserDetail } from '../selectors';
 import ImageAvatar from './ImageAvatar';
-import { getFullUrl } from '../utils/url';
-import { getGravatarFromEmail } from '../utils/avatar';
+import { getAvatarFromUser } from '../utils/avatar';
 
 type Props = {|
   user: User,
@@ -31,11 +30,7 @@ class OwnAvatar extends PureComponent<Props> {
 
   render() {
     const { user, size, realm, shape } = this.props;
-    const fullAvatarUrl =
-      typeof user.avatar_url === 'string'
-        ? getFullUrl(user.avatar_url, realm)
-        : getGravatarFromEmail(user.email);
-
+    const fullAvatarUrl = getAvatarFromUser(user, realm);
     return <ImageAvatar avatarUrl={fullAvatarUrl} size={size} shape={shape} />;
   }
 }

src/lightbox/Lightbox.js

@@ -14,7 +14,7 @@ import LightboxHeader from './LightboxHeader';
 import LightboxFooter from './LightboxFooter';
 import { constructActionSheetButtons, executeActionSheetAction } from './LightboxActionSheet';
 import { NAVBAR_SIZE } from '../styles';
-import { getGravatarFromEmail } from '../utils/avatar';
+import { getAvatarFromMessage } from '../utils/avatar';
 import { navigateBack } from '../actions';
 
 const styles = StyleSheet.create({
@@ -113,7 +113,7 @@ class Lightbox extends PureComponent<Props, State> {
           <LightboxHeader
             onPressBack={this.handlePressBack}
             timestamp={message.timestamp}
-            avatarUrl={message.avatar_url || getGravatarFromEmail(message.sender_email)}
+            avatarUrl={getAvatarFromMessage(message)}
             senderName={message.sender_full_name}
           />
         </SlideAnimationView>

src/utils/__tests__/avatar-test.js

@@ -1,4 +1,4 @@
-/* @flow strict */
+/* @flow strict-local */
 import { getMediumAvatar, getGravatarFromEmail } from '../avatar';
 
 // avatarUrl can be converted to retrieve medium sized avatars(mediumAvatarUrl) if and only if

src/utils/avatar.js

@@ -1,6 +1,9 @@
-/* @flow strict */
+/* @flow strict-local */
 import md5 from 'blueimp-md5';
 
+import type { Message, Outbox, User } from '../types';
+import { getFullUrl } from './url';
+
 export const getMediumAvatar = (avatarUrl: string): string => {
   const matches = new RegExp(/(\w+)\.png/g).exec(avatarUrl);
 
@@ -9,3 +12,13 @@ export const getMediumAvatar = (avatarUrl: string): string => {
 
 export const getGravatarFromEmail = (email: string = '', size: number = 80): string =>
   `https://secure.gravatar.com/avatar/${md5(email.toLowerCase())}?d=identicon&s=${size}`;
+
+export const getAvatarFromUser = (user: User, realm: string): string =>
+  typeof user.avatar_url === 'string'
+    ? getFullUrl(user.avatar_url, realm)
+    : getGravatarFromEmail(user.email);
+
+export const getAvatarFromMessage = (message: Message | Outbox): string =>
+  typeof message.avatar_url === 'string'
+    ? message.avatar_url
+    : getGravatarFromEmail(message.sender_email);

src/webview/html/messageAsHtml.js

@@ -10,7 +10,7 @@ import type {
   RealmEmojiType,
 } from '../../types';
 import type { BackgroundData } from '../MessageList';
-import { getGravatarFromEmail } from '../../utils/avatar';
+import { getAvatarFromMessage } from '../../utils/avatar';
 import { shortTime } from '../../utils/date';
 import aggregateReactions from '../../reactions/aggregateReactions';
 import { codeToEmojiMap } from '../../emoji/data';
@@ -96,10 +96,7 @@ $!${divOpenHtml}
   }
 
   const { sender_full_name, sender_email, timestamp } = message;
-  const avatarUrl =
-    typeof message.avatar_url === 'string'
-      ? message.avatar_url
-      : getGravatarFromEmail(message.sender_email);
+  const avatarUrl = getAvatarFromMessage(message);
   const subheaderHtml = template`
 <div class="subheader">
   <div class="username">

src/webview/html/messageTypingAsHtml.js

@@ -1,19 +1,14 @@
 /* @flow strict-local */
 import template from './template';
 import type { User } from '../../types';
-import { getFullUrl } from '../../utils/url';
-import { getGravatarFromEmail } from '../../utils/avatar';
+import { getAvatarFromUser } from '../../utils/avatar';
 
 const typingAvatar = (realm: string, user: User): string => template`
 <div class="avatar">
   <img
     class="avatar-img"
     data-email="${user.email}"
-    src="${
-      typeof user.avatar_url === 'string'
-        ? getFullUrl(user.avatar_url, realm)
-        : getGravatarFromEmail(user.email)
-    }">
+    src="${getAvatarFromUser(user, realm)}">
 </div>
 `;