From 4e90bc0df6c8db78b40e7a2e860b264d8ac84654 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Thu, 2 Feb 2017 16:02:29 -0500 Subject: [PATCH 1/4] Remove initial search term and automatic search --- src/containers/SearchBar/index.js | 3 ++- src/containers/SearchBar/reducer.js | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index de62048b..5e5fa80b 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -22,7 +22,8 @@ class BuildingList extends Component { onInputChange(event) { this.setState({ term: event.target.value }, () => { - this.getBuildings(); + // TODO: uncomment this once building service can handle more calls + // this.getBuildings(); }); } diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBar/reducer.js index 401ca627..d8d4a435 100644 --- a/src/containers/SearchBar/reducer.js +++ b/src/containers/SearchBar/reducer.js @@ -5,9 +5,8 @@ import { LOAD_BUILDINGS_ERROR, } from './constants'; -// TODO: remove hard coded search term const initState = { - term: '107 broadway', + term: '', buildings: [], loading: false, error: false, -- GitLab From cff6bcafb7a09213129b7e4e1339316c652bffd9 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Thu, 2 Feb 2017 23:28:49 -0500 Subject: [PATCH 2/4] Fix utilities form --- src/components/Utilities/index.js | 101 ++++++++++++++--------- src/components/UtilityForm/index.js | 119 ++++++++++++++-------------- 2 files changed, 120 insertions(+), 100 deletions(-) diff --git a/src/components/Utilities/index.js b/src/components/Utilities/index.js index 9cf5e49a..4b9b75ed 100644 --- a/src/components/Utilities/index.js +++ b/src/components/Utilities/index.js @@ -16,6 +16,7 @@ class Utilities extends Component { this.state = { accountLines: [], error: false, + accountsCounter: 0, }; } @@ -45,27 +46,29 @@ 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(); } else if (res.err) { this.setState({ error: res.err.message }); } }); } - /* eslint-disable arrow-body-style */ - getUtilityBill = (form, updateLoadingState, setDownloadURL) => { + updateUtilityBill = (form, updateLoadingState, setDownloadURL) => { request(utilityURL, { method: 'PUT', headers: getHeaders(), @@ -76,7 +79,7 @@ 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); } @@ -84,7 +87,6 @@ class Utilities extends Component { }); } - createAccount = (form) => { request(utilityURL, { method: 'POST', @@ -96,47 +98,68 @@ 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.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 }); } 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 ( + + ); } render() { diff --git a/src/components/UtilityForm/index.js b/src/components/UtilityForm/index.js index add05d48..33ceb0ac 100644 --- a/src/components/UtilityForm/index.js +++ b/src/components/UtilityForm/index.js @@ -6,8 +6,6 @@ class UtilityForm extends Component { 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()}
@@ -155,8 +154,6 @@ class UtilityForm extends Component { } UtilityForm.propTypes = { - disabled: PropTypes.bool, - loading: PropTypes.bool, 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, form: { building_address: '', utility: 'con_edison_electric', @@ -182,6 +178,7 @@ UtilityForm.defaultProps = { username: '', password: '', }, + disabled: false, }; export default UtilityForm; -- GitLab From 88610b4a6bd4295e94d29ea225fcaef594e51eb4 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Thu, 2 Feb 2017 23:34:34 -0500 Subject: [PATCH 3/4] Rename UtilityForm to UtilityAccount --- src/components/Utilities/index.js | 16 +++++++++++----- .../{UtilityForm => UtilityAccount}/index.js | 8 ++++---- .../{UtilityForm => UtilityAccount}/styles.css | 0 3 files changed, 15 insertions(+), 9 deletions(-) rename src/components/{UtilityForm => UtilityAccount}/index.js (97%) rename src/components/{UtilityForm => UtilityAccount}/styles.css (100%) diff --git a/src/components/Utilities/index.js b/src/components/Utilities/index.js index 4b9b75ed..96193a8e 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) { @@ -62,6 +62,7 @@ class Utilities extends Component { this.setState({ accountLines: this.state.accountLines.concat(allAccounts, blankAccount), }); + this.resetErrorMessage(); } else if (res.err) { this.setState({ error: res.err.message }); } @@ -82,6 +83,7 @@ class Utilities extends Component { this.setState({ error: `Failed to retrieve utility bill | ${res.err.message}` }); } else { setDownloadURL(res.data.download_url); + this.resetErrorMessage(); } updateLoadingState(false); }); @@ -108,9 +110,8 @@ class Utilities extends Component { allAccounts.pop(); allAccounts.push(this.createUtilityComponent(form)); allAccounts.push(this.createUtilityComponent()); - this.setState({ - accountLines: allAccounts, - }); + this.setState({ accountLines: allAccounts }); + this.resetErrorMessage(); } }); } @@ -129,6 +130,7 @@ class Utilities extends Component { )); this.setState({ accountLines: newAccounts }); + this.resetErrorMessage(); } else { this.setState({ error: `Failed to delete account. | ${res.err.message}` }); } @@ -152,7 +154,7 @@ class Utilities extends Component { }); return ( - { + this.setState({ error: false }); + } + render() { return (
diff --git a/src/components/UtilityForm/index.js b/src/components/UtilityAccount/index.js similarity index 97% rename from src/components/UtilityForm/index.js rename to src/components/UtilityAccount/index.js index 33ceb0ac..48e067ff 100644 --- a/src/components/UtilityForm/index.js +++ b/src/components/UtilityAccount/index.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import './styles.css'; -class UtilityForm extends Component { +class UtilityAccount extends Component { constructor(props) { super(props); @@ -153,7 +153,7 @@ class UtilityForm extends Component { } } -UtilityForm.propTypes = { +UtilityAccount.propTypes = { form: PropTypes.shape({ building_address: PropTypes.string, utility: PropTypes.string, @@ -169,7 +169,7 @@ UtilityForm.propTypes = { updateUtilityBill: PropTypes.func, }; -UtilityForm.defaultProps = { +UtilityAccount.defaultProps = { form: { building_address: '', utility: 'con_edison_electric', @@ -181,4 +181,4 @@ UtilityForm.defaultProps = { 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 -- GitLab From 7d6b7d4ad44428d4fdb62cbf24d0f713445942b0 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Thu, 2 Feb 2017 23:37:42 -0500 Subject: [PATCH 4/4] Fix error messages in utils --- src/components/Utilities/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Utilities/index.js b/src/components/Utilities/index.js index 96193a8e..107dedf2 100644 --- a/src/components/Utilities/index.js +++ b/src/components/Utilities/index.js @@ -64,7 +64,7 @@ class Utilities extends Component { }); this.resetErrorMessage(); } else if (res.err) { - this.setState({ error: res.err.message }); + this.setState({ error: `Failed to retrieve utility accounts. | ${res.err.message}` }); } }); } @@ -80,7 +80,7 @@ class Utilities extends Component { }), }).then((res) => { if (res.err) { - this.setState({ error: `Failed to retrieve utility bill | ${res.err.message}` }); + this.setState({ error: `Failed to retrieve utility bill. | ${res.err.message}` }); } else { setDownloadURL(res.data.download_url); this.resetErrorMessage(); @@ -100,7 +100,7 @@ class Utilities extends Component { }), }).then((res) => { if (res.err) { - this.setState({ error: `Failed to create account | ${res.err.message}` }); + 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 -- GitLab