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(