From 15a488c03f694b2e502deba59364ec8f1fac4ef1 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Sun, 27 Sep 2020 15:32:36 -0400
Subject: [PATCH] creates a better pattern for how to render table cells

---
 .../views/collections/List/Cell/index.js      | 54 ++++---------------
 .../List/Cell/types/Blocks/index.js           | 32 +++++++++++
 .../collections/List/Cell/types/Date/index.js | 15 ++++++
 .../Cell/{ => types}/Relationship/index.js    | 10 ++--
 .../collections/List/Cell/types/index.js      |  9 ++++
 5 files changed, 71 insertions(+), 49 deletions(-)
 create mode 100644 src/client/components/views/collections/List/Cell/types/Blocks/index.js
 create mode 100644 src/client/components/views/collections/List/Cell/types/Date/index.js
 rename src/client/components/views/collections/List/Cell/{ => types}/Relationship/index.js (89%)
 create mode 100644 src/client/components/views/collections/List/Cell/types/index.js

diff --git a/src/client/components/views/collections/List/Cell/index.js b/src/client/components/views/collections/List/Cell/index.js
index a0601a9e59..068f4b81f3 100644
--- a/src/client/components/views/collections/List/Cell/index.js
+++ b/src/client/components/views/collections/List/Cell/index.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import format from 'date-fns/format';
 import { useConfig } from '../../../../providers/Config';
 import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
-import Thumbnail from '../../../../elements/Thumbnail';
-import Relationship from './Relationship';
+import cellComponents from './types';
 
 const DefaultCell = (props) => {
   const {
@@ -13,17 +11,10 @@ const DefaultCell = (props) => {
     colIndex,
     collection: {
       slug,
-      upload: {
-        staticURL,
-        adminThumbnail,
-      } = {},
     },
     cellData,
     rowData: {
       id,
-      filename,
-      mimeType,
-      sizes,
     } = {},
   } = props;
 
@@ -38,49 +29,24 @@ const DefaultCell = (props) => {
     wrapElementProps.to = `${admin}/collections/${slug}/${id}`;
   }
 
-  if (field.type === 'thumbnail') {
-    return (
-      <WrapElement {...wrapElementProps}>
-        <Thumbnail
-          size="small"
-          {...{
-            mimeType, adminThumbnail, sizes, staticURL, filename,
-          }}
-        />
-      </WrapElement>
-    );
-  }
+  const CellComponent = cellComponents[field.type];
 
-  if (field.type === 'relationship') {
+  if (!CellComponent) {
     return (
       <WrapElement {...wrapElementProps}>
-        <Relationship
-          field={field}
-          cellData={cellData}
-        />
-      </WrapElement>
-    );
-  }
-
-  if (field.type === 'date' && cellData) {
-    return (
-      <WrapElement {...wrapElementProps}>
-        <span>
-          {format(new Date(cellData), 'MMMM do yyyy, h:mma')}
-        </span>
+        {typeof cellData === 'string' && cellData}
+        {typeof cellData === 'number' && cellData}
+        {typeof cellData === 'object' && JSON.stringify(cellData)}
       </WrapElement>
     );
   }
 
   return (
     <WrapElement {...wrapElementProps}>
-      {field.type !== 'date' && (
-        <React.Fragment>
-          {typeof cellData === 'string' && cellData}
-          {typeof cellData === 'number' && cellData}
-          {typeof cellData === 'object' && JSON.stringify(cellData)}
-        </React.Fragment>
-      )}
+      <CellComponent
+        field={field}
+        data={cellData}
+      />
     </WrapElement>
   );
 };
diff --git a/src/client/components/views/collections/List/Cell/types/Blocks/index.js b/src/client/components/views/collections/List/Cell/types/Blocks/index.js
new file mode 100644
index 0000000000..ae997d8d79
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/Blocks/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const BlocksCell = ({ data, field }) => {
+  const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
+
+  let label = `0 ${field.label}.`;
+
+  if (selectedBlocks.length > 0) {
+    label = `${selectedBlocks.length} ${field.label}`;
+  }
+
+  return (
+    <span>{label}</span>
+  );
+};
+
+BlocksCell.defaultProps = {
+  data: [],
+};
+
+BlocksCell.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({}),
+  ),
+  field: PropTypes.shape({
+    singularLabel: PropTypes.string,
+    label: PropTypes.string,
+  }).isRequired,
+};
+
+export default BlocksCell;
diff --git a/src/client/components/views/collections/List/Cell/types/Date/index.js b/src/client/components/views/collections/List/Cell/types/Date/index.js
new file mode 100644
index 0000000000..b0626d7d9c
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/Date/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import format from 'date-fns/format';
+
+const DateCell = ({ data }) => (
+  <span>
+    {format(new Date(data), 'MMMM do yyyy, h:mma')}
+  </span>
+);
+
+DateCell.propTypes = {
+  data: PropTypes.string.isRequired,
+};
+
+export default DateCell;
diff --git a/src/client/components/views/collections/List/Cell/Relationship/index.js b/src/client/components/views/collections/List/Cell/types/Relationship/index.js
similarity index 89%
rename from src/client/components/views/collections/List/Cell/Relationship/index.js
rename to src/client/components/views/collections/List/Cell/types/Relationship/index.js
index 3458325aac..28e7d47462 100644
--- a/src/client/components/views/collections/List/Cell/Relationship/index.js
+++ b/src/client/components/views/collections/List/Cell/types/Relationship/index.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useConfig } from '../../../../../providers/Config';
+import { useConfig } from '../../../../../../providers/Config';
 
 const RelationshipCell = (props) => {
-  const { field, cellData } = props;
+  const { field, data: cellData } = props;
   const { relationTo } = field;
   const { collections } = useConfig();
   const [data, setData] = useState();
@@ -39,7 +39,7 @@ const RelationshipCell = (props) => {
         }
       }
     }
-  }, [cellData, relationTo, field]);
+  }, [cellData, relationTo, field, collections]);
 
   return (
     <React.Fragment>
@@ -49,11 +49,11 @@ const RelationshipCell = (props) => {
 };
 
 RelationshipCell.defaultProps = {
-  cellData: undefined,
+  data: undefined,
 };
 
 RelationshipCell.propTypes = {
-  cellData: PropTypes.oneOfType([
+  data: PropTypes.oneOfType([
     PropTypes.shape({}),
     PropTypes.array,
     PropTypes.string,
diff --git a/src/client/components/views/collections/List/Cell/types/index.js b/src/client/components/views/collections/List/Cell/types/index.js
new file mode 100644
index 0000000000..15307d8c2b
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/index.js
@@ -0,0 +1,9 @@
+import relationship from './Relationship';
+import date from './Date';
+import blocks from './Blocks';
+
+export default {
+  relationship,
+  date,
+  blocks,
+};