From 6298a7415c4c79468801b42eb6d0e42fa139f0f1 Mon Sep 17 00:00:00 2001
From: HuaizhiDai <huaizhi.dai@utas.edu.au>
Date: Fri, 26 Jul 2024 15:38:30 +1000
Subject: [PATCH] :art: change license implementation

---
 .../common/store/OGCCollectionDefinitions.tsx | 22 +++++++-----
 .../subpages/components/LicenseBlock.tsx      | 19 ++++++----
 .../subpages/tab-panels/CitationPanel.tsx     | 35 +++++++++++++++++--
 3 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/src/components/common/store/OGCCollectionDefinitions.tsx b/src/components/common/store/OGCCollectionDefinitions.tsx
index 1f02cf45..ca2d59b1 100644
--- a/src/components/common/store/OGCCollectionDefinitions.tsx
+++ b/src/components/common/store/OGCCollectionDefinitions.tsx
@@ -63,7 +63,7 @@ export class OGCCollection {
   getTemporal = (): ITemporal[] | undefined => this.propValue?.temporal;
   getCitation = (): ICitation | undefined => this.propValue?.citation;
   getStatement = (): string | undefined => this.propValue?.statement;
-  getLicense = (): ILicense | undefined => this.propValue?.license;
+  getLicense = (): string | undefined => this.propValue?.license;
   getCreation = (): string | undefined => this.propValue?.creation;
   getRevision = (): string | undefined => this.propValue?.revision;
 }
@@ -78,7 +78,7 @@ export class SummariesProperties {
   readonly temporal?: ITemporal[];
   readonly citation?: ICitation;
   readonly statement?: string;
-  readonly license?: ILicense;
+  readonly license?: string;
   readonly creation?: string;
   readonly revision?: string;
 }
@@ -128,7 +128,6 @@ export class Spatial {
 }
 
 // interfaces:
-
 export interface OGCCollections {
   collections: Array<OGCCollection>;
   links: Array<ILink>;
@@ -169,12 +168,6 @@ export interface ICitation {
   useLimitations?: string[];
 }
 
-export interface ILicense {
-  title: string;
-  url: string;
-  licenseGraphic: string;
-}
-
 export interface IContact {
   name: string;
   organization: string;
@@ -198,3 +191,14 @@ export interface ITheme {
   title: string;
   concepts: IConcept[];
 }
+
+// Enums
+export enum RelationType {
+  SELF = "self",
+  LICENSE = "license",
+}
+
+export enum MediaType {
+  TEXT_HTML = "text/html",
+  IMAGE_PNG = "image/png",
+}
diff --git a/src/pages/detail-page/subpages/components/LicenseBlock.tsx b/src/pages/detail-page/subpages/components/LicenseBlock.tsx
index 70a96e6c..9752e40f 100644
--- a/src/pages/detail-page/subpages/components/LicenseBlock.tsx
+++ b/src/pages/detail-page/subpages/components/LicenseBlock.tsx
@@ -1,14 +1,19 @@
 import { Grid, Link } from "@mui/material";
 import { margin } from "../../../../styles/constants";
-import { ILicense } from "../../../../components/common/store/OGCCollectionDefinitions";
 import React from "react";
 import BlockList from "./BlockList";
 
 interface LicenseBlockProps {
-  license: ILicense;
+  license: string;
+  url: string;
+  graphic: string;
 }
 
-const LicenseBlock: React.FC<LicenseBlockProps> = ({ license }) => {
+const LicenseBlock: React.FC<LicenseBlockProps> = ({
+  license,
+  url,
+  graphic,
+}) => {
   const licenseComponent = () => {
     return (
       <Grid
@@ -27,22 +32,22 @@ const LicenseBlock: React.FC<LicenseBlockProps> = ({ license }) => {
             <Grid item md={1} />
             <Grid container item md={11}>
               <Grid item md={12}>
-                {license.title}
+                {license}
               </Grid>
               <Grid item md={12}>
                 <Link
-                  href={license.url}
+                  href={url}
                   target="_blank"
                   rel="noreferrer"
                   sx={{
                     color: "#468CB6",
                   }}
                 >
-                  {license.url}
+                  {url}
                 </Link>
               </Grid>
               <Grid item md={12}>
-                <img src={license.licenseGraphic} alt="license graphic" />
+                <img src={graphic} alt="license graphic" />
               </Grid>
             </Grid>
           </Grid>
diff --git a/src/pages/detail-page/subpages/tab-panels/CitationPanel.tsx b/src/pages/detail-page/subpages/tab-panels/CitationPanel.tsx
index 94606112..44c0610f 100644
--- a/src/pages/detail-page/subpages/tab-panels/CitationPanel.tsx
+++ b/src/pages/detail-page/subpages/tab-panels/CitationPanel.tsx
@@ -5,6 +5,10 @@ import NavigatablePanel from "../components/NavigatablePanel";
 import PlainTextBlock from "../components/PlainTextBlock";
 import PlainCollapseBlock from "../components/PlainCollapseBlock";
 import LicenseBlock from "../components/LicenseBlock";
+import {
+  MediaType,
+  RelationType,
+} from "../../../../components/common/store/OGCCollectionDefinitions";
 
 const CitationPanel = () => {
   const context = useDetailPageContext();
@@ -14,6 +18,22 @@ const CitationPanel = () => {
     [context.collection]
   );
 
+  const licenseUrl = useMemo(() => {
+    return context.collection?.links?.find((link) => {
+      return (
+        link.rel === RelationType.LICENSE && link.type === MediaType.TEXT_HTML
+      );
+    })?.href;
+  }, [context.collection?.links]);
+
+  const licenseGraphic = useMemo(() => {
+    return context.collection?.links?.find((link) => {
+      return (
+        link.rel === RelationType.LICENSE && link.type === MediaType.IMAGE_PNG
+      );
+    })?.href;
+  }, [context.collection?.links]);
+
   const citationContacts = useMemo(
     () =>
       context.collection
@@ -78,7 +98,11 @@ const CitationPanel = () => {
       {
         title: "License",
         component: license ? (
-          <LicenseBlock license={license} />
+          <LicenseBlock
+            license={license}
+            url={licenseUrl ? licenseUrl : ""}
+            graphic={licenseGraphic ? licenseGraphic : ""}
+          />
         ) : (
           <div>no license</div>
         ),
@@ -99,7 +123,14 @@ const CitationPanel = () => {
         ),
       },
     ],
-    [citationContacts, constraints, license, suggestedCitation]
+    [
+      citationContacts,
+      constraints,
+      license,
+      licenseGraphic,
+      licenseUrl,
+      suggestedCitation,
+    ]
   );
 
   return <NavigatablePanel childrenList={blocks} isLoading={isLoading} />;