From a87277972ae0038f4a32a22374e48715a94feba2 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 12:04:26 -0400 Subject: [PATCH 1/6] Add two questions in the app --- src/App.js | 55 ++++++++++++++- src/BuildingElectricityShutoff.js | 110 +++++++++++++++++++++++++++++ src/BuildingMedicalDevices.js | 111 ++++++++++++++++++++++++++++++ 3 files changed, 275 insertions(+), 1 deletion(-) create mode 100644 src/BuildingElectricityShutoff.js create mode 100644 src/BuildingMedicalDevices.js diff --git a/src/App.js b/src/App.js index baaef2117..f4ea26929 100644 --- a/src/App.js +++ b/src/App.js @@ -26,6 +26,8 @@ import BuildingHeatingSystem from './BuildingHeatingSystem'; import BuildingTypeSubType from './BuildingTypeSubType'; import BuildingPastImprovement from './BuildingPastImprovement'; import BuildingFutureImprovement from './BuildingFutureImprovement'; +import BuildingElectricityShutoff from './BuildingElectricityShutoff'; +import BuildingMedicalDevices from './BuildingMedicalDevices'; import { questionTree } from './constants'; import { connect } from 'react-redux'; import { submitContact, submitAnswer, submitBuilding, submitQuestionnaire, submitUserAnswer } from './actions'; @@ -239,7 +241,8 @@ class App extends React.Component { }, ], prev: 'addressSearch', - next: 'buildingNeeds', + // next: 'buildingNeeds', + next: 'buildingElectricityShutoff', }, buildingNeeds: { id: 14, @@ -303,6 +306,24 @@ class App extends React.Component { prev: 'buildingHeatingSystem', next: 'buildingPastImprovement', }, + buildingElectricityShutoff: { + id: 59, + title: 'Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts? Do you expect your building to experience blackouts going forward?', + answer: '', + value: '', + answerIds: [1, 2], + prev: '', + next: 'buildingMedicalDevices', + }, + buildingMedicalDevices: { + id: 60, + title: 'Do residents of your building use electrically connected medical devices?', + answer: '', + value: '', + answerIds: [1, 2, 12], + prev: 'buildingElectricityShutoff', + next: 'feedback', + }, buildingPastImprovement: { title: 'Any Energy or Water Improvements in the past 5 years?', questions: [ @@ -797,6 +818,24 @@ class App extends React.Component { }); } + setBuildingElectricityShutoff = (buildingElectricityShutoff) => { + this.setState({ + factors: { + ...this.state.factors, + buildingElectricityShutoff, + }, + }); + } + + setBuildingMedicalDevices = (buildingMedicalDevices) => { + this.setState({ + factors: { + ...this.state.factors, + buildingMedicalDevices, + }, + }); + } + setBuildingType = (buildingTypes, answer, value) => { this.setState({ factors: { @@ -1098,6 +1137,20 @@ class App extends React.Component { answer={this.state.questions['buildingCoolingSystem'].value} answerIds={this.state.questions['buildingCoolingSystem'].answerIds} />, + buildingElectricityShutoff: , + buildingMedicalDevices: , buildingPastImprovement: { + this.props.prevQuestion('buildingElectricityShutoff'); + } + + nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Clicked continue button", + label: "building-electicity-shutoff" + }); + } + this.props.setBuildingElectricityShutoff(this.state.answer); + this.props.nextQuestion( + 'buildingElectricityShutoff', + this.names[this.state.answer], + this.state.answer, + ); + } + + chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose building electicity shutoff", + label: "building-electicity-shutoff" + }); + } + this.setState({ answer }); + } + + render() { + const content = ( +
+
+ Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts? Do you expect your building to experience blackouts going forward? +
+ + + + { + this.props.answerIds.map((answerId, id) => { + return ( + +
this.chooseAnswer(answerId)} + > + {this.names[id]} +
+ + ); + }) + } + + + + + + + {'<'} Back + + + + + + +
+ ); + + return ( +
+ {content} +
+ ); + } +} diff --git a/src/BuildingMedicalDevices.js b/src/BuildingMedicalDevices.js new file mode 100644 index 000000000..950531969 --- /dev/null +++ b/src/BuildingMedicalDevices.js @@ -0,0 +1,111 @@ +import React from "react"; +import { Row, Col, Button } from 'reactstrap'; +import './index.css'; +import ReactGA from 'react-ga'; + + +export default class BuildingMedicalDevices extends React.Component { + constructor(props) { + super(props); + this.state = { + answer: this.props.answer, + }; + this.names = [ + 'Yes', + 'No', + 'I\'m not sure' + ]; + } + + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/building-medical-devices'); + } + } + + prevQuestion = () => { + this.props.prevQuestion('buildingMedicalDevices'); + } + + nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Clicked continue button", + label: "building-medical-devices" + }); + } + this.props.setBuildingMedicalDevices(this.state.answer); + this.props.nextQuestion( + 'buildingMedicalDevices', + this.names[this.state.answer], + this.state.answer, + ); + } + + chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose building medical devices", + label: "building-medical-devices" + }); + } + this.setState({ answer }); + } + + render() { + const content = ( +
+
+ Do residents of your building use electrically connected medical devices? +
+ + + + { + this.props.answerIds.map((answerId, id) => { + return ( + +
this.chooseAnswer(answerId)} + > + {this.names[id]} +
+ + ); + }) + } + + + + + + + {'<'} Back + + + + + + +
+ ); + + return ( +
+ {content} +
+ ); + } +} -- GitLab From 51f5a35a5aa2cb54e8420db1e79b69509487dcf0 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 12:18:50 -0400 Subject: [PATCH 2/6] Set the tree to diplay new questions only for Oakland --- src/App.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index f4ea26929..9df9b6803 100644 --- a/src/App.js +++ b/src/App.js @@ -241,8 +241,7 @@ class App extends React.Component { }, ], prev: 'addressSearch', - // next: 'buildingNeeds', - next: 'buildingElectricityShutoff', + next: 'buildingNeeds', }, buildingNeeds: { id: 14, @@ -312,7 +311,7 @@ class App extends React.Component { answer: '', value: '', answerIds: [1, 2], - prev: '', + prev: 'buildingFutureImprovement', next: 'buildingMedicalDevices', }, buildingMedicalDevices: { @@ -642,7 +641,7 @@ class App extends React.Component { }, ], prev: 'buildingPastImprovement', - next: 'feedback', + next: '', } }; } @@ -743,7 +742,8 @@ class App extends React.Component { } // If the survey ID is 2 or 3, set buildingFutureWaterImprovement as prev page for contact if ([2, 3].includes(this.props.building.data.surveyId) && question === 'buildingNeeds') { - questions['feedback'].prev = 'buildingFutureImprovement'; + questions['feedback'].prev = this.props.building.data.surveyId === 3 ? 'buildingFutureImprovement' : 'buildingMedicalDevices'; + questions['buildingFutureImprovement'].next = this.props.building.data.surveyId === 3 ? 'feedback' : 'buildingElectricityShutoff'; this.setState({ questions, }); -- GitLab From 32cd351fabad432886f75e246573c89fe85e39b9 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 15:15:31 -0400 Subject: [PATCH 3/6] Add logic to convert BuildingElecticityShutoff to two questions --- src/App.js | 28 ++++++++---- src/BuildingElectricityShutoff.js | 74 +++++++++++++++++++++++++------ 2 files changed, 81 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 9df9b6803..d1bbb2999 100644 --- a/src/App.js +++ b/src/App.js @@ -306,11 +306,22 @@ class App extends React.Component { next: 'buildingPastImprovement', }, buildingElectricityShutoff: { - id: 59, - title: 'Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts? Do you expect your building to experience blackouts going forward?', - answer: '', - value: '', - answerIds: [1, 2], + questions: [ + { + id: 59, + title: 'Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts?', + answer: '', + value: 0, + answerIds: [1, 2], + }, + { + id: 61, + title: 'Do you expect your building to experience blackouts going forward?', + answer: '', + value: 0, + answerIds: [1, 2, 12], + }, + ], prev: 'buildingFutureImprovement', next: 'buildingMedicalDevices', }, @@ -1140,9 +1151,10 @@ class App extends React.Component { buildingElectricityShutoff: , buildingMedicalDevices: { + chooseElectricityShutoff = (electricityShutoffAnswer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ category: "Intake Survey General", @@ -50,27 +58,66 @@ export default class BuildingElectricityShutoff extends React.Component { label: "building-electicity-shutoff" }); } - this.setState({ answer }); + this.setState({ electricityShutoffAnswer }); + } + + chooseFutureBlackoutAnswer = (futureBlackoutAnswer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey General", + action: "Chose future blackout", + label: "building-future-blackout" + }); + } + this.setState({ futureBlackoutAnswer }); } render() { + const futureBlackout = this.state.electricityShutoffAnswer !== 0 ? +
+
+ Do you expect your building to experience blackouts going forward? +
+ + + + { + this.props.answerIdsFutureBlackout.map((answerId, id) => { + return ( + +
this.chooseFutureBlackoutAnswer(answerId)} + > + {this.futureBlackoutNames[id]} +
+ + ); + }) + } + + + +
+ : ''; + const content = (
- Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts? Do you expect your building to experience blackouts going forward? + Did your building experience electricity shutoff during recent PGE wildfire mitigation blackouts?
{ - this.props.answerIds.map((answerId, id) => { + this.props.answerIdsElectricityShutoff.map((answerId, id) => { return (
this.chooseAnswer(answerId)} + className={this.state.electricityShutoffAnswer === answerId ? "selectedButton" : "button"} + onClick={() => this.chooseElectricityShutoff(answerId)} > - {this.names[id]} + {this.electricityShutoffNames[id]}
); @@ -79,6 +126,7 @@ export default class BuildingElectricityShutoff extends React.Component { + {futureBlackout} Continue > -- GitLab From 05d8960e4063b89fce6da50c20aa92ef97a4b345 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 15:26:06 -0400 Subject: [PATCH 4/6] Add new questions on review page --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index d1bbb2999..78c34a045 100644 --- a/src/App.js +++ b/src/App.js @@ -306,6 +306,7 @@ class App extends React.Component { next: 'buildingPastImprovement', }, buildingElectricityShutoff: { + title: 'Building Electricity Shutoffs', questions: [ { id: 59, @@ -994,6 +995,7 @@ class App extends React.Component { } render() { + console.log(this.state.questions) const building = this.props.building; let addressSearchMessage = ""; -- GitLab From 534ad713a14a83d8ce89d57b2146e01d6c3cad8d Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 15:54:13 -0400 Subject: [PATCH 5/6] Remove console log --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 78c34a045..df8cf8b7f 100644 --- a/src/App.js +++ b/src/App.js @@ -995,7 +995,6 @@ class App extends React.Component { } render() { - console.log(this.state.questions) const building = this.props.building; let addressSearchMessage = ""; -- GitLab From 9ebf3989fb2ae26f9c7301a6b8b712fa71e27b8d Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Wed, 25 Mar 2020 16:24:13 -0400 Subject: [PATCH 6/6] Update the logic for value --- src/BuildingMedicalDevices.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BuildingMedicalDevices.js b/src/BuildingMedicalDevices.js index 950531969..dcf4dfd44 100644 --- a/src/BuildingMedicalDevices.js +++ b/src/BuildingMedicalDevices.js @@ -38,7 +38,7 @@ export default class BuildingMedicalDevices extends React.Component { this.props.setBuildingMedicalDevices(this.state.answer); this.props.nextQuestion( 'buildingMedicalDevices', - this.names[this.state.answer], + this.names[this.props.answerIds.indexOf(this.state.answer)], this.state.answer, ); } -- GitLab