From 8b167e9a9ec9df4419637c643a62ea01d03e0c67 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Wed, 29 Jul 2020 08:10:36 -0400
Subject: [PATCH] implements pattern for adding additional cell components
 within List view

---
 .../List/Cell/Relationship/index.js           | 72 +++++++++++++++++++
 .../List/{Cell.js => Cell/index.js}           | 17 ++++-
 .../views/collections/List/Default.js         |  2 +-
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 src/client/components/views/collections/List/Cell/Relationship/index.js
 rename src/client/components/views/collections/List/{Cell.js => Cell/index.js} (85%)

diff --git a/src/client/components/views/collections/List/Cell/Relationship/index.js b/src/client/components/views/collections/List/Cell/Relationship/index.js
new file mode 100644
index 0000000000..d51544ae2b
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/Relationship/index.js
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import config from 'payload/config';
+
+const { collections } = config;
+
+const RelationshipCell = (props) => {
+  const { field, cellData } = props;
+  const { relationTo } = field;
+
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    const hasManyRelations = Array.isArray(relationTo);
+
+    if (cellData) {
+      if (Array.isArray(cellData)) {
+        setData(cellData.reduce((newData, value) => {
+          const relation = hasManyRelations ? value?.relationTo : relationTo;
+          const doc = hasManyRelations ? value.value : value;
+
+          const collection = collections.find((coll) => coll.slug === relation);
+
+          if (collection) {
+            const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
+
+            return `${newData}, ${doc[useAsTitle]}`;
+          }
+
+          return newData;
+        }, ''));
+      } else {
+        const relation = hasManyRelations ? cellData?.relationTo : relationTo;
+        const doc = hasManyRelations ? cellData.value : cellData;
+        const collection = collections.find((coll) => coll.slug === relation);
+
+        if (collection) {
+          const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
+
+          setData(doc[useAsTitle]);
+        }
+      }
+    }
+  }, [cellData, relationTo, field]);
+
+  return (
+    <React.Fragment>
+      {data}
+    </React.Fragment>
+  );
+};
+
+RelationshipCell.defaultProps = {
+  cellData: undefined,
+};
+
+RelationshipCell.propTypes = {
+  cellData: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.array,
+  ]),
+  field: PropTypes.shape({
+    relationTo: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.string,
+      ),
+      PropTypes.string,
+    ]),
+  }).isRequired,
+};
+
+export default RelationshipCell;
diff --git a/src/client/components/views/collections/List/Cell.js b/src/client/components/views/collections/List/Cell/index.js
similarity index 85%
rename from src/client/components/views/collections/List/Cell.js
rename to src/client/components/views/collections/List/Cell/index.js
index 59644c491c..55d0330ea0 100644
--- a/src/client/components/views/collections/List/Cell.js
+++ b/src/client/components/views/collections/List/Cell/index.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import format from 'date-fns/format';
 import config from 'payload/config';
-import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
-import Thumbnail from '../../../elements/Thumbnail';
+import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
+import Thumbnail from '../../../../elements/Thumbnail';
+import Relationship from './Relationship';
 
 const { routes: { admin } } = config;
 
@@ -50,6 +51,17 @@ const DefaultCell = (props) => {
     );
   }
 
+  if (field.type === 'relationship') {
+    return (
+      <WrapElement {...wrapElementProps}>
+        <Relationship
+          field={field}
+          cellData={cellData}
+        />
+      </WrapElement>
+    );
+  }
+
   if (field.type === 'date' && cellData) {
     return (
       <WrapElement {...wrapElementProps}>
@@ -65,6 +77,7 @@ const DefaultCell = (props) => {
       {field.type !== 'date' && (
         <React.Fragment>
           {typeof cellData === 'string' && cellData}
+          {typeof cellData === 'number' && cellData}
           {typeof cellData === 'object' && JSON.stringify(cellData)}
         </React.Fragment>
       )}
diff --git a/src/client/components/views/collections/List/Default.js b/src/client/components/views/collections/List/Default.js
index 1039a46249..7a3163e535 100644
--- a/src/client/components/views/collections/List/Default.js
+++ b/src/client/components/views/collections/List/Default.js
@@ -48,7 +48,7 @@ const DefaultList = (props) => {
 
   useEffect(() => {
     const params = {
-      depth: 0,
+      depth: 2,
     };
 
     if (page) params.page = page;