Use short labels when linking to products/projects (#445)

hbz · Jul 15, 2021 · 78ee01b · 78ee01b
1 parent 31532f4
commit 78ee01b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 27 deletions.
diff --git a/gatsby/lobid/src/components/helpers.js b/gatsby/lobid/src/components/helpers.js
@@ -1,7 +1,17 @@
+import React from "react";
+
 export function simpleId(url) {
     return url.slice(url.lastIndexOf("/") + 1);
 }
 
 export function stripLobidOrg(url) {
     return url.replace(/https?:\/\/lobid.org\//, '/');
 }
+
+export function asLinks(field, entity, props) {
+    return entity[field] && <tr><td>{props[field]}</td><td>{entity[field].map((link) =>
+        <div key={link.id}>
+            <a href={stripLobidOrg(link.id)}>{simpleId(link.id)}</a><br />
+        </div>)}
+    </td></tr>
+}
diff --git a/gatsby/lobid/src/components/product.html.js b/gatsby/lobid/src/components/product.html.js
@@ -1,6 +1,6 @@
 import React from "react";
 import md5 from "md5";
-import { simpleId } from "./helpers.js";
+import { simpleId, asLinks } from "./helpers.js";
 
 import Header from "./header.html";
 import Footer from "./footer.html";
@@ -19,13 +19,6 @@ export class Product extends React.Component {
     this.props = props;
   }
 
-  asLinks(field) {
-    return this.props.product[field] && <tr><td>{this.props[field]}</td><td>{this.props.product[field].map((link) => {
-      let linkId = link.id.replace(/https?:\/\/lobid.org\//, '/');
-      return <div key={link.id}><a href={linkId}>{linkId}</a><br /></div>
-    })}</td></tr>
-  }
-
   render() {
     return (
       <div className="container">
@@ -43,7 +36,7 @@ export class Product extends React.Component {
             <h1>
               {this.props.product.name.label}
               <small>
-                {this.props.product.slogan && [this.props.product.slogan].map(s => <span> &mdash; {s.label}</span>)}
+                {this.props.product.slogan && [this.props.product.slogan].map(s => <span key={s.label}> &mdash; {s.label}</span>)}
                 <a title="Beschreibung als JSON-LD anzeigen" href={'/product/' + simpleId(this.props.product.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
             </h1>
           </div>
@@ -57,9 +50,9 @@ export class Product extends React.Component {
                 </thead>
                 <tbody>
                   <tr><td>Website</td><td><a href={this.props.product.url || this.props.product.id}>{this.props.product.url || this.props.product.id}</a></td></tr>
-                  {this.asLinks("hasPart")}
-                  {this.asLinks("isBasedOn")}
-                  {this.asLinks("isRelatedTo")}
+                  {asLinks("hasPart", this.props.product, this.props)}
+                  {asLinks("isBasedOn", this.props.product, this.props)}
+                  {asLinks("isRelatedTo", this.props.product, this.props)}
                 </tbody>
                 <tfoot />
               </table>

diff --git a/gatsby/lobid/src/components/project.html.js b/gatsby/lobid/src/components/project.html.js
@@ -1,6 +1,6 @@
 import React from "react";
 import md5 from "md5";
-import { simpleId } from "./helpers.js";
+import { simpleId, asLinks } from "./helpers.js";
 
 import Header from "./header.html";
 import Footer from "./footer.html";
@@ -19,14 +19,6 @@ export class Project extends React.Component {
     this.props = props;
   }
 
-  asLinks(field) {
-    return this.props.project[field] && <tr><td>{this.props[field]}</td><td>{this.props.project[field].map((link) => {
-      let linkId = link.id.replace(/https?:\/\/lobid.org\//, '/');
-      return <div key={link.id}><a href={linkId}>{linkId}</a><br /></div>
-    }
-    )}</td></tr>
-  }
-
   render() {
     return (
       <div className="container">
@@ -44,7 +36,7 @@ export class Project extends React.Component {
             <h1>
               {this.props.project.name.label}
               <small>
-                {this.props.project.alternateName && this.props.project.alternateName.map(s => <span> | {s}</span>)}
+                {this.props.project.alternateName && this.props.project.alternateName.map(s => <span key={s}> | {s}</span>)}
                 <a title="Beschreibung als JSON-LD anzeigen" href={'/project/' + simpleId(this.props.project.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
             </h1>
           </div>
@@ -59,11 +51,11 @@ export class Project extends React.Component {
                 <tbody>
                   <tr><td>Website</td><td><a href={this.props.project.url || this.props.project.id}>{this.props.project.url || this.props.project.id}</a></td></tr>
                   {this.props.project.endDate && <tr><td>Abgeschlossen</td><td>{this.props.project.endDate}</td></tr>}
-                  {this.asLinks("hasPart")}
-                  {this.asLinks("isBasedOn")}
-                  {this.asLinks("isRelatedTo")}
-                  {this.asLinks("enhances")}
-                  {this.asLinks("result")}
+                  {asLinks("hasPart", this.props.project, this.props)}
+                  {asLinks("isBasedOn", this.props.project, this.props)}
+                  {asLinks("isRelatedTo", this.props.project, this.props)}
+                  {asLinks("enhances", this.props.project, this.props)}
+                  {asLinks("result", this.props.project, this.props)}
                 </tbody>
                 <tfoot />
               </table>