From 9f6fce197533416a0c3e5d562bff5f6d767d1e32 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Wed, 22 Feb 2017 12:56:29 -0500 Subject: [PATCH 1/3] Update Building and SearchBar proptypes --- src/components/BuildingListTable/index.js | 18 +++----------- src/containers/Building/propTypes.js | 2 +- src/containers/Building/sagas.js | 2 +- src/containers/SearchBar/index.js | 11 ++------- src/containers/SearchBar/propTypes.js | 30 +++++++++++++++++++++++ src/containers/SearchBar/reducer.js | 2 +- src/containers/SearchBar/sagas.js | 2 +- src/screens/HomePage/index.js | 23 +++-------------- 8 files changed, 43 insertions(+), 47 deletions(-) create mode 100644 src/containers/SearchBar/propTypes.js diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index fcd39ef1..cfa857e8 100644 --- a/src/components/BuildingListTable/index.js +++ b/src/components/BuildingListTable/index.js @@ -1,6 +1,7 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; import { browserHistory } from 'react-router'; import './styles.css'; +import { buildingList, loadErrorPropTypes } from '../../containers/SearchBar/propTypes'; export default function BuildingListTable({ buildings, error }) { if (error) { @@ -54,17 +55,6 @@ export default function BuildingListTable({ buildings, error }) { } BuildingListTable.propTypes = { - buildings: PropTypes.arrayOf(PropTypes.shape({ - address: PropTypes.state, - bbl: PropTypes.number, - bin_id: PropTypes.number, - building_id: PropTypes.number, - lot_id: PropTypes.number, - borough: PropTypes.string, - zipcode: PropTypes.number, - })), - error: PropTypes.oneOfType([ - PropTypes.instanceOf(Error), - PropTypes.bool, - ]), + buildings: buildingList, + error: loadErrorPropTypes.error, }; diff --git a/src/containers/Building/propTypes.js b/src/containers/Building/propTypes.js index 1ccfa3fd..3fa5dc61 100644 --- a/src/containers/Building/propTypes.js +++ b/src/containers/Building/propTypes.js @@ -17,7 +17,7 @@ export const overviewPropTypes = { building_id: number, lot_id: number, borough: string, - zipcode: number, + zipcode: string, }; export const projectPropTypes = { diff --git a/src/containers/Building/sagas.js b/src/containers/Building/sagas.js index 5e5852a9..744dea49 100644 --- a/src/containers/Building/sagas.js +++ b/src/containers/Building/sagas.js @@ -29,7 +29,7 @@ function* getBuildingDetail(action) { ); if (!res.err) { - yield put(buildingDetailLoaded(res)); + yield put(buildingDetailLoaded(res.data)); } else { yield put(buildingDetailLoadingError(res.err)); } diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index 2bbeedfd..366fa6c4 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -6,6 +6,7 @@ import { updateSearchTerm, updateSearchType, loadBuildings } from './actions'; import './styles.css'; import { SearchSVG, CaretSVG } from '../../components/bpl'; import loadingRing from './ring.svg'; +import buildingListPropTypes from './propTypes'; const SEARCH_TYPE_LIST = [{ actual: 'address', display: 'address' }, { actual: 'bbl', display: 'bbl' }, @@ -148,15 +149,7 @@ class BuildingList extends Component { } BuildingList.propTypes = { - buildingList: PropTypes.shape({ - type: PropTypes.string, - term: PropTypes.string, - loading: PropTypes.bool, - error: React.PropTypes.oneOfType([ - PropTypes.instanceOf(Error), - PropTypes.bool, - ]), - }), + buildingList: buildingListPropTypes, updateSearchTerm: PropTypes.func, updateSearchType: PropTypes.func, loadBuildings: PropTypes.func, diff --git a/src/containers/SearchBar/propTypes.js b/src/containers/SearchBar/propTypes.js new file mode 100644 index 00000000..c9535eac --- /dev/null +++ b/src/containers/SearchBar/propTypes.js @@ -0,0 +1,30 @@ +import { PropTypes } from 'react'; + +const { string, number, bool, shape, arrayOf, oneOfType } = PropTypes; + +export const loadErrorPropTypes = { + loading: bool, + error: oneOfType([ + bool, + PropTypes.instanceOf(Error), + ]), +}; + +export const buildingList = arrayOf( + shape({ + address: string, + bbl: number, + bin_id: number, + building_id: number, + lot_id: number, + borough: string, + zipcode: string, + }) +); + +export default PropTypes.shape({ + type: PropTypes.string, + term: PropTypes.string, + buildings: buildingList, + ...loadErrorPropTypes, +}); diff --git a/src/containers/SearchBar/reducer.js b/src/containers/SearchBar/reducer.js index e93255d8..21c5298b 100644 --- a/src/containers/SearchBar/reducer.js +++ b/src/containers/SearchBar/reducer.js @@ -35,7 +35,7 @@ export default function (state = initState, action) { case LOAD_BUILDINGS_SUCCESS: return { ...state, - buildings: action.payload.buildings, + buildings: action.payload, loading: false, error: false, }; diff --git a/src/containers/SearchBar/sagas.js b/src/containers/SearchBar/sagas.js index b31364d2..1705aa54 100644 --- a/src/containers/SearchBar/sagas.js +++ b/src/containers/SearchBar/sagas.js @@ -26,7 +26,7 @@ function* getBuildingsByFilter(action) { ); if (!res.err) { - yield put(buildingsLoaded(res)); + yield put(buildingsLoaded(res.data)); } else { yield put(buildingsLoadingError(res.err)); } diff --git a/src/screens/HomePage/index.js b/src/screens/HomePage/index.js index 86c716f6..876b595d 100644 --- a/src/screens/HomePage/index.js +++ b/src/screens/HomePage/index.js @@ -1,9 +1,10 @@ -import React, { PropTypes } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; import NavBar from '../../components/NavBar'; import SearchBar from '../../containers/SearchBar'; import BuildingListTable from '../../components/BuildingListTable'; +import buildingListPropTypes from '../../containers/SearchBar/propTypes'; function HomePage({ buildingList }) { return ( @@ -24,25 +25,7 @@ function HomePage({ buildingList }) { } HomePage.propTypes = { - buildingList: PropTypes.shape({ - buildings: PropTypes.arrayOf( - PropTypes.shape({ - address: PropTypes.string, - bbl: PropTypes.number, - building_id: PropTypes.number, - lot_id: PropTypes.number, - borough: PropTypes.string, - zipcode: PropTypes.number, - }), - ), - term: PropTypes.string, - type: PropTypes.string, - loading: PropTypes.bool, - error: PropTypes.oneOfType([ - PropTypes.instanceOf(Error), - PropTypes.bool, - ]), - }), + buildingList: buildingListPropTypes, }; function mapStateToProps({ buildingList }) { -- GitLab From 24d918a04dd0c7b460f1ebd8337b279ddf97faac Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Wed, 22 Feb 2017 14:52:34 -0500 Subject: [PATCH 2/3] Update error handling and ErrorAlert --- src/components/ErrorAlert/index.js | 53 +++++++++++++++++++--------- src/containers/Building/propTypes.js | 2 +- src/utils/request.js | 2 +- 3 files changed, 38 insertions(+), 19 deletions(-) diff --git a/src/components/ErrorAlert/index.js b/src/components/ErrorAlert/index.js index c0862b7e..d1e5eb61 100644 --- a/src/components/ErrorAlert/index.js +++ b/src/components/ErrorAlert/index.js @@ -1,24 +1,39 @@ -import React, { PropTypes } from 'react'; +import React, { Component, PropTypes } from 'react'; -const ErrorAlert = (props) => { - const { error, genericMessage } = props; - let errMessage = ''; - if (error && genericMessage !== undefined) { - errMessage = `${genericMessage} | ${error.message}`; - } else if (error) { - errMessage = error.message; +class ErrorAlert extends Component { + constructor(props) { + super(props); + + this.state = { + errMessage: '', + }; } - return ( -
- {errMessage} -
- ); -}; + componentWillReceiveProps(nextProps) { + const { error } = nextProps; + + if (error) { + error.response.then((res) => { + this.setState({ errMessage: res.data }); + }); + } + } + + render() { + const { error, genericMessage } = this.props; + + return ( +
+

{genericMessage}

+

{this.state.errMessage}

+
+ ); + } +} ErrorAlert.propTypes = { error: PropTypes.oneOfType([ @@ -28,4 +43,8 @@ ErrorAlert.propTypes = { genericMessage: PropTypes.string, }; +ErrorAlert.defaultProps = { + genericMessage: '', +}; + export default ErrorAlert; diff --git a/src/containers/Building/propTypes.js b/src/containers/Building/propTypes.js index 3fa5dc61..f78618d6 100644 --- a/src/containers/Building/propTypes.js +++ b/src/containers/Building/propTypes.js @@ -6,7 +6,7 @@ export const loadErrorPropTypes = { loading: bool, error: oneOfType([ bool, - string, + PropTypes.instanceOf(Error), ]), }; diff --git a/src/utils/request.js b/src/utils/request.js index 2dad961d..367ef593 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -14,7 +14,7 @@ function checkStatus(response) { } const error = new Error(response.statusText); - error.response = response; + error.response = response.json(); throw error; } -- GitLab From 12e8916169bf00f1f0b08b7ab302a605809f385e Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Wed, 22 Feb 2017 15:14:52 -0500 Subject: [PATCH 3/3] Update mech turk padding --- src/components/ErrorAlert/index.js | 2 +- src/components/TurkHit/index.js | 6 +++--- src/components/Utilities/index.js | 2 +- src/utils/request.js | 3 ++- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/ErrorAlert/index.js b/src/components/ErrorAlert/index.js index d1e5eb61..87d606aa 100644 --- a/src/components/ErrorAlert/index.js +++ b/src/components/ErrorAlert/index.js @@ -14,7 +14,7 @@ class ErrorAlert extends Component { const { error } = nextProps; if (error) { - error.response.then((res) => { + error.responseBody.then((res) => { this.setState({ errMessage: res.data }); }); } diff --git a/src/components/TurkHit/index.js b/src/components/TurkHit/index.js index d5059b5a..bdd13b87 100644 --- a/src/components/TurkHit/index.js +++ b/src/components/TurkHit/index.js @@ -81,14 +81,14 @@ class TurkHit extends Component { if (hit.loading) { return ( -
+
{this.renderDefinitions()}

Loading...

); } else if (hit.error && hit.error.response.status !== 404) { return ( -
+
Retrieving HIT error. Response message: {hit.error.message}
); @@ -116,7 +116,7 @@ class TurkHit extends Component { } return ( -
+
+