From 5a4b27641c481a0aecadebe71db3f1acc29999bf Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Tue, 25 Feb 2020 23:19:11 -0500 Subject: [PATCH 01/11] Add the page UnitBreakdown --- src/App.js | 42 ++++++++++- src/UnitBreakdown.js | 167 +++++++++++++++++++++++++++++++++++++++++++ src/index.css | 31 ++++++++ 3 files changed, 239 insertions(+), 1 deletion(-) create mode 100644 src/UnitBreakdown.js diff --git a/src/App.js b/src/App.js index 121d99930..59746f332 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import HeatDistribution from './HeatDistribution'; import SeparateBoiler from './SeparateBoiler'; import HeatingSystemAge from './HeatingSystemAge'; import HeatingSystemPlan from './HeatingSystemPlan'; +import UnitBreakdown from './UnitBreakdown' import BuildingTypes from './BuildingTypes'; import UtilityBills from './UtilityBills'; import ComfortIssues from './ComfortIssues'; @@ -88,7 +89,7 @@ class App extends React.Component { answerIds: [3, 4, 5, 6, 7], answers: { 3: 'fuelOil', 4: 'naturalGas', 5: 'electricResistance', 6: 'dualFuel', 7: 'other' }, prev: 'addressSearch', - next: 'heatDistribution', + next: 'unitBreakdown', }, heatDistribution: { id: 2, @@ -127,6 +128,39 @@ class App extends React.Component { prev: 'heatingSystemAge', next: 'buildingTypes', }, + unitBreakdown: { + title: 'Tell us about yout building.', + // questions: [ + // { + // id: 52, + // answer: '', + // }, + // { + // id: 53, + // answer: '', + // }, + // { + // id: 54, + // answer: '', + // }, + // { + // id: 55, + // answer: '', + // }, + // { + // id: 56, + // answer: '', + // }, + // { + // id: 57, + // answer: '', + // }, + // ], + questions: [52, 53, 54, 55, 56, 57], + answers: [], + prev: 'buildingTypes', + next: 'comfortIssues', + }, buildingTypes: { id: 6, title: 'Which kind of building do you have?', @@ -979,6 +1013,12 @@ class App extends React.Component { answer={this.state.questions['heatingSystemPlan'].value} answerIds={this.state.questions['heatingSystemPlan'].answerIds} />, + unitBreakdown: , buildingTypes: { + this.props.prevQuestion('unitBreakDown'); + } + + nextQuestion = () => { + this.props.nextQuestion( + 'UnitBreakDown', + [ + this.names[this.props.answerIds.indexOf(this.state.heatHotWaterAnswer)], + this.names[this.props.answerIds.indexOf(this.state.electricityAnswer)], + ], + [this.state.heatHotWaterAnswer, this.state.electricityAnswer], + ); + } + + chooseAnswer = (utility, answer) => { + if (utility === 'electricity') { + this.setState({ electricityAnswer: answer }); + } + if (utility === 'heatHotWater') { + this.setState({ heatHotWaterAnswer: answer }); + } + } + + render() { + const content = ( +
+
+ Please tell us about your building units. +
+ + + + { + this.props.questions.map((questionId, index) => { + const questionName = this.names[questionId]; + const answer = this.props.answers[index]; + return ( + +
+
{questionName} :
+ +
+ + ); + }) + } +
+ +
+ + + {/* + + + +
+ Studio: +
+ + + + + +
+ 1 Bedroom: +
+ + + + +
+ +
+ 2 Bedrooms: +
+ + + + + +
+ 3 Bedrooms: +
+ + + + +
+ +
+ 4 Bedrooms: +
+ + + + + +
+ Other: +
+ + + + +
+ +
*/} + + + + {'<'} Back + + + + + + +
+ ); + + return ( +
+ {content} +
+ ); + } +} diff --git a/src/index.css b/src/index.css index 611f192ad..62c879b93 100644 --- a/src/index.css +++ b/src/index.css @@ -327,6 +327,37 @@ code { color: #002F43; } +.unitSection { + font-size: 16px; + font-weight: bold; + width: 100%; + color: #002F43; + text-align: left; + margin-top: 30px; +} + +.unitTitle { + font-size: 16px; + font-weight: bold; + width: 100%; + color: #002F43; + text-align: left; + margin-top: 30px; +} + +.unitText { + font-size: 16px; + font-weight: bold; + width: 40%; + color: #002F43; + text-align: center; + margin-top: 25px; + /* float: left; */ + /* height: 40px; */ + border: #002F43 solid 2px; +} + + .image { width: 30%; } -- GitLab From 1572be91e8121d3801b7dac77a1620b63d9cf957 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 13:18:40 -0500 Subject: [PATCH 02/11] Refactor the code and update reducer and actions --- src/UnitBreakdown.js | 164 ++++++++++++++++++---------------------- src/actions.js | 27 +++++++ src/index.css | 11 ++- src/reducers/reducer.js | 27 +++++++ 4 files changed, 136 insertions(+), 93 deletions(-) diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 10d734fb0..6218b44fb 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -7,8 +7,12 @@ export default class UnitBreakDown extends React.Component { constructor(props) { super(props); this.state = { - electricityAnswer: this.props.electricityAnswer, - heatHotWaterAnswer: this.props.heatHotWaterAnswer, + studio: this.props.answers[0], + oneBedroom: this.props.answers[1], + twoBedroom: this.props.answers[2], + threeBedroom: this.props.answers[3], + fourBedroom: this.props.answers[4], + other: this.props.answers[5], }; this.names = { 52: 'Studio', @@ -28,28 +32,59 @@ export default class UnitBreakDown extends React.Component { ] } + handleInputChange = (event) => { + const val = event.target.value; + const name = event.target.name; + this.setState({ + ...this.state, + [name]: val, + }); + } + prevQuestion = () => { this.props.prevQuestion('unitBreakDown'); } nextQuestion = () => { - this.props.nextQuestion( - 'UnitBreakDown', - [ - this.names[this.props.answerIds.indexOf(this.state.heatHotWaterAnswer)], - this.names[this.props.answerIds.indexOf(this.state.electricityAnswer)], - ], - [this.state.heatHotWaterAnswer, this.state.electricityAnswer], - ); + if(this.validateEmptyInputs()) { + this.props.nextQuestion( + 'unitBreakdown', + [], + [this.state.studio, + this.state.oneBedroom, + this.state.twoBedroom, + this.state.threeBedroom, + this.state.fourBedroom, + this.state.other], + ); + } } - chooseAnswer = (utility, answer) => { - if (utility === 'electricity') { - this.setState({ electricityAnswer: answer }); + validateEmptyInputs() { + const emptyFields = []; + const invalidFields = []; + const errorMessage = []; + const validNumber = /^[0-9]{1,2}$/; + const unitTypes = ['studio', 'oneBedroom', 'twoBedroom', 'threeBedroom', 'fourBedroom', 'other']; + const displayName = ['Studio', 'One Bedroom', 'Two Bedroom', 'Three Bedroom', 'Four Bedroom', 'Other']; + unitTypes.map((unit, index) => { + if (this.state[unit] === undefined) { + emptyFields.push(displayName[index]); + } else if (!(validNumber.test(this.state[unit]))) { + invalidFields.push(displayName[index]); + } + }); + if (emptyFields.length > 0) { + errorMessage.push(`Please fill in:\n${emptyFields.join('\n')}`); + alert(errorMessage); + return false; } - if (utility === 'heatHotWater') { - this.setState({ heatHotWaterAnswer: answer }); + if (invalidFields.length > 0) { + errorMessage.push(`\nInvalid input in:\n${invalidFields.join('\n')}`); + alert(errorMessage); + return false; } + return true; } render() { @@ -59,83 +94,34 @@ export default class UnitBreakDown extends React.Component { Please tell us about your building units. - - - { - this.props.questions.map((questionId, index) => { - const questionName = this.names[questionId]; - const answer = this.props.answers[index]; - return ( - -
-
{questionName} :
- -
- - ); - }) - } -
- -
- - - {/* - -
- Studio: -
- - - - - -
- 1 Bedroom: -
- - - - -
- -
- 2 Bedrooms: -
- - - - - -
- 3 Bedrooms: -
- - - - -
- -
- 4 Bedrooms: -
- - - - - -
- Other: -
- - - - -
+ { + this.props.questions.map((questionId, index) => { + const answer = this.props.answers[index]; + return ( + +
+
+ {this.names[questionId]} : +
+ this.handleInputChange(e)}> +
+ + ); + }) + } +
- */} + + { } } +// asynchronous action creator +export const submitUserAnswer = (data) => { + // Object.keys(initialQuestions).forEach(question => { + // const questionId = initialQuestions[question].id; + // if (questionId!=null & parseInt(data.questionId)===questionId){ + // ReactGA.event({ + // category: 'Call to Action', + // action: 'Button', + // label: 'Submit Answer '+question + // }); + // } + // }); + const blocLinkUrl = process.env.REACT_APP_BLOCLINK_URL; + return (dispatch) => { + dispatch({ type: "UserAnswerRequested" }); + return axios.put( + `${blocLinkUrl}/buildings/bis/submit-user-answer/`, + data, + { headers : { 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' } }, + ) + .then(res => dispatch( + { type: "UserAnswerSucceeded", data: res })) + .catch(err => dispatch( + { type: "UserAnswerFailed", msg: err.response.data })); + } +} + // asynchronous action creator export const submitContact = (contact) => { const blocLinkUrl = process.env.REACT_APP_BLOCLINK_URL; diff --git a/src/index.css b/src/index.css index 62c879b93..e882c2f7d 100644 --- a/src/index.css +++ b/src/index.css @@ -235,6 +235,9 @@ code { padding: 0 0 0 0; } + .unitTitle { + text-align-last: end; + } .HSName { margin-top: 20%; @@ -332,6 +335,7 @@ code { font-weight: bold; width: 100%; color: #002F43; + text-align-last: center; text-align: left; margin-top: 30px; } @@ -339,10 +343,11 @@ code { .unitTitle { font-size: 16px; font-weight: bold; - width: 100%; + width: 40%; color: #002F43; text-align: left; margin-top: 30px; + float: left; } .unitText { @@ -352,12 +357,10 @@ code { color: #002F43; text-align: center; margin-top: 25px; - /* float: left; */ - /* height: 40px; */ + max-width: 150px; border: #002F43 solid 2px; } - .image { width: 30%; } diff --git a/src/reducers/reducer.js b/src/reducers/reducer.js index 459b69080..cb27e487e 100644 --- a/src/reducers/reducer.js +++ b/src/reducers/reducer.js @@ -105,6 +105,33 @@ const reducer = (state = intialState, action) => { error: true, }, }; + case "UserAnswerRequested": + return { + ...state, + questions: { + ...state.questions, + loading: true, + error: false, + }, + }; + case "UserAnswerSucceeded": + return { + ...state, + questions: { + data: action.data.data, + loading: false, + error: false, + }, + }; + case "UserAnswerFailed": + return { + ...state, + questions: { + data: action.msg, + loading: false, + error: true, + }, + }; case "QuestionRequested": return { ...state, -- GitLab From 57962f6dcf840664887a633e020c9714e8194924 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 13:20:46 -0500 Subject: [PATCH 03/11] Refactor UnitBreakdown.js --- src/UnitBreakdown.js | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 6218b44fb..bd0a9422e 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -50,11 +50,11 @@ export default class UnitBreakDown extends React.Component { this.props.nextQuestion( 'unitBreakdown', [], - [this.state.studio, - this.state.oneBedroom, - this.state.twoBedroom, - this.state.threeBedroom, - this.state.fourBedroom, + [this.state.studio, + this.state.oneBedroom, + this.state.twoBedroom, + this.state.threeBedroom, + this.state.fourBedroom, this.state.other], ); } @@ -99,26 +99,26 @@ export default class UnitBreakDown extends React.Component { { this.props.questions.map((questionId, index) => { const answer = this.props.answers[index]; - return ( - -
-
- {this.names[questionId]} : -
- this.handleInputChange(e)}> -
- + return ( + +
+
+ {this.names[questionId]} : +
+ this.handleInputChange(e)}> +
+ ); }) } -
+ -- GitLab From 6b89348401c8e52e9bcf9ab5121be0e6f1912075 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 14:11:53 -0500 Subject: [PATCH 04/11] Handle submission of unit breakdown and add it in the tree --- src/App.js | 56 +++++++++++++++++++++--------------------------------- 1 file changed, 22 insertions(+), 34 deletions(-) diff --git a/src/App.js b/src/App.js index 59746f332..ab8d5dcea 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ import BuildingPastImprovement from './BuildingPastImprovement'; import BuildingFutureImprovement from './BuildingFutureImprovement'; import { questionTree } from './constants'; import { connect } from 'react-redux'; -import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire } from './actions'; +import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire, submitUserAnswer } from './actions'; import './App.css'; import ReactGA from 'react-ga'; @@ -89,7 +89,7 @@ class App extends React.Component { answerIds: [3, 4, 5, 6, 7], answers: { 3: 'fuelOil', 4: 'naturalGas', 5: 'electricResistance', 6: 'dualFuel', 7: 'other' }, prev: 'addressSearch', - next: 'unitBreakdown', + next: 'heatDistribution', }, heatDistribution: { id: 2, @@ -126,40 +126,14 @@ class App extends React.Component { value: 0, answerIds: [17, 18, 19, 12], prev: 'heatingSystemAge', - next: 'buildingTypes', + next: 'unitBreakdown', }, unitBreakdown: { title: 'Tell us about yout building.', - // questions: [ - // { - // id: 52, - // answer: '', - // }, - // { - // id: 53, - // answer: '', - // }, - // { - // id: 54, - // answer: '', - // }, - // { - // id: 55, - // answer: '', - // }, - // { - // id: 56, - // answer: '', - // }, - // { - // id: 57, - // answer: '', - // }, - // ], - questions: [52, 53, 54, 55, 56, 57], + questionIds: [52, 53, 54, 55, 56, 57], answers: [], - prev: 'buildingTypes', - next: 'comfortIssues', + prev: 'heatingSystemPlan', + next: 'buildingTypes', }, buildingTypes: { id: 6, @@ -168,7 +142,7 @@ class App extends React.Component { value: '', answerIds: [20, 21, 22, 23, 32, 33], answers: { 20: 'singleFamily', 21: 'multiFamily', 22: 'mixedUse', 23: 'coop', 32: 'church', 33: 'other' }, - prev: 'heatingSystemPlan', + prev: 'unitBreakdown', next: '', }, utilityBills: { @@ -660,6 +634,10 @@ class App extends React.Component { questions[question]['questions'][i]['value'] = value[i]; questionAnswers[questions[question]['questions'][i].id] = value[i]; }); + } else if (Array.isArray(answer) === true && Array.isArray(questions[question]['questionIds']) === true) { + // questions[question]['questions'] = answer; + questions[question]['answers'] = value; + // questionAnswers[questions[question]['questions']] = value; } else { questions[question].answer = answer; questions[question].value = value; @@ -672,6 +650,15 @@ class App extends React.Component { this.props.onSubmitBuilding({ address: this.state.questions[question].value, }); + } else if (question === 'unitBreakdown'){ + this.setQuestion(this.state.questions[question].next); + this.props.onSubmitUserAnswer({ + questionId: questions[question]['questionIds'], + answers: questions[question]['answers'], + surveyId: this.props.building.data.surveyId, + buildingId: this.props.building.data.buildingId, + userId: this.props.building.data.userId, + }); } else { this.setQuestion(this.state.questions[question].next); this.props.onSubmitAnswer({ @@ -1016,7 +1003,7 @@ class App extends React.Component { unitBreakdown: , buildingTypes: { return { onSubmitBuilding: (data) => dispatch(submitBuilding(data)), onSubmitAnswer: (data) => dispatch(submitAnswer(data)), + onSubmitUserAnswer: (data) => dispatch(submitUserAnswer(data)), onSubmitContact: (data) => dispatch(submitContact(data)), onSubmitQuestionnaire: (data) => dispatch(submitQuestionnaire(data)), } -- GitLab From 83beba88a3dba364e6b680a8447992b395f2181b Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 14:21:16 -0500 Subject: [PATCH 05/11] Remove comments --- src/App.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/App.js b/src/App.js index ab8d5dcea..c045c889f 100644 --- a/src/App.js +++ b/src/App.js @@ -635,9 +635,7 @@ class App extends React.Component { questionAnswers[questions[question]['questions'][i].id] = value[i]; }); } else if (Array.isArray(answer) === true && Array.isArray(questions[question]['questionIds']) === true) { - // questions[question]['questions'] = answer; questions[question]['answers'] = value; - // questionAnswers[questions[question]['questions']] = value; } else { questions[question].answer = answer; questions[question].value = value; -- GitLab From 03f8753e3e2b6b9a910988c5936e602e075baf17 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 14:27:14 -0500 Subject: [PATCH 06/11] Add the logic to disable the continue button --- src/UnitBreakdown.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index bd0a9422e..375171894 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -61,24 +61,16 @@ export default class UnitBreakDown extends React.Component { } validateEmptyInputs() { - const emptyFields = []; const invalidFields = []; const errorMessage = []; const validNumber = /^[0-9]{1,2}$/; const unitTypes = ['studio', 'oneBedroom', 'twoBedroom', 'threeBedroom', 'fourBedroom', 'other']; const displayName = ['Studio', 'One Bedroom', 'Two Bedroom', 'Three Bedroom', 'Four Bedroom', 'Other']; unitTypes.map((unit, index) => { - if (this.state[unit] === undefined) { - emptyFields.push(displayName[index]); - } else if (!(validNumber.test(this.state[unit]))) { + if (!(validNumber.test(this.state[unit]))) { invalidFields.push(displayName[index]); } }); - if (emptyFields.length > 0) { - errorMessage.push(`Please fill in:\n${emptyFields.join('\n')}`); - alert(errorMessage); - return false; - } if (invalidFields.length > 0) { errorMessage.push(`\nInvalid input in:\n${invalidFields.join('\n')}`); alert(errorMessage); @@ -135,7 +127,12 @@ export default class UnitBreakDown extends React.Component { -- GitLab From ca960f3b04d7c5760881aa9d9fb8747b2ef55ce2 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 14:31:25 -0500 Subject: [PATCH 07/11] Remove commented code form actions.js --- src/actions.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/actions.js b/src/actions.js index c5506dfcc..6156dfbe2 100644 --- a/src/actions.js +++ b/src/actions.js @@ -54,16 +54,6 @@ export const submitAnswer = (data) => { // asynchronous action creator export const submitUserAnswer = (data) => { - // Object.keys(initialQuestions).forEach(question => { - // const questionId = initialQuestions[question].id; - // if (questionId!=null & parseInt(data.questionId)===questionId){ - // ReactGA.event({ - // category: 'Call to Action', - // action: 'Button', - // label: 'Submit Answer '+question - // }); - // } - // }); const blocLinkUrl = process.env.REACT_APP_BLOCLINK_URL; return (dispatch) => { dispatch({ type: "UserAnswerRequested" }); -- GitLab From d02d39d133b205c818ab6bebea475e386932363a Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 16:39:08 -0500 Subject: [PATCH 08/11] Make default value to 0 --- src/App.js | 2 +- src/UnitBreakdown.js | 26 ++++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index c045c889f..b79c433e3 100644 --- a/src/App.js +++ b/src/App.js @@ -131,7 +131,7 @@ class App extends React.Component { unitBreakdown: { title: 'Tell us about yout building.', questionIds: [52, 53, 54, 55, 56, 57], - answers: [], + answers: [0, 0, 0, 0, 0, 0], prev: 'heatingSystemPlan', next: 'buildingTypes', }, diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 375171894..6aeb9569e 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -63,7 +63,7 @@ export default class UnitBreakDown extends React.Component { validateEmptyInputs() { const invalidFields = []; const errorMessage = []; - const validNumber = /^[0-9]{1,2}$/; + const validNumber = /^[0-9]/; const unitTypes = ['studio', 'oneBedroom', 'twoBedroom', 'threeBedroom', 'fourBedroom', 'other']; const displayName = ['Studio', 'One Bedroom', 'Two Bedroom', 'Three Bedroom', 'Four Bedroom', 'Other']; unitTypes.map((unit, index) => { @@ -99,11 +99,9 @@ export default class UnitBreakDown extends React.Component { this.handleInputChange(e)}> @@ -124,15 +122,23 @@ export default class UnitBreakDown extends React.Component { + {/* Button will be disabled only if all inputs are 0 or any of the input is empty. */} -- GitLab From 621824b793887cecf369b66b3b15b5e3fa1bb9a3 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 26 Feb 2020 16:43:24 -0500 Subject: [PATCH 09/11] Solve the typo --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index b79c433e3..f886510a4 100644 --- a/src/App.js +++ b/src/App.js @@ -129,7 +129,7 @@ class App extends React.Component { next: 'unitBreakdown', }, unitBreakdown: { - title: 'Tell us about yout building.', + title: 'Tell us about your building.', questionIds: [52, 53, 54, 55, 56, 57], answers: [0, 0, 0, 0, 0, 0], prev: 'heatingSystemPlan', -- GitLab From b690582d15c21d8f617638fe200656fc8bfcd1d0 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 27 Feb 2020 10:15:11 -0500 Subject: [PATCH 10/11] Update the continue button disable conditions --- src/UnitBreakdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 6aeb9569e..c0cfa4eca 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -126,12 +126,12 @@ export default class UnitBreakDown extends React.Component {