Consolidate fileSize formatting logic

Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>

ts/components/DialogUpdate.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import formatFileSize from 'filesize';
 
 import { isBeta } from '../util/version';
 import { DialogType } from '../types/Dialogs';
@@ -11,6 +10,7 @@ import { PRODUCTION_DOWNLOAD_URL, BETA_DOWNLOAD_URL } from '../types/support';
 import { Intl } from './Intl';
 import { LeftPaneDialog } from './LeftPaneDialog';
 import type { WidthBreakpoint } from './_util';
+import { formatFileSize } from '../util/formatFileSize';
 
 export type PropsType = {
   containerWidthBreakpoint: WidthBreakpoint;
@@ -195,7 +195,7 @@ export function DialogUpdate({
     (dialogType === DialogType.DownloadReady ||
       dialogType === DialogType.FullDownloadReady)
   ) {
-    title += ` (${formatFileSize(downloadSize, { round: 0 })})`;
+    title += ` (${formatFileSize(downloadSize)})`;
   }
 
   let clickLabel = i18n('icu:autoUpdateNewVersionMessage');

ts/components/StoryDetailsModal.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import formatFileSize from 'filesize';
 import type { LocalizerType } from '../types/Util';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { StorySendStateType, StoryViewType } from '../types/Stories';
@@ -21,6 +20,7 @@ import { ThemeType } from '../types/Util';
 import { Time } from './Time';
 import { groupBy } from '../util/mapUtil';
 import { format as formatRelativeTime } from '../util/expirationTimer';
+import { formatFileSize } from '../util/formatFileSize';
 
 export type PropsType = {
   getPreferredBadge: PreferredBadgeSelectorType;

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import moment from 'moment';
-import formatFileSize from 'filesize';
+import { formatFileSize } from '../../../util/formatFileSize';
 
 export type Props = {
   // Required
@@ -43,9 +43,7 @@ export function DocumentListItem({
             {fileName}
           </span>
           <span className="module-document-list-item__file-size">
-            {typeof fileSize === 'number'
+            {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
-              ? formatFileSize(fileSize, { round: 0 })
-              : ''}
           </span>
         </div>
         <div className="module-document-list-item__date">

ts/components/installScreen/InstallScreenUpdateDialog.tsx

@@ -3,7 +3,6 @@
 
 import React from 'react';
 import { noop } from 'lodash';
-import formatFileSize from 'filesize';
 
 import { DialogType } from '../../types/Dialogs';
 import type { LocalizerType } from '../../types/Util';
@@ -17,6 +16,7 @@ import { isBeta } from '../../util/version';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import { Modal } from '../Modal';
 import { Intl } from '../Intl';
+import { formatFileSize } from '../../util/formatFileSize';
 
 export type PropsType = UpdatesStateType &
   Readonly<{
@@ -91,7 +91,7 @@ export function InstallScreenUpdateDialog({
           components={{
             downloadSize: (
               <span className="InstallScreenUpdateDialog__download-size">
-                ({formatFileSize(downloadSize ?? 0, { round: 0 })})
+                ({formatFileSize(downloadSize ?? 0)})
               </span>
             ),
           }}

ts/state/selectors/message.ts

@@ -3,7 +3,6 @@
 
 import { groupBy, isEmpty, isNumber, isObject, map } from 'lodash';
 import { createSelector } from 'reselect';
-import filesize from 'filesize';
 import getDirection from 'direction';
 import emojiRegex from 'emoji-regex';
 import LinkifyIt from 'linkify-it';
@@ -141,6 +140,7 @@ import { CallDirection } from '../../types/CallDisposition';
 import { getCallIdFromEra } from '../../util/callDisposition';
 import { LONG_MESSAGE } from '../../types/MIME';
 import type { MessageRequestResponseNotificationData } from '../../components/conversation/MessageRequestResponseNotification';
+import { formatFileSize } from '../../util/formatFileSize';
 
 export { isIncoming, isOutgoing, isStory };
 
@@ -1806,7 +1806,7 @@ export function getPropsForAttachment(
 
   return {
     ...attachment,
-    fileSize: size ? filesize(size) : undefined,
+    fileSize: size ? formatFileSize(size) : undefined,
     isVoiceMessage: isVoiceMessage(attachment),
     pending,
     url: path ? getAttachmentUrlForPath(path) : undefined,

ts/util/formatFileSize.ts

@@ -0,0 +1,7 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import filesize from 'filesize';
+
+export function formatFileSize(size: number): string {
+  return filesize(size, { round: 0 });
+}