From f4805a87302cf57b54a447ee9c69b102c0172a49 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Sat, 7 Jan 2017 23:54:41 -0500 Subject: [PATCH 1/4] Add initial BuildingDetail and BuildingOverview components --- src/components/BuildingListTable/index.js | 4 ++- src/components/BuildingListTable/styles.css | 15 +++++++-- src/components/BuildingOverview/index.js | 32 +++++++++++++++++++ src/components/BuildingOverview/styles.css | 0 src/containers/BuildingDetail/actions.js | 25 +++++++++++++++ src/containers/BuildingDetail/constants.js | 3 ++ src/containers/BuildingDetail/index.js | 34 +++++++++++++++++++++ src/containers/BuildingDetail/reducer.js | 11 +++++++ src/containers/BuildingDetail/styles.css | 0 src/reducer.js | 2 ++ src/routes.js | 2 ++ 11 files changed, 124 insertions(+), 4 deletions(-) create mode 100644 src/components/BuildingOverview/index.js create mode 100644 src/components/BuildingOverview/styles.css create mode 100644 src/containers/BuildingDetail/actions.js create mode 100644 src/containers/BuildingDetail/constants.js create mode 100644 src/containers/BuildingDetail/index.js create mode 100644 src/containers/BuildingDetail/reducer.js create mode 100644 src/containers/BuildingDetail/styles.css diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index 548cf6bc..2304b9d2 100644 --- a/src/components/BuildingListTable/index.js +++ b/src/components/BuildingListTable/index.js @@ -1,4 +1,5 @@ import React, { PropTypes } from 'react'; +import { Link } from 'react-router'; import './styles.css'; export default function BuildingListTable({ buildings }) { @@ -13,7 +14,8 @@ export default function BuildingListTable({ buildings }) { const buildingItems = buildings.map(building => ( - {building.address} + {/* TODO make entire row a link */} + {building.address} {building.bbl} {building.blocpower_id} {building.borough} diff --git a/src/components/BuildingListTable/styles.css b/src/components/BuildingListTable/styles.css index 2f5a0655..6019fd13 100644 --- a/src/components/BuildingListTable/styles.css +++ b/src/components/BuildingListTable/styles.css @@ -1,7 +1,16 @@ -.building-list-item { - cursor: pointer; -} +/*.building-list-item {*/ + /*cursor: pointer;*/ +/*}*/ .building-list-item:hover { background-color: #eee; } + +a { + color: #000; +} + +a:hover { + text-decoration: none; + color: #000; +} \ No newline at end of file diff --git a/src/components/BuildingOverview/index.js b/src/components/BuildingOverview/index.js new file mode 100644 index 00000000..f07ec448 --- /dev/null +++ b/src/components/BuildingOverview/index.js @@ -0,0 +1,32 @@ +import React, { PropTypes } from 'react'; + +export default function BuildingOverview({ building }) { + if (Object.keys(building).length === 0) { + // TODO add loading icon? + return
...
; + } + + return ( +
+

+ {building.address} +

+ +
+ ); +} + +BuildingOverview.propTypes = { + building: PropTypes.shape({ + address: PropTypes.string, + bbl: PropTypes.number, + blocpower_id: PropTypes.number, + borough: PropTypes.string, + zipcode: PropTypes.number, + }), +}; diff --git a/src/components/BuildingOverview/styles.css b/src/components/BuildingOverview/styles.css new file mode 100644 index 00000000..e69de29b diff --git a/src/containers/BuildingDetail/actions.js b/src/containers/BuildingDetail/actions.js new file mode 100644 index 00000000..e31836f2 --- /dev/null +++ b/src/containers/BuildingDetail/actions.js @@ -0,0 +1,25 @@ +import 'whatwg-fetch'; +import { FETCH_BUILDING_DETAIL } from './constants'; + +const ROOT_URL = `${process.env.REACT_APP_BUILDING_SERVICE}/building/`; +const HEADERS = new Headers({ 'x-blocpower-app-key': process.env.REACT_APP_KEY }); + +const init = { + method: 'GET', + headers: HEADERS, + mode: 'cors', + cache: 'default', +}; + +function fetchBuildingDetail(blocPowerID) { + return { + type: FETCH_BUILDING_DETAIL, + payload: fetch(`${ROOT_URL}${blocPowerID}`, init).then(response => + response.json() + ), + }; +} + +/* eslint-disable import/prefer-default-export */ +export { fetchBuildingDetail }; +/* eslint-enable */ diff --git a/src/containers/BuildingDetail/constants.js b/src/containers/BuildingDetail/constants.js new file mode 100644 index 00000000..1d22cced --- /dev/null +++ b/src/containers/BuildingDetail/constants.js @@ -0,0 +1,3 @@ +/* eslint-disable import/prefer-default-export */ +export const FETCH_BUILDING_DETAIL = 'FETCH_BUILDING_DETAIL'; +/* eslint-enable */ diff --git a/src/containers/BuildingDetail/index.js b/src/containers/BuildingDetail/index.js new file mode 100644 index 00000000..1339a137 --- /dev/null +++ b/src/containers/BuildingDetail/index.js @@ -0,0 +1,34 @@ +import React, { Component, PropTypes } from 'react'; +import { connect } from 'react-redux'; + +import { fetchBuildingDetail } from './actions'; +import './styles.css'; +import BuildingOverview from '../../components/BuildingOverview'; + +class BuildingDetail extends Component { + componentDidMount() { + this.props.fetchBuildingDetail(this.props.params.blocPowerID); + } + + render() { + return ; + } +} + +BuildingDetail.propTypes = { + buildingDetail: PropTypes.shape({ + address: PropTypes.string, + bbl: PropTypes.number, + blocpower_id: PropTypes.number, + borough: PropTypes.string, + zipcode: PropTypes.number, + }), + params: PropTypes.objectOf(PropTypes.string), + fetchBuildingDetail: PropTypes.func, +}; + +function mapStateToProps({ buildingDetail }) { + return { buildingDetail }; +} + +export default connect(mapStateToProps, { fetchBuildingDetail })(BuildingDetail); diff --git a/src/containers/BuildingDetail/reducer.js b/src/containers/BuildingDetail/reducer.js new file mode 100644 index 00000000..a49aa9c3 --- /dev/null +++ b/src/containers/BuildingDetail/reducer.js @@ -0,0 +1,11 @@ +import { FETCH_BUILDING_DETAIL } from './constants'; + +export default function (state = {}, action) { + switch (action.type) { + case FETCH_BUILDING_DETAIL: + return action.payload.data; + + default: + return state; + } +} diff --git a/src/containers/BuildingDetail/styles.css b/src/containers/BuildingDetail/styles.css new file mode 100644 index 00000000..e69de29b diff --git a/src/reducer.js b/src/reducer.js index 3660b453..9b65fd47 100644 --- a/src/reducer.js +++ b/src/reducer.js @@ -2,10 +2,12 @@ import { combineReducers } from 'redux'; import { routerReducer } from 'react-router-redux'; import BuildingReducer from './containers/BuildingList/reducer'; +import BuildingDetailReducer from './containers/BuildingDetail/reducer'; const rootReducer = combineReducers({ routing: routerReducer, buildings: BuildingReducer, + buildingDetail: BuildingDetailReducer, }); export default rootReducer; diff --git a/src/routes.js b/src/routes.js index 33b9879b..9e303db6 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,9 +1,11 @@ import React from 'react'; import { Route, IndexRoute } from 'react-router'; import BuildingList from './containers/BuildingList'; +import BuildingDetail from './containers/BuildingDetail'; module.exports = ( + ); -- GitLab From ea0253e556cbec40bbb4ba85afdc596fd2c0d9ba Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 9 Jan 2017 20:06:36 -0500 Subject: [PATCH 2/4] Rename BuildingListReducer --- src/reducer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/reducer.js b/src/reducer.js index 9b65fd47..6ff138c5 100644 --- a/src/reducer.js +++ b/src/reducer.js @@ -1,12 +1,12 @@ import { combineReducers } from 'redux'; import { routerReducer } from 'react-router-redux'; -import BuildingReducer from './containers/BuildingList/reducer'; +import BuildingListReducer from './containers/BuildingList/reducer'; import BuildingDetailReducer from './containers/BuildingDetail/reducer'; const rootReducer = combineReducers({ routing: routerReducer, - buildings: BuildingReducer, + buildings: BuildingListReducer, buildingDetail: BuildingDetailReducer, }); -- GitLab From b1fca0b9a17b6049eb5ffc4272f2fa944d28c84c Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Mon, 9 Jan 2017 20:09:45 -0500 Subject: [PATCH 3/4] Refactor buildinglist reducer --- src/containers/BuildingList/actions.js | 28 ++++++++++---------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/containers/BuildingList/actions.js b/src/containers/BuildingList/actions.js index ba423ec4..4803d06c 100644 --- a/src/containers/BuildingList/actions.js +++ b/src/containers/BuildingList/actions.js @@ -2,28 +2,22 @@ import 'whatwg-fetch'; import { FETCH_BUILDINGS } from './constants'; const ROOT_URL = `${process.env.REACT_APP_BUILDING_SERVICE}/building/`; -const myHeaders = new Headers({ 'x-blocpower-app-key': process.env.REACT_APP_KEY }); +const HEADERS = new Headers({ 'x-blocpower-app-key': process.env.REACT_APP_KEY }); -function fetchBuildings(address) { - const myInit = { - method: 'GET', - headers: myHeaders, - mode: 'cors', - cache: 'default', - }; +const init = { + method: 'GET', + headers: HEADERS, + mode: 'cors', + cache: 'default', +}; +function fetchBuildings(address) { const url = `${ROOT_URL}?address=${address}`; - - const request = fetch(url, myInit).then(response => - response.json() - ); - // .catch(function (error) { - // console.log('request failed for buildings', error) - // }); - return { type: FETCH_BUILDINGS, - payload: request, + payload: fetch(url, init).then(response => + response.json() + ), }; } -- GitLab From eb0c9acea915130c2b3b1d795e9ba08523f54903 Mon Sep 17 00:00:00 2001 From: Alessandro DiMarco Date: Wed, 11 Jan 2017 12:39:22 -0500 Subject: [PATCH 4/4] Redirect to /buildings for building list --- src/components/BuildingListTable/index.js | 25 +++++++++++++++-------- src/routes.js | 9 +++++--- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index 2304b9d2..8e2adfc4 100644 --- a/src/components/BuildingListTable/index.js +++ b/src/components/BuildingListTable/index.js @@ -12,15 +12,22 @@ export default function BuildingListTable({ buildings }) { ); const buildingItems = buildings.map(building => - ( - - {/* TODO make entire row a link */} - {building.address} - {building.bbl} - {building.blocpower_id} - {building.borough} - {building.zipcode} - + ( + + {/* + TODO make entire row a link & make path relative + React router Link component does not support relative paths + */} + + + {building.address} + + + {building.bbl} + {building.blocpower_id} + {building.borough} + {building.zipcode} + ), ); diff --git a/src/routes.js b/src/routes.js index 9e303db6..281d3477 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,11 +1,14 @@ import React from 'react'; -import { Route, IndexRoute } from 'react-router'; +import { Route, IndexRoute, IndexRedirect } from 'react-router'; import BuildingList from './containers/BuildingList'; import BuildingDetail from './containers/BuildingDetail'; module.exports = ( - - + + + + + ); -- GitLab