Factor out ArtistCreditUsageLink

Author: reosarevok

root/artist_credit/ArtistCreditIndex.js

@@ -10,6 +10,8 @@
 import * as React from 'react';
 
 import ENTITIES from '../../entities';
+import ArtistCreditUsageLink
+  from '../static/scripts/common/components/ArtistCreditUsageLink';
 import DescriptiveLink
   from '../static/scripts/common/components/DescriptiveLink';
 import EntityLink
@@ -43,8 +45,6 @@ function buildSection(
   }
 
   const entityUrlFragment = ENTITIES[entityType].url;
-  const url = '/artist-credit/' + props.artistCredit.id +
-              '/' + entityUrlFragment;
 
   return (
     <React.Fragment key={entityType}>
@@ -62,12 +62,14 @@ function buildSection(
         {entities.count > entities.entities.length ? (
           <li key="see-all">
             <em>
-              <a href={url}>
-                {expand2text(
+              <ArtistCreditUsageLink
+                artistCredit={props.artistCredit}
+                content={expand2text(
                   seeAllMessage(entities.count),
                   {num: formatCount(props.$c, entities.count)},
                 )}
-              </a>
+                subPath={entityUrlFragment}
+              />
             </em>
           </li>
         ) : null}

root/artist_credit/ArtistCreditLayout.js

@@ -11,6 +11,8 @@ import * as React from 'react';
 
 import Tabs from '../components/Tabs';
 import Layout from '../layout';
+import ArtistCreditUsageLink
+  from '../static/scripts/common/components/ArtistCreditUsageLink';
 import {reduceArtistCredit}
   from '../static/scripts/common/immutable-entities';
 
@@ -54,19 +56,22 @@ const ArtistCreditLayout = ({
   >
     <div id="content">
       <h1>
-        <a href={'/artist-credit/' + artistCredit.id}>
-          {texp.l(
+        <ArtistCreditUsageLink
+          artistCredit={artistCredit}
+          content={texp.l(
             'Artist credit “{artist_credit}”',
             {artist_credit: reduceArtistCredit(artistCredit)},
           )}
-        </a>
+        />
       </h1>
       <Tabs>
         {tabLinks.map(link => (
           <li className={page === link[0] ? 'sel' : ''} key={link[0]}>
-            <a href={'/artist-credit/' + artistCredit.id + link[0]}>
-              {link[1]()}
-            </a>
+            <ArtistCreditUsageLink
+              artistCredit={artistCredit}
+              content={link[1]()}
+              subPath={link[0].replace(/^\//, '')}
+            />
           </li>
         ))}
       </Tabs>

root/components/Aliases/ArtistCreditList.js

@@ -11,6 +11,8 @@ import * as React from 'react';
 
 import ArtistCreditLink
   from '../../static/scripts/common/components/ArtistCreditLink';
+import ArtistCreditUsageLink
+  from '../../static/scripts/common/components/ArtistCreditUsageLink';
 import EntityLink from '../../static/scripts/common/components/EntityLink';
 import bracketed from '../../static/scripts/common/utility/bracketed';
 import loopParity from '../../utility/loopParity';
@@ -62,9 +64,10 @@ const ArtistCreditList = ({
                 {' '}
                 <span className="small">
                   {bracketed(
-                    <a href={`/artist-credit/${credit.id}`}>
-                      {l('see uses')}
-                    </a>,
+                    <ArtistCreditUsageLink
+                      artistCredit={credit}
+                      content={l('see uses')}
+                    />,
                   )}
                 </span>
               </td>

root/edit/details/EditArtistCredit.js

@@ -9,6 +9,8 @@
 
 import * as React from 'react';
 
+import ArtistCreditUsageLink
+  from '../../static/scripts/common/components/ArtistCreditUsageLink';
 import ExpandedArtistCredit from
   '../../static/scripts/common/components/ExpandedArtistCredit';
 
@@ -42,9 +44,12 @@ const EditArtistCredit = ({edit}: Props): React.Element<'table'> => {
           <tr>
             <th />
             <td colSpan="2">
-              <a href={`/artist-credit/${display.artist_credit.old.id}`}>
-                {l('See all uses of the artist credit being changed.')}
-              </a>
+              <ArtistCreditUsageLink
+                artistCredit={display.artist_credit.old}
+                content={l(
+                  'See all uses of the artist credit being changed.',
+                )}
+              />
             </td>
           </tr>
         ) : null}

root/static/scripts/common/components/ArtistCreditUsageLink.js

@@ -0,0 +1,42 @@
+/*
+ * @flow strict-local
+ * Copyright (C) 2021 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import * as React from 'react';
+
+import {reduceArtistCredit} from '../immutable-entities';
+
+type Props = {
+  +artistCredit: ArtistCreditT,
+  +content?: string,
+  +subPath?: string,
+  +target?: '_blank',
+};
+
+const ArtistCreditUsageLink = ({
+  artistCredit,
+  content,
+  subPath,
+  ...props
+}: Props): React.Element<'a'> | null => {
+  const id = artistCredit.id;
+  if (id == null) {
+    return null;
+  }
+  let href = `/artist-credit/${id}`;
+  if (nonEmpty(subPath)) {
+    href += '/' + subPath;
+  }
+  return (
+    <a href={href} {...props}>
+      {nonEmpty(content) ? content : reduceArtistCredit(artistCredit)}
+    </a>
+  );
+};
+
+export default ArtistCreditUsageLink;