feat: change genericItemRenderer to defaultItemRenderer and booleanIt…

…emRenderer
uktrade · Aug 19, 2019 · ba939f4 · ba939f4
1 parent c98446d
commit ba939f4
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 49 deletions.
diff --git a/src/activity-feed/__snapshots__/ActivityFeedCard.test.jsx.snap b/src/activity-feed/__snapshots__/ActivityFeedCard.test.jsx.snap
@@ -131,10 +131,10 @@ exports[`ActivityFeedCard when a New OMIS order is added should render an activi
               }
             >
               <ul
-                className="sc-gojNiO qHzYu"
+                className="sc-bXGyLb gqHpzF"
               >
                 <li
-                  className="sc-cQFLBn erMDhO"
+                  className="sc-daURTG SVUCG"
                 >
                   <span>
                     Test CMU 1
@@ -785,10 +785,10 @@ exports[`ActivityFeedCard when an investment project is Non-FDI should render th
               }
             >
               <ul
-                className="sc-gojNiO qHzYu"
+                className="sc-bXGyLb gqHpzF"
               >
                 <li
-                  className="sc-cQFLBn erMDhO"
+                  className="sc-daURTG SVUCG"
                 >
                   <span>
                     Test CMU 1

diff --git a/src/activity-feed/activity-feed-cards/CompaniesHouseAccount.jsx b/src/activity-feed/activity-feed-cards/CompaniesHouseAccount.jsx
@@ -14,6 +14,7 @@ import {
 import CardUtils from './card/CardUtils'
 import DateUtils from '../../utils/DateUtils'
 import NumberUtils from '../../utils/NumberUtils'
+import { SOURCE_TYPES } from '../constants'
 
 export default class CompaniesHouseAccount extends React.PureComponent {
   static propTypes = {
@@ -46,7 +47,7 @@ export default class CompaniesHouseAccount extends React.PureComponent {
           <CardHeading
             link={{ taxonomy, text: reference }}
             blockText="Companies House"
-            sourceType="externalDataSource"
+            sourceType={SOURCE_TYPES.external}
             subHeading="Accounts records show that"
             summary={summary}
           />

diff --git a/src/activity-feed/activity-feed-cards/CompaniesHouseCompany.jsx b/src/activity-feed/activity-feed-cards/CompaniesHouseCompany.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { get } from 'lodash'
+import { get, uniqueId } from 'lodash'
 
 import PropTypes from 'prop-types'
 import {
@@ -11,8 +11,13 @@ import {
   CardTable,
 } from './card'
 
+import {
+  DefaultItemRenderer,
+} from './card/item-renderers'
+
 import CardUtils from './card/CardUtils'
 import DateUtils from '../../utils/DateUtils'
+import { SOURCE_TYPES } from '../constants'
 
 export default class CompaniesHouseCompany extends React.PureComponent {
   static propTypes = {
@@ -55,7 +60,7 @@ export default class CompaniesHouseCompany extends React.PureComponent {
         <CardHeader>
           <CardHeading
             blockText="Companies House"
-            sourceType="externalDataSource"
+            sourceType={SOURCE_TYPES.external}
             subHeading="Company records show that"
             summary={summary}
           />
@@ -77,7 +82,14 @@ export default class CompaniesHouseCompany extends React.PureComponent {
               { header: 'Next due date', content: nextDueDate },
               { header: 'Returns last made up date', content: returnsLastMadeUpDate },
               { header: 'Returns next due date', content: returnsNextDueDate },
-              { header: 'SIC code(s)', content: <CardDetailsList items={sicCodesCollection} itemRenderer={GenericItemRenderer} /> },
+              {
+                header: 'SIC code(s)',
+                content: <CardDetailsList
+                  itemPropName="value"
+                  itemRenderer={DefaultItemRenderer}
+                  items={sicCodesCollection}
+                />,
+              },
             ]}
           />
         </CardDetails>

diff --git a/src/activity-feed/activity-feed-cards/HmrcExporter.jsx b/src/activity-feed/activity-feed-cards/HmrcExporter.jsx
@@ -11,8 +11,13 @@ import {
   CardTable,
 } from './card'
 
+import {
+  DefaultItemRenderer,
+} from './card/item-renderers'
+
 import CardUtils from './card/CardUtils'
 import DateUtils from '../../utils/DateUtils'
+import { SOURCE_TYPES } from '../constants'
 
 export default class HmrcExporter extends React.PureComponent {
   static propTypes = {
@@ -41,12 +46,13 @@ export default class HmrcExporter extends React.PureComponent {
       }
     })
 
+
     return (
       <Card>
         <CardHeader>
           <CardHeading
             blockText="HMRC"
-            sourceType="externalDataSource"
+            sourceType={SOURCE_TYPES.external}
             subHeading="Exporters records show that"
             summary={summary}
           />
@@ -60,11 +66,11 @@ export default class HmrcExporter extends React.PureComponent {
           <CardTable rows={
             [
               { header: 'Company name', content: reference },
-
               {
                 header: 'Export Item code(s)',
                 content: <CardDetailsList
-                  itemRenderer={GenericItemRenderer}
+                  itemPropName="value"
+                  itemRenderer={DefaultItemRenderer}
                   items={exportItemCodesCollection}
                 />,
               },

diff --git a/src/activity-feed/activity-feed-cards/card/CardDetailsList.jsx b/src/activity-feed/activity-feed-cards/card/CardDetailsList.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { uniqueId } from 'lodash'
 
 const StyledListItem = styled('li')`
   list-style-type: none;
@@ -15,53 +15,28 @@ export default class CardDetailsList extends React.PureComponent {
   static propTypes = {
     items: PropTypes.arrayOf(PropTypes.object).isRequired,
     itemRenderer: PropTypes.any.isRequired,
+    itemPropName: PropTypes.string,
+  }
+
+  static defaultProps = {
+    itemPropName: null,
   }
 
   render() {
-    const { items, itemRenderer } = this.props
+    const { items, itemRenderer, itemPropName } = this.props
 
     return (
       <StyledUList>
         {
           items.map((item, index) => (
             <StyledListItem key={item.id}>
               {
-                itemRenderer(item, index)
+                itemRenderer(item, index, itemPropName)
               }
             </StyledListItem>
           ))
         }
       </StyledUList>
     )
   }
-
-  renderGenericList = (list) => {
-    return (
-      <StyledUList>
-        {
-          list.map((item, index) => (
-            <StyledListItem key={uniqueId(`key-${index}`)}>
-              {item}
-            </StyledListItem>
-          ))
-        }
-      </StyledUList>
-    )
-  }
-
-  renderList = ({ people, list }) => {
-    if (people) {
-      return this.renderPeopleList(people)
-    } else {
-      return this.renderGenericList(list)
-    }
-  }
-
-  render() {
-    return (
-      <>
-        {this.renderList(this.props)}
-      </>
-    )
-  }
 }
diff --git a/src/activity-feed/activity-feed-cards/card/CardHeadingBlock.jsx b/src/activity-feed/activity-feed-cards/card/CardHeadingBlock.jsx
@@ -4,18 +4,15 @@ import { SPACING } from '@govuk-react/constants'
 import { BLUE, GREY_1 } from 'govuk-colours'
 import { H3 } from 'govuk-react'
 import PropTypes from 'prop-types'
+import { SOURCE_TYPES } from '../../constants'
 
 const BlockHeading = styled(H3)`
   display: inline-block;
   font-weight: normal;
   color: white;
   padding: 2px 5px;
   background-color: ${({ sourceType }) => {
-    if (sourceType && sourceType === 'externalDataSource') {
-      return GREY_1
-    } else {
-      return BLUE
-    }
+    return sourceType === SOURCE_TYPES.external ? GREY_1 : BLUE
   }};
   margin-bottom: ${SPACING.SCALE_2};
 `

diff --git a/src/activity-feed/activity-feed-cards/card/item-renderers/BooleanItemRenderer.jsx b/src/activity-feed/activity-feed-cards/card/item-renderers/BooleanItemRenderer.jsx
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types'
+
+const BooleanItemRenderer = (item, index, property) => {
+  return item[property].toString()
+}
+
+BooleanItemRenderer.propTypes = {
+  item: PropTypes.shape.isRequired,
+  index: PropTypes.number.isRequired,
+  property: PropTypes.string.isRequired,
+}
+
+export default BooleanItemRenderer
diff --git a/src/activity-feed/activity-feed-cards/card/item-renderers/DefaultItemRenderer.jsx b/src/activity-feed/activity-feed-cards/card/item-renderers/DefaultItemRenderer.jsx
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+
+// String and number
+const DefaultItemRenderer = (item, index, property) => {
+  return item[property]
+}
+
+DefaultItemRenderer.propTypes = {
+  item: PropTypes.shape.isRequired,
+  index: PropTypes.number.isRequired,
+  property: PropTypes.string.isRequired,
+}
+
+export default DefaultItemRenderer
diff --git a/src/activity-feed/activity-feed-cards/card/item-renderers/index.js b/src/activity-feed/activity-feed-cards/card/item-renderers/index.js
@@ -1,2 +1,4 @@
 export { default as AdviserItemRenderer } from './AdviserItemRenderer'
 export { default as ContactItemRenderer } from './ContactItemRenderer'
+export { default as DefaultItemRenderer } from './DefaultItemRenderer'
+export { default as BooleanItemRenderer } from './BooleanItemRenderer'
diff --git a/src/activity-feed/constants.js b/src/activity-feed/constants.js
@@ -0,0 +1,5 @@
+export const SOURCE_TYPES = {
+  external: 'externalDataSource',
+}
+
+export default { SOURCE_TYPES }