From 5aef50b89ede5b82bcb5e482407a85b2af17503e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 16:44:19 -0500
Subject: [PATCH] Composer: refactor filename truncation

---
 app/soapbox/components/media_gallery.js | 16 ++++------------
 app/soapbox/utils/media.js              | 10 ++++++++++
 2 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 app/soapbox/utils/media.js

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 0fc7dcb67..845b68db2 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -6,6 +6,7 @@ import { is } from 'immutable';
 import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { isIOS } from '../is_mobile';
+import { truncateFilename } from 'soapbox/utils/media';
 import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
@@ -14,6 +15,8 @@ import { getSettings } from 'soapbox/actions/settings';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
 
+const MAX_FILENAME_LENGTH = 45;
+
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
 });
@@ -142,19 +145,8 @@ class Item extends React.PureComponent {
 
     let thumbnail = '';
 
-    const MAX_FILENAME_LENGTH = 45;
-    const getCroppedFilename = () => {
-      const remoteURL = attachment.get('remote_url');
-      const filenameLastIndex = remoteURL.lastIndexOf('/');
-      const filename = remoteURL.substr(filenameLastIndex + 1);
-      if (filename.length <= MAX_FILENAME_LENGTH)
-        return filename;
-      else
-        return filename.substr(0, MAX_FILENAME_LENGTH/2) + '...' + filename.substr(filename.length - MAX_FILENAME_LENGTH/2);
-    };
-
     if (attachment.get('type') === 'unknown') {
-      const filename = getCroppedFilename();
+      const filename = truncateFilename(attachment.get('remote_url'), MAX_FILENAME_LENGTH);
       return (
         <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
           <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
diff --git a/app/soapbox/utils/media.js b/app/soapbox/utils/media.js
new file mode 100644
index 000000000..c8266c646
--- /dev/null
+++ b/app/soapbox/utils/media.js
@@ -0,0 +1,10 @@
+export const truncateFilename = (url, maxLength) => {
+  const filename = url.split('/').pop();
+
+  if (filename.length <= maxLength) return filename;
+
+  return [
+    filename.substr(0, maxLength/2),
+    filename.substr(filename.length - maxLength/2),
+  ].join('…');
+};