Merge pull request #83 from aodn/feature/add-citation-contact#5704

Feature/add citation contact#5704

src/pages/detail-page/subpages/components/ContactBlock.tsx

@@ -5,10 +5,11 @@ import ContactCard from "./ContactCard";
 import CollapseFrame from "./CollapseFrame";
 
 interface ContactBlockProps {
+  title: string;
   contacts: IContact[];
 }
 
-const ContactBlock: React.FC<ContactBlockProps> = ({ contacts }) => {
+const ContactBlock: React.FC<ContactBlockProps> = ({ title, contacts }) => {
   const collapseComponents: ReactNode[] = useMemo(() => {
     const returnedList: ReactNode[] = [];
     contacts?.map((contact, index) => {
@@ -28,7 +29,7 @@ const ContactBlock: React.FC<ContactBlockProps> = ({ contacts }) => {
   }, [contacts]);
 
   return (
-    <BlockList title="Contacts" childrenList={collapseComponents}></BlockList>
+    <BlockList title={title} childrenList={collapseComponents}></BlockList>
   );
 };
 

src/pages/detail-page/subpages/tab-panels/AboutPanel.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useDetailPageContext } from "../../context/detail-page-context";
 import KeywordBlock from "../components/KeywordBlock";
-import CreditBlock from "../components/CreditBlock";
 import ContactBlock from "../components/ContactBlock";
 import NavigatablePanel from "../components/NavigatablePanel";
+import CreditBlock from "../components/CreditBlock";
 
 const AboutPanel = () => {
   const context = useDetailPageContext();
@@ -31,7 +31,10 @@ const AboutPanel = () => {
       {
         title: "Contacts",
         component: (
-          <ContactBlock contacts={aboutContacts ? aboutContacts : []} />
+          <ContactBlock
+            title="Contacts"
+            contacts={aboutContacts ? aboutContacts : []}
+          />
         ),
       },
       {

src/pages/detail-page/subpages/tab-panels/CitationPanel.tsx

@@ -1,7 +1,56 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import { useDetailPageContext } from "../../context/detail-page-context";
+import ContactBlock from "../components/ContactBlock";
+import NavigatablePanel from "../components/NavigatablePanel";
 
 const CitationPanel = () => {
-  return <div>CitationCard</div>;
+  const context = useDetailPageContext();
+  const citationContacts = useMemo(
+    () =>
+      context.collection
+        ?.getContacts()
+        ?.filter((contact) => contact.roles.includes("citation")),
+    [context.collection]
+  );
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!context.collection) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [context.collection]);
+
+  const blocks = useMemo(
+    () => [
+      {
+        title: "Cited Responsible Parties",
+        component: (
+          <ContactBlock
+            title="Cited Responsible Parties"
+            contacts={citationContacts ? citationContacts : []}
+          />
+        ),
+      },
+      {
+        title: "License",
+        component: <div>License</div>,
+      },
+      {
+        title: "Suggested Citation",
+        component: <div>Suggested Citation</div>,
+      },
+      {
+        title: "Constraints",
+        component: <div>Constraints</div>,
+      },
+    ],
+    [citationContacts]
+  );
+
+  return <NavigatablePanel childrenList={blocks} isLoading={isLoading} />;
 };
 
 export default CitationPanel;

src/pages/detail-page/subpages/tab-panels/MetadataInformationPanel.tsx

@@ -28,7 +28,10 @@ const MetadataInformationPanel = () => {
       {
         title: "Metadata Contact",
         component: (
-          <ContactBlock contacts={metadataContact ? metadataContact : []} />
+          <ContactBlock
+            title="Metadata Contact"
+            contacts={metadataContact ? metadataContact : []}
+          />
         ),
       },
       {