From 879038ee0bb700249bd06c15187152a6554a7ac0 Mon Sep 17 00:00:00 2001
From: ta264 <ta264@users.noreply.github.com>
Date: Sun, 20 Dec 2020 21:27:26 +0000
Subject: [PATCH] Fixed: Display of album release with many countries

---
 .../Components/Form/AlbumReleaseSelectInputConnector.js    | 3 ++-
 .../AlbumRelease/SelectAlbumReleaseRow.js                  | 3 ++-
 frontend/src/Utilities/String/shortenList.js               | 7 +++++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/Utilities/String/shortenList.js

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index b79c0db1d..026f36dfd 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import shortenList from 'Utilities/String/shortenList';
 import titleCase from 'Utilities/String/titleCase';
 import SelectInput from './SelectInput';
 
@@ -17,7 +18,7 @@ function createMapStateToProps() {
           value: `${albumRelease.title}` +
             `${albumRelease.disambiguation ? ' (' : ''}${titleCase(albumRelease.disambiguation)}${albumRelease.disambiguation ? ')' : ''}` +
             `, ${albumRelease.mediumCount} med, ${albumRelease.trackCount} tracks` +
-            `${albumRelease.country.length > 0 ? ', ' : ''}${albumRelease.country}` +
+            `${albumRelease.country.length > 0 ? ', ' : ''}${shortenList(albumRelease.country)}` +
             `${albumRelease.format ? ', [' : ''}${albumRelease.format}${albumRelease.format ? ']' : ''}`
         };
       });
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index d4f6e55a8..bc90cfec1 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -5,6 +5,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { inputTypes } from 'Helpers/Props';
+import shortenList from 'Utilities/String/shortenList';
 import titleCase from 'Utilities/String/titleCase';
 
 class SelectAlbumReleaseRow extends Component {
@@ -63,7 +64,7 @@ class SelectAlbumReleaseRow extends Component {
                       value: `${r.title}` +
                         `${r.disambiguation ? ' (' : ''}${titleCase(r.disambiguation)}${r.disambiguation ? ')' : ''}` +
                         `, ${r.mediumCount} med, ${r.trackCount} tracks` +
-                        `${r.country.length > 0 ? ', ' : ''}${r.country}` +
+                        `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
                         `${r.monitored ? ', Monitored' : ''}`
                     }))}
diff --git a/frontend/src/Utilities/String/shortenList.js b/frontend/src/Utilities/String/shortenList.js
new file mode 100644
index 000000000..66085db4d
--- /dev/null
+++ b/frontend/src/Utilities/String/shortenList.js
@@ -0,0 +1,7 @@
+export default function shortenList(input, startCount = 3, endCount = 1, separator = ', ') {
+  const sorted = [...input].sort();
+  if (sorted.length <= startCount + endCount) {
+    return sorted.join(separator);
+  }
+  return [...sorted.slice(0, startCount), '...', sorted.slice(-endCount)].join(separator);
+}