diff --git a/src/components/Business.js b/src/components/Business.js index 471b02d..4daa034 100644 --- a/src/components/Business.js +++ b/src/components/Business.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import LinkButton from '../patterns/LinkButton'; import ChildRefList from './ChildRefList'; +import withChildSearch from './ChildSearchHOC'; import { getHighlightedText } from '../utils/helperMethods'; import industryCodeDescription from '../utils/siccode'; import { employmentBands, legalStatusBands, tradingStatusBands, turnoverBands } from '../utils/convertBands'; @@ -15,42 +15,29 @@ import { employmentBands, legalStatusBands, tradingStatusBands, turnoverBands } * by setting the loading prop to true, however the spinner * wouldn't show (inspecting the HTML showed that it was there). */ -class Business extends React.Component { - constructor(props) { - super(props); - this.state = { - showRefs: false, - isLoading: false, - }; - } - showRefs = () => this.setState({ ...this.state.showRefs, showRefs: !this.state.showRefs }); - isLoading = (isLoading) => this.setState({ ...this.state.isLoading, isLoading }) - render = () => { - const business = this.props.business; - const description = (industryCodeDescription[business.industryCode] === undefined) - ? 'No industry code description found' : industryCodeDescription[business.industryCode]; - return ( -
-

{(this.props.toHighlight !== '') ? getHighlightedText(business, this.props.toHighlight) : business.businessName}

- - - - - - - - - - -
UBRN{business.id}
Post code{business.postCode}
Industry{business.industryCode} – {description}
Trading status{tradingStatusBands[business.tradingStatus]}
Legal status{legalStatusBands[business.legalStatus]}
Employment band{employmentBands[business.employmentBands]}
Turnover band{turnoverBands[business.turnover]}
- - {this.state.showRefs && - - } -
- ); - } -} +const Business = (props) => { + const business = props.business; + const ChildList = withChildSearch(ChildRefList); + const description = (industryCodeDescription[business.industryCode] === undefined) + ? 'No industry code description found' : industryCodeDescription[business.industryCode]; + return ( +
+

{(props.toHighlight !== '') ? getHighlightedText(business, props.toHighlight) : business.businessName}

+ + + + + + + + + + +
UBRN{business.id}
Post code{business.postCode}
Industry{business.industryCode} – {description}
Trading status{tradingStatusBands[business.tradingStatus]}
Legal status{legalStatusBands[business.legalStatus]}
Employment band{employmentBands[business.employmentBands]}
Turnover band{turnoverBands[business.turnover]}
+ +
+ ); +}; Business.propTypes = { business: PropTypes.object.isRequired, diff --git a/src/components/ChildRefList.js b/src/components/ChildRefList.js index fb8fd75..84debff 100644 --- a/src/components/ChildRefList.js +++ b/src/components/ChildRefList.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import LinkButton from '../patterns/LinkButton'; import Panel from '../patterns/Panel'; import config from '../config/api-urls'; import accessAPI from '../utils/accessAPI'; @@ -7,63 +8,43 @@ import accessAPI from '../utils/accessAPI'; const { REROUTE_URL, API_VERSION, BUSINESS_ENDPOINT } = config; /** - * @class ChildRefTable - This is a sub list of the child references of + * @const ChildRefTable - This is a sub list of the child references of * a business that is displayed when a user clicks on the 'Show child - * references' link in the parent component. + * references' link. This component is only ever used as a child of + * ChildSearchHOC which provides the loading/fetchData props. */ -class ChildRefList extends React.Component { - constructor(props) { - super(props); - this.state = { - isLoading: true, - data: {}, - error: false, - errorMessage: '', - }; - this.fetchData(this.props.id); - } - fetchData = (id) => { - this.props.onLoad(true); - accessAPI(REROUTE_URL, 'POST', sessionStorage.accessToken, JSON.stringify({ - method: 'GET', - endpoint: `${API_VERSION}/${BUSINESS_ENDPOINT}/${id}`, - }), 'business') - .then(json => { - this.setState({ ...this.state, data: json, isLoading: false }); - this.props.onLoad(false); - }) - .catch(() => { - const errorMessage = 'Error: Unable to get child references.'; - this.setState({ ...this.state, errorMessage, error: true, isLoading: false }); - this.props.onLoad(false); - }); - } - chLink = (id) => ({id}); - render = () => ( -
- - {(!this.state.isLoading && !this.state.error) && - - - {(this.state.data.companyNo !== '') && - - } - { this.state.data.vatRefs.map(v => { - return (); - }) } - { this.state.data.payeRefs.map(p => { - return (); - }) } - -
CH{this.chLink(this.state.data.companyNo)}
VAT{v}
PAYE{p}
- } -
- ); -} +const ChildRefList = (props) => ( +
+ + + + {props.finishedLoading && + + + {(props.data.companyNo !== '') && + + } + { props.data.vatRefs.map(v => { + return (); + }) } + { props.data.payeRefs.map(p => { + return (); + }) } + +
CH{props.createChLink(props.data.companyNo)}
VAT{v}
PAYE{p}
+ } +
+); ChildRefList.propTypes = { - id: PropTypes.number.isRequired, - onLoad: PropTypes.func.isRequired, + error: PropTypes.bool.isRequired, + errorMessage: PropTypes.string.isRequired, + closeModal: PropTypes.func.isRequired, + data: PropTypes.object.isRequired, + finishedLoading: PropTypes.bool.isRequired, + isLoading: PropTypes.bool.isRequired, + createChLink: PropTypes.func.isRequired, + fetchData: PropTypes.func.isRequired, }; export default ChildRefList; diff --git a/src/components/ChildRefTable.js b/src/components/ChildRefTable.js index 0176726..5498c99 100644 --- a/src/components/ChildRefTable.js +++ b/src/components/ChildRefTable.js @@ -3,51 +3,26 @@ import PropTypes from 'prop-types'; import ReactTable from 'react-table'; import Panel from '../patterns/Panel'; import industryCodeDescription from '../utils/siccode'; -import config from '../config/api-urls'; import { formatData } from '../utils/helperMethods'; -import accessAPI from '../utils/accessAPI'; - -const { REROUTE_URL, API_VERSION, BUSINESS_ENDPOINT } = config; /** * @class ChildRefTable - This is a sub table shown as an expandable row * within the main ReactTable results table. When this component is created, * the data will be fetched. Redux isn't used as the data is only required - * by this component. + * by this component. This component is only ever used as a child of + * ChildSearchHOC, which provides the correct fetchData related props. */ class ChildRefTable extends React.Component { - constructor(props) { - super(props); - this.state = { - isLoading: true, - data: [], - error: false, - errorMessage: '', - }; - this.fetchData(this.props.row); - } - fetchData = (row) => { - accessAPI(REROUTE_URL, 'POST', sessionStorage.accessToken, JSON.stringify({ - method: 'GET', - endpoint: `${API_VERSION}/${BUSINESS_ENDPOINT}/${row.original.id}`, - }), 'business') - .then(json => this.setState({ ...this.state, data: formatData(json), isLoading: false })) - .catch(() => this.setState({ - ...this.state, - errorMessage: 'Error: Unable to get child references.', - error: true, - isLoading: false, - })); - } - closeModal = () => this.setState({ ...this.state, error: false, errorMessage: '' }); + componentDidMount = () => this.props.fetchData(); render = () => { - const business = this.props.row.original; + const business = this.props.data; const description = (industryCodeDescription[business.industryCode] === undefined) ? 'No industry code description found' : industryCodeDescription[business.industryCode]; + const formattedData = (this.props.finishedLoading) ? formatData(this.props.data) : []; return (
this.setState({ finishedLoading: false }); + fetchData = () => { + if (this.state.finishedLoading) { + this.setState({ finishedLoading: false }); + } else { + const id = this.props.id; + this.setState({ ...this.state, isLoading: true }, () => { + accessAPI(REROUTE_URL, 'POST', sessionStorage.accessToken, JSON.stringify({ + method: 'GET', + endpoint: `${API_VERSION}/${BUSINESS_ENDPOINT}/${id}`, + }), 'business') + .then(json => this.setState({ ...this.state, data: json, finishedLoading: true, isLoading: false })) + .catch(() => { + const errorMessage = 'Error: Unable to get child references.'; + this.setState({ ...this.state, errorMessage, error: true, finishedLoading: true, isLoading: false }); + }); + }); + } + } + createChLink = (id) => ({id}); + closeModal = () => this.setState({ ...this.state, error: false, errorMessage: '' }); + render = () => ( +
+ +
+ ) + } + + ChildSearchHOC.propTypes = { + id: PropTypes.number.isRequired, + }; + + return ChildSearchHOC; +} diff --git a/src/components/ResultsTable.js b/src/components/ResultsTable.js index 7ced616..51ebc30 100644 --- a/src/components/ResultsTable.js +++ b/src/components/ResultsTable.js @@ -2,11 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; +import withChildSearch from './ChildSearchHOC'; import ChildRefTable from '../components/ChildRefTable'; import { getHighlightedText } from '../utils/helperMethods'; import { employmentBands, legalStatusBands, tradingStatusBands, turnoverBands } from '../utils/convertBands'; const ResultsTable = (props) => { + const ChildTable = withChildSearch(ChildRefTable); return (
{ ]} defaultPageSize={props.defaultPageSize} className="-striped -highlight" - SubComponent={row => } + SubComponent={row => } />
);