fix(lang): allow proper localization of comma-delimited lists (#1264)

* fix(lang): allow proper localization of comma-delimited lists

* refactor: add string to globals instead, and remove unused strings

src/components/CollectionDetails/index.tsx

@@ -1,4 +1,6 @@
 import axios from 'axios';
+import { uniq } from 'lodash';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useContext, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -8,20 +10,19 @@ import { MediaStatus } from '../../../server/constants/media';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { Collection } from '../../../server/models/Collection';
 import { LanguageContext } from '../../context/LanguageContext';
+import useSettings from '../../hooks/useSettings';
+import { Permission, useUser } from '../../hooks/useUser';
+import globalMessages from '../../i18n/globalMessages';
 import Error from '../../pages/_error';
-import StatusBadge from '../StatusBadge';
 import ButtonWithDropdown from '../Common/ButtonWithDropdown';
+import CachedImage from '../Common/CachedImage';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import Modal from '../Common/Modal';
+import PageTitle from '../Common/PageTitle';
 import Slider from '../Slider';
+import StatusBadge from '../StatusBadge';
 import TitleCard from '../TitleCard';
 import Transition from '../Transition';
-import PageTitle from '../Common/PageTitle';
-import { useUser, Permission } from '../../hooks/useUser';
-import useSettings from '../../hooks/useSettings';
-import Link from 'next/link';
-import { uniq } from 'lodash';
-import CachedImage from '../Common/CachedImage';
 
 const messages = defineMessages({
   overviewunavailable: 'Overview unavailable.',
@@ -193,7 +194,10 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
         ))
         .reduce((prev, curr) => (
           <>
-            {prev}, {curr}
+            {intl.formatMessage(globalMessages.delimitedlist, {
+              a: prev,
+              b: curr,
+            })}
           </>
         ))
     );

src/components/MovieDetails/index.tsx

@@ -15,6 +15,7 @@ import TmdbLogo from '../../assets/tmdb_logo.svg';
 import { LanguageContext } from '../../context/LanguageContext';
 import useSettings from '../../hooks/useSettings';
 import { Permission, useUser } from '../../hooks/useUser';
+import globalMessages from '../../i18n/globalMessages';
 import Error from '../../pages/_error';
 import { sortCrewPriority } from '../../utils/creditHelpers';
 import Button from '../Common/Button';
@@ -45,10 +46,6 @@ const messages = defineMessages({
   cast: 'Cast',
   recommendations: 'Recommendations',
   similar: 'Similar Titles',
-  cancelrequest: 'Cancel Request',
-  available: 'Available',
-  unavailable: 'Unavailable',
-  pending: 'Pending',
   overviewunavailable: 'Overview unavailable.',
   manageModalTitle: 'Manage Movie',
   manageModalRequests: 'Requests',
@@ -56,8 +53,6 @@ const messages = defineMessages({
   manageModalClearMedia: 'Clear All Media Data',
   manageModalClearMediaWarning:
     '* This will irreversibly remove all data for this movie, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
-  approve: 'Approve',
-  decline: 'Decline',
   studio: '{studioCount, plural, one {Studio} other {Studios}}',
   viewfullcrew: 'View Full Crew',
   view: 'View',
@@ -191,7 +186,10 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         ))
         .reduce((prev, curr) => (
           <>
-            {prev}, {curr}
+            {intl.formatMessage(globalMessages.delimitedlist, {
+              a: prev,
+              b: curr,
+            })}
           </>
         ))
     );

src/components/PersonDetails/index.tsx

@@ -8,6 +8,7 @@ import type { PersonCombinedCreditsResponse } from '../../../server/interfaces/a
 import type { PersonDetail } from '../../../server/models/Person';
 import Ellipsis from '../../assets/ellipsis.svg';
 import { LanguageContext } from '../../context/LanguageContext';
+import globalMessages from '../../i18n/globalMessages';
 import Error from '../../pages/_error';
 import CachedImage from '../Common/CachedImage';
 import ImageFader from '../Common/ImageFader';
@@ -19,7 +20,6 @@ const messages = defineMessages({
   birthdate: 'Born {birthdate}',
   lifespan: '{birthdate} – {deathdate}',
   alsoknownas: 'Also Known As: {names}',
-  namedelimiter: ', ',
   appearsin: 'Appearances',
   crewmember: 'Crew',
   ascharacter: 'as {character}',
@@ -239,8 +239,11 @@ const PersonDetails: React.FC = () => {
             {(data.alsoKnownAs ?? []).length > 0 && (
               <div>
                 {intl.formatMessage(messages.alsoknownas, {
-                  names: (data.alsoKnownAs ?? []).join(
-                    intl.formatMessage(messages.namedelimiter)
+                  names: (data.alsoKnownAs ?? []).reduce((prev, curr) =>
+                    intl.formatMessage(globalMessages.delimitedlist, {
+                      a: prev,
+                      b: curr,
+                    })
                   ),
                 })}
               </div>

src/components/TvDetails/index.tsx

@@ -17,6 +17,7 @@ import TmdbLogo from '../../assets/tmdb_logo.svg';
 import { LanguageContext } from '../../context/LanguageContext';
 import useSettings from '../../hooks/useSettings';
 import { Permission, useUser } from '../../hooks/useUser';
+import globalMessages from '../../i18n/globalMessages';
 import Error from '../../pages/_error';
 import { sortCrewPriority } from '../../utils/creditHelpers';
 import Button from '../Common/Button';
@@ -45,11 +46,7 @@ const messages = defineMessages({
   cast: 'Cast',
   recommendations: 'Recommendations',
   similar: 'Similar Series',
-  cancelrequest: 'Cancel Request',
   watchtrailer: 'Watch Trailer',
-  available: 'Available',
-  unavailable: 'Unavailable',
-  pending: 'Pending',
   overviewunavailable: 'Overview unavailable.',
   manageModalTitle: 'Manage Series',
   manageModalRequests: 'Requests',
@@ -57,8 +54,6 @@ const messages = defineMessages({
   manageModalClearMedia: 'Clear All Media Data',
   manageModalClearMediaWarning:
     '* This will irreversibly remove all data for this TV series, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
-  approve: 'Approve',
-  decline: 'Decline',
   showtype: 'Series Type',
   anime: 'Anime',
   network: '{networkCount, plural, one {Network} other {Networks}}',
@@ -200,7 +195,10 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         ))
         .reduce((prev, curr) => (
           <>
-            {prev}, {curr}
+            {intl.formatMessage(globalMessages.delimitedlist, {
+              a: prev,
+              b: curr,
+            })}
           </>
         ))
     );