From 4a3f8db6e2e0def877e037ddf62abc57c5dbb430 Mon Sep 17 00:00:00 2001
From: Mandy Parson <amanda.parson@nasa.gov>
Date: Tue, 23 Jan 2024 10:29:55 -0700
Subject: [PATCH] MMT-3492: Fixing 'data' structure

---
 .../src/js/components/DraftList/DraftList.jsx | 64 ++++++++++++-------
 .../js/components/Pagination/Pagination.jsx   | 10 +++
 static/src/js/components/Table/Table.jsx      | 18 +++---
 .../components/Table/__tests__/Table.test.js  | 39 ++++++-----
 .../__tests__/stringifyCircularJSON.test.js   | 18 ------
 static/src/js/utils/stringifyCircularJSON.js  | 22 -------
 6 files changed, 85 insertions(+), 86 deletions(-)
 create mode 100644 static/src/js/components/Pagination/Pagination.jsx
 delete mode 100644 static/src/js/utils/__tests__/stringifyCircularJSON.test.js
 delete mode 100644 static/src/js/utils/stringifyCircularJSON.js

diff --git a/static/src/js/components/DraftList/DraftList.jsx b/static/src/js/components/DraftList/DraftList.jsx
index 4e8f52438..511e9c5f9 100644
--- a/static/src/js/components/DraftList/DraftList.jsx
+++ b/static/src/js/components/DraftList/DraftList.jsx
@@ -59,28 +59,48 @@ const DraftList = ({ draftType }) => {
     const draftLink = `/drafts/${`${paramDraftType}`}/${conceptId}`
 
     return (
-      [
-        <Link key={`${conceptId}/col1`} to={draftLink}>
-          {name || '<Blank Name>'}
-        </Link>,
-        <span key={`${conceptId}/col2`}>
-          {longName || '<Untitled Record>'}
-        </span>,
-        <span key={`${conceptId}/col3`}>
-          {new Date(revisionDate).toISOString().split('T')[0]}
-        </span>,
-        <div key={`${conceptId}/col4`} className="d-flex">
-          <Button
-            className="d-flex"
-            Icon={FaFileDownload}
-            onClick={() => handleDownloadClick(conceptId)}
-            variant="secondary"
-            size="sm"
-          >
-            Download JSON
-          </Button>
-        </div>
-      ]
+      {
+        key: `${conceptId}`,
+        cells:
+          [
+            {
+              value:
+              (
+                <Link to={draftLink}>
+                  {name || '<Blank Name>'}
+                </Link>
+              )
+            },
+            {
+              value:
+              (
+                longName || '<Untitled Record>'
+              )
+            },
+            {
+              value:
+              (
+                new Date(revisionDate).toISOString().split('T')[0]
+              )
+            },
+            {
+              value:
+              (
+                <div className="d-flex">
+                  <Button
+                    className="d-flex"
+                    Icon={FaFileDownload}
+                    onClick={() => handleDownloadClick(conceptId)}
+                    variant="secondary"
+                    size="sm"
+                  >
+                    Download JSON
+                  </Button>
+                </div>
+              )
+            }
+          ]
+      }
     )
   })
   )
diff --git a/static/src/js/components/Pagination/Pagination.jsx b/static/src/js/components/Pagination/Pagination.jsx
new file mode 100644
index 000000000..86f29699c
--- /dev/null
+++ b/static/src/js/components/Pagination/Pagination.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Pagination = () => {
+	console.log('rendered')
+  return (
+    <h1>Pagination</h1>
+  )
+}
+
+export default Pagination
diff --git a/static/src/js/components/Table/Table.jsx b/static/src/js/components/Table/Table.jsx
index 8a92381b1..f832221bb 100644
--- a/static/src/js/components/Table/Table.jsx
+++ b/static/src/js/components/Table/Table.jsx
@@ -4,7 +4,6 @@ import BootstrapTable from 'react-bootstrap/Table'
 import Placeholder from 'react-bootstrap/Placeholder'
 
 import For from '../For/For'
-import stringifyCircularJSON from '../../utils/stringifyCircularJSON'
 
 /**
  * Table
@@ -54,17 +53,17 @@ const Table = ({
     )
   } else if (data.length > 0) {
     const rowData = data.map((row) => {
-      const rowKey = stringifyCircularJSON(row)
-
+      const { cells, key } = row
+      const rowKey = key
       return (
         <tr key={`${rowKey}`}>
           {
-            row.map((cell, index) => {
-              const cellKey = stringifyCircularJSON(cell)
-
+            cells.map((cell, index) => {
+              const cellKey = `${rowKey}_${headers[index]}`
+              const { value } = cell
               return (
                 <td key={cellKey} className={classNames[index] || 'col-auto'}>
-                  {cell}
+                  {value}
                 </td>
               )
             })
@@ -102,7 +101,10 @@ Table.propTypes = {
   headers: PropTypes.arrayOf(PropTypes.string).isRequired,
   classNames: PropTypes.arrayOf(PropTypes.string),
   loading: PropTypes.bool,
-  data: PropTypes.node.isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    cells: PropTypes.arrayOf(PropTypes.shape({}))
+  })).isRequired,
   error: PropTypes.string
 }
 
diff --git a/static/src/js/components/Table/__tests__/Table.test.js b/static/src/js/components/Table/__tests__/Table.test.js
index ad9305ffa..c20ab43a0 100644
--- a/static/src/js/components/Table/__tests__/Table.test.js
+++ b/static/src/js/components/Table/__tests__/Table.test.js
@@ -12,22 +12,29 @@ const setup = (overrideProps = {}) => {
     ],
     loading: false,
     data: [
-      [
-        <span key="BEAM-001/col2">
-          Row 1 Cell 1
-        </span>,
-        <span key="BEAM-001/col2">
-          Row 1 Cell 2
-        </span>
-      ],
-      [
-        <span key="BEAM-001/col2">
-          Row 2 Cell 1
-        </span>,
-        <span key="BEAM-001/col2">
-          Row 2 Cell 2
-        </span>
-      ]
+      {
+        key: 'conceptId001',
+        cells: [
+          {
+            value: ('Row 1 Cell 1')
+          },
+          {
+            value: ('Row 1 Cell 2')
+          }
+        ]
+      },
+      {
+        key: 'conceptId002',
+        cells: [
+          {
+            value: ('Row 2 Cell 1')
+          },
+          {
+            value: ('Row 2 Cell 2')
+          }
+        ]
+      }
+
     ],
     ...overrideProps
   }
diff --git a/static/src/js/utils/__tests__/stringifyCircularJSON.test.js b/static/src/js/utils/__tests__/stringifyCircularJSON.test.js
deleted file mode 100644
index ded207cf8..000000000
--- a/static/src/js/utils/__tests__/stringifyCircularJSON.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import stringifyCircularJSON from '../stringifyCircularJSON'
-
-const circularObject = {
-  name: 'Jane Doe'
-}
-
-circularObject.address = {
-  city: 'Circuit City',
-  owner: circularObject
-}
-
-describe('stringifyCircularJSON', () => {
-  describe('when passed a circular JSON reference', () => {
-    test('returns a usable string', () => {
-      expect(stringifyCircularJSON(circularObject)).toEqual('{"name":"Jane Doe","address":{"city":"Circuit City"}}')
-    })
-  })
-})
diff --git a/static/src/js/utils/stringifyCircularJSON.js b/static/src/js/utils/stringifyCircularJSON.js
deleted file mode 100644
index 70af4392c..000000000
--- a/static/src/js/utils/stringifyCircularJSON.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * This returns a usable string when JSON.stringify can't be used due to
- * a circular reference.
- * @param {Object} obj The circular JSON to be modified
- * @returns {string} stringified circular JSON
- */
-
-const stringifyCircularJSON = (obj) => {
-  const seen = new WeakSet()
-
-  return JSON.stringify(obj, (k, v) => {
-    if (v !== null && typeof v === 'object') {
-      if (seen.has(v)) return
-      seen.add(v)
-    }
-
-    // eslint-disable-next-line consistent-return
-    return v
-  })
-}
-
-export default stringifyCircularJSON