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}
+
+
+ - {building.zipcode}
+ - {building.bbl}
+ - {building.blocpower_id}
+ - {building.borough}
+
+
+ );
+}
+
+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 = (
-
+
+
+
+
+
);