Add external link translation

danskernesdigitalebibliotek · Oct 5, 2022 · 7344ac2 · 7344ac2
1 parent 236a0a9
commit 7344ac2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 14 deletions.
diff --git a/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx b/src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx
@@ -1,26 +1,51 @@
-import * as React from "react";
-import { FC } from "react";
+import React, { useState, FC, useEffect } from "react";
+import useProxyUrlGET from "../../../../core/dpl-cms-api/useProxyUrlGET";
 import { useText } from "../../../../core/utils/text";
 import { ButtonSize } from "../../../../core/utils/types/button";
 import { LinkNoStyle } from "../../../atoms/link-no-style";
 import { Button } from "../../../Buttons/Button";
 
 export interface MaterialButtonOnlineExternalProps {
+  loginRequired: boolean;
   externalUrl: string;
   origin: string;
   size?: ButtonSize;
 }
 
 const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
-  externalUrl = "https://google.com",
+  loginRequired,
+  externalUrl = "",
   origin,
   size
 }) => {
+  const [translatedUrl, setTranslatedUrl] = useState<URL>(new URL(externalUrl));
+  const [urlWasTranslated, setUrlWasTranslated] = useState<boolean | null>(
+    null
+  );
   const t = useText();
-  const externalLinkObject = new URL(externalUrl);
+  const { data, error } = useProxyUrlGET(
+    {
+      url: externalUrl
+    },
+    {
+      enabled:
+        urlWasTranslated === null && loginRequired && externalUrl.length > 0
+    }
+  );
+
+  useEffect(() => {
+    if (urlWasTranslated) {
+      return;
+    }
+
+    if (!error && data?.data?.url) {
+      setTranslatedUrl(new URL(data.data.url));
+      setUrlWasTranslated(true);
+    }
+  }, [data, error, translatedUrl, urlWasTranslated]);
 
   return (
-    <LinkNoStyle url={externalLinkObject}>
+    <LinkNoStyle url={translatedUrl}>
       <Button
         label={`${t("goToText")} ${origin}`}
         buttonType="external-link"

diff --git a/src/components/material/material-buttons/online/MaterialButtonsOnline.tsx b/src/components/material/material-buttons/online/MaterialButtonsOnline.tsx
@@ -1,6 +1,11 @@
 import * as React from "react";
 import { FC } from "react";
-import { ManifestationsSimpleFieldsFragment } from "../../../../core/dbc-gateway/generated/graphql";
+import {
+  AccessUrl,
+  DigitalArticleService,
+  InfomediaService,
+  ManifestationsSimpleFieldsFragment
+} from "../../../../core/dbc-gateway/generated/graphql";
 import { ButtonSize } from "../../../../core/utils/types/button";
 import MaterialButtonOnlineDigitalArticle from "./MaterialButtonOnlineDigitalArticle";
 import MaterialButtonOnlineExternal from "./MaterialButtonOnlineExternal";
@@ -12,15 +17,22 @@ export interface MaterialButtonsOnlineProps {
 }
 
 const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
-  manifestation,
+  manifestation: {
+    access: [accessElement],
+    access: [{ __typename: accessType }]
+  },
   size
 }) => {
-  const accessType = manifestation.access[0].__typename;
-
-  if (accessType === "Ereol" || accessType === "AccessUrl") {
-    const { origin, url: externalUrl } = manifestation.access[0];
+  // If the access type is an external type we'll show corresponding button.
+  if (["Ereol", "AccessUrl"].includes(accessType)) {
+    const {
+      origin,
+      url: externalUrl,
+      loginRequired
+    } = accessElement as AccessUrl;
     return (
       <MaterialButtonOnlineExternal
+        loginRequired={loginRequired}
         externalUrl={externalUrl}
         origin={origin}
         size={size}
@@ -29,7 +41,7 @@ const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
   }
 
   if (accessType === "DigitalArticleService") {
-    const digitalArticleIssn = manifestation.access[0].issn;
+    const { issn: digitalArticleIssn } = accessElement as DigitalArticleService;
     return (
       <MaterialButtonOnlineDigitalArticle
         digitalArticleIssn={digitalArticleIssn}
@@ -39,10 +51,10 @@ const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
   }
 
   if (accessType === "InfomediaService") {
-    const infomediaArticleId = manifestation.access[0].id;
+    const { id: articleId } = accessElement as InfomediaService;
     return (
       <MaterialButtonOnlineInfomediaArticle
-        infomediaArticleId={infomediaArticleId}
+        infomediaArticleId={articleId}
         size={size}
       />
     );