diff --git a/src/components/Utilities/index.js b/src/components/Utilities/index.js index 9cf5e49ae81d251ea1f462be6bf389080a427ecc..107dedf2d3bed164a5767900e939a199617bfe50 100644 --- a/src/components/Utilities/index.js +++ b/src/components/Utilities/index.js @@ -7,7 +7,7 @@ import request from '../../utils/request'; import { getHeaders, utilityURL } from '../../utils/rest_services'; import { loadBuildingDetail } from '../../containers/BuildingOverview/actions'; -import UtilityForm from '../UtilityForm'; +import UtilityAccount from '../UtilityAccount'; class Utilities extends Component { constructor(props) { @@ -16,6 +16,7 @@ class Utilities extends Component { this.state = { accountLines: [], error: false, + accountsCounter: 0, }; } @@ -45,27 +46,30 @@ class Utilities extends Component { headers: getHeaders(), }).then((res) => { if (!res.err && res.data.utilities) { - res.data.utilities.forEach((item) => { - this.addAccountLine({ + const allAccounts = res.data.utilities.map(account => ( + this.createUtilityComponent({ building_address: address, - utility: item.type, - account_number: item.account_number, - username: item.login, - password: item.pass, - access_code: item.access_code, + utility: account.type, + account_number: account.account_number, + username: account.login, + password: account.pass, + access_code: account.access_code, }, - item.url_download, - true); + account.url_download, + ) + )); + const blankAccount = this.createUtilityComponent(); + this.setState({ + accountLines: this.state.accountLines.concat(allAccounts, blankAccount), }); - this.addAccountLine(); + this.resetErrorMessage(); } else if (res.err) { - this.setState({ error: res.err.message }); + this.setState({ error: `Failed to retrieve utility accounts. | ${res.err.message}` }); } }); } - /* eslint-disable arrow-body-style */ - getUtilityBill = (form, updateLoadingState, setDownloadURL) => { + updateUtilityBill = (form, updateLoadingState, setDownloadURL) => { request(utilityURL, { method: 'PUT', headers: getHeaders(), @@ -76,15 +80,15 @@ class Utilities extends Component { }), }).then((res) => { if (res.err) { - this.setState({ error: 'Failed to retrieve utility bill' }); + this.setState({ error: `Failed to retrieve utility bill. | ${res.err.message}` }); } else { setDownloadURL(res.data.download_url); + this.resetErrorMessage(); } updateLoadingState(false); }); } - createAccount = (form) => { request(utilityURL, { method: 'POST', @@ -96,47 +100,72 @@ class Utilities extends Component { }), }).then((res) => { if (res.err) { - this.setState({ error: 'Failed to create account' }); + this.setState({ error: `Failed to create account. | ${res.err.message}` }); + } else { + /* NOTE: The reason to remove the last item and re-add it + is to update the props of that component. If the user decides to delete the newly + created account then we will need the account_number in the props to find it. + */ + const allAccounts = this.state.accountLines.slice(); + allAccounts.pop(); + allAccounts.push(this.createUtilityComponent(form)); + allAccounts.push(this.createUtilityComponent()); + this.setState({ accountLines: allAccounts }); + this.resetErrorMessage(); } }); - this.addAccountLine(); } - deleteAccountLine = (lineItem) => { + deleteAccountLine = (accountLineToRemove) => { const accounts = this.state.accountLines; - const accountToRemove = lineItem.props.form.account_number; + const accountNumberToRemove = accountLineToRemove.state.form.account_number; - request(`${utilityURL}${this.props.buildingId}?account_number=${accountToRemove}`, { + request(`${utilityURL}${this.props.buildingId}?account_number=${accountNumberToRemove}`, { method: 'DELETE', headers: getHeaders(), }).then((res) => { if (!res.err) { - /* eslint-disable arrow-body-style */ - // TODO remove eslint disable - const newAccounts = accounts.filter((item) => { - return item.props.form.account_number !== accountToRemove; - }); - /* eslint-enable */ + const newAccounts = accounts.filter(account => ( + account.props.form.account_number !== accountNumberToRemove + )); + this.setState({ accountLines: newAccounts }); + this.resetErrorMessage(); } else { - this.setState({ error: 'Failed to delete account' }); + this.setState({ error: `Failed to delete account. | ${res.err.message}` }); } }); } - addAccountLine = (form, downloadURL, disabled = false, loading = false) => { - const curr = this.state.accountLines; - curr.push(); - this.setState({ accountLines: curr }); + createUtilityComponent = (incForm, downloadURL = '#') => { + let accountProps = {}; + const { accountsCounter } = this.state; + + if (incForm !== undefined) { + accountProps = { + form: incForm, + downloadURL, + disabled: true, + }; + } + + this.setState({ + accountsCounter: accountsCounter + 1, + }); + + return ( + + ); + } + + resetErrorMessage = () => { + this.setState({ error: false }); } render() { diff --git a/src/components/UtilityForm/index.js b/src/components/UtilityAccount/index.js similarity index 63% rename from src/components/UtilityForm/index.js rename to src/components/UtilityAccount/index.js index add05d4875b38fcbc729c68ac0a8f10d63802c53..48e067ff0813710ec7ae16b36069b5dd1266a22a 100644 --- a/src/components/UtilityForm/index.js +++ b/src/components/UtilityAccount/index.js @@ -1,13 +1,11 @@ import React, { Component, PropTypes } from 'react'; import './styles.css'; -class UtilityForm extends Component { +class UtilityAccount extends Component { constructor(props) { super(props); this.state = { - disabled: this.props.disabled, - loading: this.props.loading, form: { utility: this.props.form.utility, account_number: this.props.form.account_number, @@ -16,37 +14,37 @@ class UtilityForm extends Component { access_code: this.props.form.access_code, }, downloadURL: this.props.downloadURL, + disabled: this.props.disabled, + loading: false, }; } + setDownloadURL = url => ( + this.setState({ downloadURL: url }) + ) - getUtilityBill = (event) => { - event.preventDefault(); - this.updateLoadingState(true); - this.props.getUtilityBill(this.state.form, this.updateLoadingState, this.setDownloadURL); - } - - /* eslint-disable arrow-body-style */ - setDownloadURL = (url) => { - this.setState({ downloadURL: url }); - } + updateLoadingState = isLoading => ( + this.setState({ loading: isLoading }) + ) - updateLoadingState = (isLoading) => { - this.setState({ loading: isLoading }); - } - - handleInputChange = (event) => { + handleInputChange = event => ( this.setState({ form: { ...this.state.form, [event.target.name]: event.target.value, }, - }); + }) + ) + + handleUpdatingUtilityBill = (event) => { + event.preventDefault(); + this.updateLoadingState(true); + this.props.updateUtilityBill(this.state.form, this.updateLoadingState, this.setDownloadURL); } handleCreateAccount = (event) => { event.preventDefault(); this.setState({ disabled: true }); - this.props.createAccount(this.state.form); + this.props.createAccount({ ...this.state.form }); } handleDeleteAccount = (event) => { @@ -54,6 +52,39 @@ class UtilityForm extends Component { this.props.deleteAccount(this); } + renderAddAccountBtn = () => ( + + ) + + renderFetchAndDownloadBtn = () => ( +
+ + Download + + + +
+ ) + renderNatGrid = () => { if (this.state.form.utility !== 'national_grid_gas') { return
; @@ -67,7 +98,7 @@ class UtilityForm extends Component { placeholder="username" value={this.state.form.username} onChange={this.handleInputChange} - disabled={this.state.disabled || false} + disabled={this.state.disabled} /> @@ -110,42 +141,10 @@ class UtilityForm extends Component { placeholder="account number" value={this.state.form.account_number} onChange={this.handleInputChange} - disabled={this.state.disabled || false} + disabled={this.state.disabled} /> - {!this.state.disabled || -
- - Download - - - -
- } - {this.state.disabled || - - } - + {!this.state.disabled ? this.renderAddAccountBtn() : this.renderFetchAndDownloadBtn()} {this.renderNatGrid()}
@@ -154,9 +153,7 @@ class UtilityForm extends Component { } } -UtilityForm.propTypes = { - disabled: PropTypes.bool, - loading: PropTypes.bool, +UtilityAccount.propTypes = { form: PropTypes.shape({ building_address: PropTypes.string, utility: PropTypes.string, @@ -166,14 +163,13 @@ UtilityForm.propTypes = { password: PropTypes.string, }), downloadURL: PropTypes.string, + disabled: PropTypes.bool, createAccount: PropTypes.func, deleteAccount: PropTypes.func, - getUtilityBill: PropTypes.func, + updateUtilityBill: PropTypes.func, }; -UtilityForm.defaultProps = { - disable: false, - loading: false, +UtilityAccount.defaultProps = { form: { building_address: '', utility: 'con_edison_electric', @@ -182,6 +178,7 @@ UtilityForm.defaultProps = { username: '', password: '', }, + disabled: false, }; -export default UtilityForm; +export default UtilityAccount; diff --git a/src/components/UtilityForm/styles.css b/src/components/UtilityAccount/styles.css similarity index 100% rename from src/components/UtilityForm/styles.css rename to src/components/UtilityAccount/styles.css diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBar/reducer.js index 3479a94c297db364781849e6c9db46c697e51b06..390e3b19f71bdb38ec8009c9a4d1e4867dde7852 100644 --- a/src/containers/SearchBar/reducer.js +++ b/src/containers/SearchBar/reducer.js @@ -6,7 +6,6 @@ import { LOAD_BUILDINGS_ERROR, } from './constants'; - const initState = { term: { address: '',