diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index 548cf6bc2a26c339fc39a0f4bf3b2bb5825fee0d..8e2adfc4d4e4d777d9b2b4fd85838aa881d7a608 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 }) { @@ -11,14 +12,22 @@ export default function BuildingListTable({ buildings }) { ); const buildingItems = buildings.map(building => - ( - - {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/components/BuildingOverview/index.js b/src/components/BuildingOverview/index.js new file mode 100644 index 0000000000000000000000000000000000000000..f07ec448da96a4cf0c9f62c90820789780d6fbf8 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/containers/BuildingDetail/actions.js b/src/containers/BuildingDetail/actions.js new file mode 100644 index 0000000000000000000000000000000000000000..e31836f2e28ba5c6b227162885cf70f4f3376e15 --- /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 0000000000000000000000000000000000000000..1d22cced45a63a673f33fa0c59af1268e4305d08 --- /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 0000000000000000000000000000000000000000..1339a137870f454ab7c333962cd9db75a7c76fb3 --- /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 0000000000000000000000000000000000000000..a49aa9c3e76794afdf24c61b3f372ab5beb96ca5 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/containers/BuildingList/actions.js b/src/containers/BuildingList/actions.js index ba423ec45cd026806c3df96e84de50a4b4749e12..4803d06cc806edcf963ac17292d538635f87b1e5 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() + ), }; } diff --git a/src/reducer.js b/src/reducer.js index 3660b453afe4b72e2c2f41f4b58688dfd0d97113..6ff138c529117de29f82c5b06bfcc74a1829dfe0 100644 --- a/src/reducer.js +++ b/src/reducer.js @@ -1,11 +1,13 @@ 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, }); export default rootReducer; diff --git a/src/routes.js b/src/routes.js index 33b9879b2a1368c87a50c28d9814243b64bbd18e..281d3477251de40f9bf4ba2b338efe6626371810 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,9 +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 = ( - + + + + + );