Merge pull request #893 from funmusicplace/fix-link-display

Fix link display

client/src/components/Artist/ArtistLinks.tsx

@@ -125,7 +125,7 @@ const ArtistLinks: React.FC = () => {
                     }
                   `}
                 >
-                  {site.icon} {linkUrlDisplay(l.url)}
+                  {site.icon} {linkUrlDisplay(l)}
                 </a>
               </li>
             );

client/src/components/ManageArtist/ArtistLinksInHeader.tsx

@@ -51,7 +51,7 @@ const ArtistLinksInHeader: React.FC<{
               key={l.url}
               target="_blank"
             >
-              {site.icon} {linkUrlDisplay(l.url)}
+              {site.icon} {linkUrlDisplay(l)}
             </a>
           );
         })}

client/src/components/common/LinkIconDisplay.test.tsx

@@ -1,5 +1,5 @@
 import { test, expect } from "vitest";
-import { isEmailLink, linkUrlHref } from "./LinkIconDisplay";
+import { isEmailLink, linkUrlDisplay, linkUrlHref } from "./LinkIconDisplay";
 
 test("isEmailLink returns true when a link is entered", () => {
   const result = isEmailLink("[email protected]");
@@ -37,3 +37,35 @@ test("linkUrlHref doesn't affect emails that already have a mailto prefix", () =
   const result = linkUrlHref("mailto:[email protected]");
   expect(result).toBe("mailto:[email protected]");
 });
+
+test.each([
+  {url: "[email protected]", linkType: "Email"},
+  {url: "[email protected]", linkType: "Website"}
+])("linkUrlDisplay returns Email when link is e-mail", (link) => {
+  const result = linkUrlDisplay(link);
+  expect(result).toBe("Email");
+});
+
+test("linkUrlDisplay ignores Email linkType if url is not e-mail", () => {
+  const result = linkUrlDisplay({url: "https://example.com", linkType: "Email"});
+  expect(result).toBe("Website");
+});
+
+test("linkUrlDisplay returns linkType if set", () => {
+  const result = linkUrlDisplay({url: "https://www.example.com/", linkType: "Anything"});
+  expect(result).toBe("Anything");
+})
+
+test.each([
+  [{url: "http://mastodon.social/", linkType: undefined}, "Mastodon"],
+  [{url: "https://www.twitter.com/", linkType: undefined}, "Twitter"],
+  [{url: "https://www.x.com/", linkType: undefined}, "X"],
+  [{url: "https://www.facebook.com/", linkType: undefined}, "Facebook"],
+  [{url: "https://www.bandcamp.com/", linkType: undefined}, "Bandcamp"],
+  [{url: "https://www.instagram.com/", linkType: undefined}, "Instagram"],
+  [{url: "@", linkType: undefined}, "Email"],
+  [{url: "http://example.com/", linkType: undefined}, "Website"],
+])("linkUrlDisplay guesses linkType when not set", (link, expected) => {
+  const result = linkUrlDisplay(link);
+  expect(result).toBe(expected);
+});

client/src/components/common/LinkIconDisplay.tsx

@@ -33,22 +33,16 @@ export function linkUrlHref(link: string, forDisplay?: boolean): string {
   }
 }
 
-export const linkUrlDisplay = (link: string) => {
-  let url;
-  if (isEmailLink(link)) {
+export const linkUrlDisplay = (link: {url: string, linkType?: string}): string => {
+  if (isEmailLink(link.url)) {
     return "Email";
   }
-  url = findOutsideSite(link);
 
-  try {
-    url = new URL(link).origin.replace(/https?:\/\//, "");
-    url = url.replace("www.", "");
-    url = url.replace(/\.[com|org|net]/, "");
-  } catch (e) {
-    url = link.split("/")[0];
+  if (!link.linkType || link.linkType === "Email") {
+    return findOutsideSite(link.url).name;
   }
 
-  return url;
+  return link.linkType;
 };
 
 export const findOutsideSite = (link: string) => {