MMT-3492: Fixing 'data' structure

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>
+ )
+ }
+ ]
+ }
  )
  })
  )

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

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
 }
 

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
  }