diff --git a/client/api/real/calculator.api.js b/client/api/real/calculator.api.js index 21706dec..f6fdfc1d 100644 --- a/client/api/real/calculator.api.js +++ b/client/api/real/calculator.api.js @@ -59,7 +59,12 @@ class CalculatorApi { }); } - // eg: location = {input_location: 06704, input_location_mode: 1, input_income: 1, input_size: 0} + /* eg: location = { + input_location: 06704, + input_location_mode: 1, + input_income: 1, + input_size: 3} + */ static getDefaultsAndResults(location) { const params = Object.assign({ op: 'get_defaults_and_results', diff --git a/server/assets/translations/en.json b/server/assets/translations/en.json index bbe72b51..169228b0 100644 --- a/server/assets/translations/en.json +++ b/server/assets/translations/en.json @@ -7,6 +7,9 @@ "email": "Email", "password": "Password", "city": "City", + "state":"State", + "country":"Country", + "county":"County", "input_location": "City", "public": "Yes, make my profile page public.", "enter_location": "Enter your location", @@ -91,7 +94,7 @@ "label": "How many people live in your household?" }, "United States": "United States", - "average_household_size": "Avg (2.5)", + "average_household_size": "3 (Avg)", "restore_defaults": "Your answers are saved in browser storage.", "restore_defaults_button": "Click here to reset to defaults" }, diff --git a/shared/components/common/graphs/graphs.scss b/shared/components/common/graphs/graphs.scss index 4ac93082..74f339fd 100644 --- a/shared/components/common/graphs/graphs.scss +++ b/shared/components/common/graphs/graphs.scss @@ -138,8 +138,12 @@ .d3-value-arc { text { - fill: black; + fill: #333; cursor:pointer; + &:hover { + fill: #555; + text-decoration: underline; + } } path { stroke: white; diff --git a/shared/components/common/leaders/leaders.component.js b/shared/components/common/leaders/leaders.component.js index 26ffc66f..e4f6afc7 100644 --- a/shared/components/common/leaders/leaders.component.js +++ b/shared/components/common/leaders/leaders.component.js @@ -7,7 +7,7 @@ import footprintContainer, { footprintPropTypes } from 'shared/containers/footpr import template from './leaders.rt.html'; import loader from './loader.rt.html'; -const HOUSEHOLD_SIZES = [[1, '1'], [2, '2'], [0, 'Average'], [3, '3'], [4, '4'], [5, '5+']]; +const HOUSEHOLD_SIZES = [[1, '1'], [2, '2'], [3, '3 (Avg)'], [4, '4'], [5, '5+']]; class LeadersComponent extends Panel { diff --git a/shared/components/pages/get_started/get_started.component.js b/shared/components/pages/get_started/get_started.component.js index 3be00962..0227ce3b 100644 --- a/shared/components/pages/get_started/get_started.component.js +++ b/shared/components/pages/get_started/get_started.component.js @@ -4,11 +4,10 @@ import React from 'react'; import Panel from 'shared/lib/base_classes/panel'; import SnapSlider from 'd3-object-charts/src/slider/snap_slider'; import CalculatorApi from 'api/calculator.api'; -import { setLocation } from 'api/user.api'; import footprintContainer, { footprintPropTypes } from 'shared/containers/footprint.container'; import template from './get_started.rt.html'; -const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 0 }; +const DEFAULT_LOCATION = { input_location_mode: 5, input_income: 1, input_size: 3 }; class GetStartedComponent extends Panel { @@ -18,9 +17,11 @@ class GetStartedComponent extends Panel { get_started.initResizeListener(); get_started.state = { locations: {}, - input_location: get_started.userApiValue('input_location'), + input_location_zipcode: get_started.userApiValue('input_location'), + input_location: '', input_location_mode: parseInt(get_started.input_location_mode, 10), input_location_changed: false, + input_location_edited: false, input_location_mode_changed: get_started.props.ui.get('location_mode_changed'), show_location_suggestions: false, }; @@ -30,6 +31,9 @@ class GetStartedComponent extends Panel { const get_started = this; get_started.initializeSizeSlider(); get_started.initializeIncomeSlider(); + + const token = this.props.auth.getIn(['data', 'token']); + this.props.retrieveProfile({ user_id: this.user_id, token }); } componentDidUpdate() { @@ -59,16 +63,29 @@ class GetStartedComponent extends Panel { return this.state.input_location_mode_changed ? this.input_location_mode === 5 : false; } + get user_id() { + return this.props.auth.getIn(['data', 'user_id']); + } + get input_location_display() { const get_started = this; - const display_location = get_started.props.ui.get('display_location'); - if (get_started.country_mode) { return get_started.t('get_started.United States'); - } else if (display_location) { - return display_location; + } else if (get_started.state.input_location || get_started.state.input_location_edited) { + return get_started.state.input_location; + } + switch (get_started.state.input_location_mode) { + case 1: + return get_started.state.input_location_zipcode; + case 2: + return get_started.props.profile.getIn(['data', 'city']); + case 3: + return get_started.props.profile.getIn(['data', 'county']); + case 4: + return get_started.props.profile.getIn(['data', 'state']); + default: + return ''; } - return get_started.state.input_location; } get default_location() { @@ -165,9 +182,29 @@ class GetStartedComponent extends Panel { const zipcode = event.target.dataset.zipcode; const suggestion = event.target.dataset.suggestion; + const index = get_started.state.locations.data.findIndex(l => l === zipcode); + const location_data = get_started.state.locations.selected_location[index]; + let input_location; + switch (get_started.state.input_location_mode) { + case 1: + input_location = zipcode; + break; + case 2: + input_location = location_data.city; + break; + case 3: + input_location = location_data.county; + break; + case 4: + input_location = location_data.state; + break; + default: + input_location = ''; + } get_started.setState({ display_location: suggestion, - input_location: suggestion, + input_location_zipcode: zipcode, + input_location, show_location_suggestions: false, input_location_changed: true, }); @@ -186,13 +223,13 @@ class GetStartedComponent extends Panel { input_location_mode = 1; } - get_started.updateDefaults({ input_location: zipcode, input_location_mode }); - + get_started.updateDefaults({ + input_location: zipcode, + input_location_mode, + input_size: 3, + }); if (get_started.user_authenticated) { - const index = get_started.state.locations.data.findIndex(l => l === zipcode); - const location_data = get_started.state.locations.selected_location[index]; - get_started.setUserLocation(location_data); } } @@ -203,7 +240,10 @@ class GetStartedComponent extends Panel { const user_location = location; user_location.country = 'us'; - return setLocation(user_location, token); + get_started.props.setLocation({ userLocation: user_location, token, user_id: this.user_id }); + get_started.setState({ + input_location_edited: false, + }); } // called when input_location input changed. @@ -212,12 +252,13 @@ class GetStartedComponent extends Panel { const get_started = this; const new_location = { input_location_mode: get_started.display_location_mode, - input_location: event.target.value, + input_location: get_started.display_location_mode === 1 ? event.target.value : event.target.value.replace(/,/g, ' '), }; get_started.setState({ input_location: event.target.value, show_location_suggestions: true, + input_location_edited: true, }); if (get_started.$set_location_suggestions) { @@ -227,7 +268,13 @@ class GetStartedComponent extends Panel { // debounce location suggestions by 500ms. get_started.$set_location_suggestions = setTimeout(() => { CalculatorApi.getAutoComplete(new_location) - .then((locations) => { + .then((l) => { + const locations = l; + if (new_location.input_location_mode === 2) { + locations.suggestions.forEach((s, i) => { + locations.suggestions[i] = s.replace(/,.*,/, ','); + }); + } get_started.setState({ locations, show_location_suggestions: true, @@ -267,10 +314,9 @@ class GetStartedComponent extends Panel { outer_width: get_started.slider_width, handle_r: 14, tick_labels: { - 0: get_started.t('get_started.average_household_size'), 1: '1', 2: '2', - 3: '3', + 3: get_started.t('get_started.average_household_size'), 4: '4', 5: '5+', }, @@ -283,7 +329,7 @@ class GetStartedComponent extends Panel { }); get_started.size_slider.drawData({ - abs_min: 0, + abs_min: 1, abs_max: 5, current_value: get_started.input_size, }); diff --git a/shared/components/pages/get_started/get_started.scss b/shared/components/pages/get_started/get_started.scss index ca82b52c..78a66174 100644 --- a/shared/components/pages/get_started/get_started.scss +++ b/shared/components/pages/get_started/get_started.scss @@ -1,4 +1,4 @@ -#location_suggestions_container { +#get_started #location_suggestions_container { position:relative; max-width: 404px; margin: 0 auto; diff --git a/shared/components/pages/settings/user/logout/logout.component.js b/shared/components/pages/settings/user/logout/logout.component.js index 04ee4ee1..bfd34501 100644 --- a/shared/components/pages/settings/user/logout/logout.component.js +++ b/shared/components/pages/settings/user/logout/logout.component.js @@ -21,8 +21,11 @@ class LogoutComponent extends Translatable { submitLogout(event) { event.preventDefault(); this.props.resetAlerts(); - const response = window.FB.getLoginStatus(res => res); - (response && response.status === 'connected') ? window.FB.logout() : this.props.logout(); + if (window.FB) { + const response = window.FB.getLoginStatus(res => res); + if (response && response.status === 'connected') window.FB.logout(); + } + this.props.logout(); } componentDidMount() { diff --git a/shared/components/pages/settings/user/sign_up/sign_up.component.js b/shared/components/pages/settings/user/sign_up/sign_up.component.js index bea6dab0..7da1f88a 100644 --- a/shared/components/pages/settings/user/sign_up/sign_up.component.js +++ b/shared/components/pages/settings/user/sign_up/sign_up.component.js @@ -29,7 +29,10 @@ class SignUpComponent extends Panel { password: '', answers: '', city: '', - location: {}, + location: { + state: '', + country: '', + }, public: true, }; } @@ -47,7 +50,7 @@ class SignUpComponent extends Panel { } get input_location_display() { - return this.state.input_location; + return this.state.location.city; } paramValid(param) { @@ -144,7 +147,7 @@ class SignUpComponent extends Panel { const sign_up = this; const new_location = { input_location_mode: 2, - input_location: event.target.value, + input_location: event.target.value.replace(/,/g, ' '), }; sign_up.setState({ @@ -159,7 +162,11 @@ class SignUpComponent extends Panel { // debounce location suggestions by 500ms. sign_up.$set_location_suggestions = setTimeout(() => { CalculatorApi.getAutoComplete(new_location) - .then((locations) => { + .then((l) => { + const locations = l; + locations.suggestions.forEach((s, i) => { + locations.suggestions[i] = s.replace(/,.*,/, ','); + }); sign_up.setState({ locations, show_location_suggestions: true, diff --git a/shared/components/pages/settings/user/sign_up/sign_up.rt.html b/shared/components/pages/settings/user/sign_up/sign_up.rt.html index 104d1ac8..e3db5bc5 100644 --- a/shared/components/pages/settings/user/sign_up/sign_up.rt.html +++ b/shared/components/pages/settings/user/sign_up/sign_up.rt.html @@ -71,6 +71,24 @@ className="location-suggestion" onClick="{this.setLocation.bind(this)}">{suggestion} + +