feat: add link to catalogue (TT-1711) (#51)

NationalLibraryOfNorway · Sep 11, 2024 · 2c81847 · 2c81847
1 parent 7728a3f
commit 2c81847
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/__tests__/app/[id]/page.test.tsx b/__tests__/app/[id]/page.test.tsx
@@ -1,13 +1,14 @@
 import {beforeEach, expect, test, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import Page from '@/app/[id]/page';
-import {fetchNewspaperTitleFromCatalog} from '@/services/catalog.data';
+import {fetchNewspaperTitleFromCatalog, getLinkToNewspaperInCatalog} from '@/services/catalog.data';
 import {MockBox1, MockCatalogTitle1, MockNewspaper1, MockTitle} from '../../mockdata';
 import {getBoxForTitle, getLocalTitle, getNewspapersForBoxOnTitle} from '@/services/local.data';
 import {NotFoundError} from '@/models/Errors';
 
 beforeEach(() => {
   vi.mocked(fetchNewspaperTitleFromCatalog).mockImplementation(() => Promise.resolve(MockCatalogTitle1));
+  vi.mocked(getLinkToNewspaperInCatalog).mockImplementation(() => Promise.resolve('https://catalog.com/987'));
   vi.mocked(getLocalTitle).mockImplementation(() => Promise.resolve(MockTitle));
   vi.mocked(getBoxForTitle).mockImplementation(() => Promise.resolve(MockBox1));
   vi.mocked(getNewspapersForBoxOnTitle).mockImplementation(() => Promise.resolve([MockNewspaper1]));

diff --git a/__tests__/setup.ts b/__tests__/setup.ts
@@ -27,6 +27,7 @@ beforeAll(() => {
   vi.mock('@/services/catalog.data', () => ({
     searchNewspaperTitlesInCatalog: vi.fn(),
     fetchNewspaperTitleFromCatalog: vi.fn(),
+    getLinkToNewspaperInCatalog: vi.fn(),
     postItemToCatalog: vi.fn(),
     postMissingItemToCatalog: vi.fn()
   }));

diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, {useEffect, useState} from 'react';
-import {fetchNewspaperTitleFromCatalog} from '@/services/catalog.data';
+import {fetchNewspaperTitleFromCatalog, getLinkToNewspaperInCatalog} from '@/services/catalog.data';
 import {CatalogTitle} from '@/models/CatalogTitle';
 import {
   getBoxForTitle,
@@ -14,7 +14,7 @@ import {box, title} from '@prisma/client';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {NotFoundError} from '@/models/Errors';
 import {Button} from '@nextui-org/button';
-import {FaArrowAltCircleLeft, FaBoxOpen, FaEdit} from 'react-icons/fa';
+import {FaArrowAltCircleLeft, FaBoxOpen, FaEdit, FaExternalLinkAlt} from 'react-icons/fa';
 import BoxRegistrationModal from '@/components/BoxRegistrationModal';
 import NotesComponent from '@/components/NotesComponent';
 import EditTextInput from '@/components/EditTextInput';
@@ -26,6 +26,7 @@ import {catalogDateStringToNorwegianDateString} from '@/utils/dateUtils';
 
 export default function Page({params}: { params: { id: string } }) {
   const [titleString, setTitleString] = useState<string>();
+  const [titleLink, setTitleLink] = useState<string>();
   const [catalogTitle, setCatalogTitle] = useState<CatalogTitle>();
   const [titleFromDb, setTitleFromDb] = useState<title>();
   const [boxFromDb, setBoxFromDb] = useState<box>();
@@ -76,6 +77,13 @@ export default function Page({params}: { params: { id: string } }) {
       });
   }, [params]);
 
+  useEffect(() => {
+    void getLinkToNewspaperInCatalog(params.id)
+      .then((link: string) => {
+        setTitleLink(link);
+      });
+  }, [params]);
+
   useEffect(() => {
     void getBoxForTitle(+params.id).then((b: box) => {
       setBoxFromDb(b);
@@ -117,9 +125,14 @@ export default function Page({params}: { params: { id: string } }) {
                 ) : (
                   <p>Henter tittel ...</p>
                 )}
-                <div className="flex flex-row mt-2 w-full">
-                  <p className="group-title-style ml-auto"> Katalog ID: </p>
-                  <p className="group-content-style ml-2 mr-auto">{params.id}</p>
+                <div className="flex justify-center gap-2">
+                  <p className="group-title-style"> Katalog ID: </p>
+                  <a className="group-content-style underline" href={titleLink} target="_blank">
+                    <div className="flex flex-row gap-2">
+                      <p>{params.id}</p>
+                      <FaExternalLinkAlt/>
+                    </div>
+                  </a>
                 </div>
                 {catalogTitle && catalogTitle.endDate && (
                   <WarningLabel

diff --git a/src/services/catalog.data.ts b/src/services/catalog.data.ts
@@ -34,6 +34,20 @@ export async function fetchNewspaperTitleFromCatalog(id: string): Promise<Catalo
   }
 }
 
+export async function getLinkToNewspaperInCatalog(id: string): Promise<string> {
+  return fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/catalog/title/link?catalogueId=${id}&materialType=NEWSPAPER`)
+    .then(response => {
+      if (response.ok) {
+        return response.json() as Promise<string>;
+      } else {
+        return Promise.reject(new Error('Failed getting link'));
+      }
+    })
+    .catch(() => {
+      return Promise.reject(new Error('Failed getting link'));
+    });
+}
+
 export async function postItemToCatalog(issue: CatalogNewspaperDto): Promise<CatalogItem> {
   const token = await getKeycloakTekstToken();