Split object list into smaller components

src/client/components/facet_results/ObjectList.js → src/client/components/facet_results/ObjectListCollapsible.js

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
-import Button from '@material-ui/core/Button';
 import { ISOStringToDate } from './Dates';
-import { Link } from 'react-router-dom';
 import { orderBy, has } from 'lodash';
+import ObjectListItem from './ObjectListItem';
 
 const styles = () => ({
   valueList: {
@@ -25,108 +24,7 @@ const styles = () => ({
 
 const ObjectList = props => {
 
-  const createBasicItem = ({ data, collapsed, firstValue }) => {
-    let date = '';
-    let observedOwner = '';
-    if (props.columnId === 'event') {
-      date =
-        <span className={firstValue ? null : props.classes.dateContainer}>
-          {data.date == null ? 'No date ' : `${data.date} `}
-        </span>;
-      if (data.observedOwner) {  // currently no separate class for provenance events
-        observedOwner = createLink({
-          id: data.observedOwner.id,
-          dataProviderUrl: data.observedOwner.dataProviderUrl,
-          prefLabel: data.observedOwner.prefLabel,
-          collapsed: false
-        });
-      }
-    }
-    return (
-      <span>
-        {date}
-        {!props.makeLink &&
-          <React.Fragment>
-            {Array.isArray(data.prefLabel) ?
-              data.prefLabel[0]
-              : data.prefLabel}
-            {collapsed && ' ...'}
-          </React.Fragment>
-        }
-        {props.makeLink &&
-          <React.Fragment>
-            {createLink({
-              id: data.id,
-              dataProviderUrl: data.dataProviderUrl,
-              prefLabel: data.prefLabel,
-              collapsed
-            })}
-          </React.Fragment>
-        }
-        {data.observedOwner &&
-          <React.Fragment>
-            {': '}
-            {observedOwner}
-          </React.Fragment>
-        }
-      </span>
-    );
-  };
-
-  const createLink = ({ id, dataProviderUrl, prefLabel, collapsed }) => {
-    return (
-      <React.Fragment>
-        {props.externalLink && props.linkAsButton == null &&
-          <a
-            target='_blank' rel='noopener noreferrer'
-            href={dataProviderUrl}
-          >
-            {Array.isArray(prefLabel) ? prefLabel[0] : prefLabel}
-          </a>
-        }
-        {props.externalLink && props.linkAsButton &&
-          <Button
-            variant='contained'
-            target='_blank'
-            rel='noopener noreferrer'
-            href={id}
-          >
-            {Array.isArray(prefLabel) ? prefLabel[0] : prefLabel}
-          </Button>
-        }
-        {!props.externalLink &&
-          <Link to={dataProviderUrl}>
-            {Array.isArray(prefLabel) ? prefLabel[0] : prefLabel}
-          </Link>
-        }
-        {collapsed && <span> ...</span>}
-      </React.Fragment>
-    );
-  };
-
-  const createBasicList = data => {
-    return data.map((item, i) => {
-      const hasSource = has(item, 'source');
-      return(
-        <li key={i}>
-          {createBasicItem({ data: item, collapsed: false, firstValue: false })}
-          {hasSource && <sup>{item.source.prefLabel}</sup>}
-        </li>
-      );
-    }
-
-    );
-  };
-
-  const { sortValues } = props;
-  let { data } = props;
-  // if (props.columnId === 'event') {
-  //   console.log(data)
-  // }
-  if (data == null || data === '-') {
-    return '-';
-  }
-  else if (Array.isArray(data)) {
+  const sortList = data => {
     if (has(props, 'columnId') && props.columnId.endsWith('Timespan')) {
       data = sortValues
         ? data.sort((a,b) => {
@@ -142,22 +40,54 @@ const ObjectList = props => {
     else {
       data = sortValues ? orderBy(data, 'prefLabel') : data;
     }
+    return data;
+  };
+
+  const { sortValues, makeLink, externalLink, linkAsButton } = props;
+  let { data } = props;
+  if (data == null || data === '-') {
+    return '-';
+  }
+  else if (Array.isArray(data)) {
+    data = sortList(data);
     return (
       <React.Fragment>
-        {!props.expanded && createBasicItem({
-          data: data[0],
-          collapsed: true,
-          firstValue: true
-        })}
+        {!props.expanded &&
+          <ObjectListItem
+            data={data[0]}
+            makeLink={makeLink}
+            externalLink={externalLink}
+            linkAsButton={linkAsButton}
+            collapsed={true}
+          />
+        }
         <Collapse in={props.expanded} timeout="auto" unmountOnExit>
           <ul className={props.classes.valueList}>
-            {createBasicList(data)}
+            {data.map(item =>
+              <li key={item.id}>
+                <ObjectListItem
+                  data={item}
+                  makeLink={makeLink}
+                  externalLink={externalLink}
+                  linkAsButton={linkAsButton}
+                  collapsed={false}
+                />
+              </li>
+            )}
           </ul>
         </Collapse>
       </React.Fragment>
     );
   } else {
-    return createBasicItem({ data, collapsed: false, firstValue: true });
+    return (
+      <ObjectListItem
+        data={data}
+        makeLink={makeLink}
+        externalLink={externalLink}
+        linkAsButton={linkAsButton}
+        collapsed={false}
+      />
+    );
   }
 };
 
@@ -171,12 +101,6 @@ ObjectList.propTypes = {
   expanded: PropTypes.bool.isRequired,
   columnId: PropTypes.string.isRequired,
   linkAsButton: PropTypes.bool
-} ;
+};
 
 export default withStyles(styles)(ObjectList);
-
-// old code, sorting owners:
-// cell.map(item => {
-//   Array.isArray(item.order) ? item.earliestOrder = item.order[0] : item.earliestOrder = item.order;
-// });
-// cell.sort((a, b) => a.earliestOrder - b.earliestOrder);

src/client/components/facet_results/ObjectListItem.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import ObjectListItemLink from './ObjectListItemLink';
+
+const ObjectListItem = props => {
+  const { data, makeLink, externalLink, linkAsButton, collapsed } = props;
+  let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
+  return (
+    <React.Fragment>
+      {!makeLink && label}
+      {makeLink &&
+        <ObjectListItemLink
+          data={data}
+          label={label}
+          externalLink={externalLink}
+          linkAsButton={linkAsButton}
+        />
+      }
+      {collapsed && ' ...'}
+    </React.Fragment>
+  );
+};
+
+ObjectListItem.propTypes = {
+  data: PropTypes.object.isRequired,
+  makeLink: PropTypes.bool.isRequired,
+  externalLink: PropTypes.bool.isRequired,
+  linkAsButton: PropTypes.bool,
+  collapsed: PropTypes.bool.isRequired
+};
+
+export default ObjectListItem;

src/client/components/facet_results/ObjectListItemEvent.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import ObjectListItemLink from './ObjectListItemLink';
+
+const ObjectListItemEvent = props => {
+  const { data, collapsed } = props;
+  let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
+  return (
+    <React.Fragment>
+      <ObjectListItemLink
+        data={data}
+        label={label}
+      />
+      {data.observedOwner &&
+        <React.Fragment>
+          {': '}
+          {data.observedOwner}
+        </React.Fragment>
+      }
+      {collapsed && ' ...'}
+    </React.Fragment>
+  );
+};
+
+ObjectListItemEvent.PropTypes = {
+  data: PropTypes.bool.isRequired,
+  collapsed: PropTypes.bool.isRequired
+};
+
+export default ObjectListItemEvent;

src/client/components/facet_results/ObjectListItemLink.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { Link } from 'react-router-dom';
+
+const ObjectListLink = props => {
+  const { data, label, externalLink, linkAsButton } = props;
+
+  return (
+    <React.Fragment>
+      {externalLink && linkAsButton == null &&
+        <a
+          target='_blank' rel='noopener noreferrer'
+          href={data.dataProviderUrl}
+        >
+          {label}
+        </a>
+      }
+      {props.externalLink && props.linkAsButton &&
+        <Button
+          variant='contained'
+          target='_blank'
+          rel='noopener noreferrer'
+          href={data.id}
+        >
+          {label}
+        </Button>
+      }
+      {!props.externalLink &&
+        <Link to={data.dataProviderUrl}>
+          {label}
+        </Link>
+      }
+    </React.Fragment>
+  );
+};
+
+ObjectListLink.propTypes = {
+  externalLink: PropTypes.bool.isRequired,
+  data: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  linkAsButton: PropTypes.bool,
+};
+
+export default ObjectListLink;

src/client/components/facet_results/ResultTableCell.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
-import ObjectList from './ObjectList';
+import ObjectListCollapsible from './ObjectListCollapsible';
 import StringList from './StringList';
 
 const ResultTableCell = props => {
@@ -12,7 +12,7 @@ const ResultTableCell = props => {
   switch (valueType) {
     case 'object':
       cellContent =
-        <ObjectList
+        <ObjectListCollapsible
           data={data}
           makeLink={makeLink}
           externalLink={externalLink}