diff --git a/package.json b/package.json
index c2cd75c1996db4269332d7d5f3d8ededb42b8b81..7e9a9d208d4cf7597ede251d4a701d89f28157c8 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,9 @@
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
+ "react-redux": "^4.4.5",
+ "redux": "^3.6.0",
+ "redux-promise": "^0.5.3",
"whatwg-fetch": "^1.0.0"
},
"scripts": {
diff --git a/public/index.html b/public/index.html
index 82434aa03670854a78bb223f008f1affdbc3e9f8..ed8b06bf2982357b71f51a5cb8515b7f5f6a58ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,7 +15,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
-
React App
+ Buildings
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 8c0b05e709335f75bf58b75332b5a86bf94a03bc..0000000000000000000000000000000000000000
--- a/src/App.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.App {
-
-}
-
-.App-header {
- background-color: #222;
- height: 150px;
- padding: 20px;
- color: white;
-}
-
-.building-list-item {
- cursor: pointer;
-}
-
-.building-list-item:hover {
- background-color: #eee;
-}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 330faa0a941df71aa1b2c79a1e95cc4fa9345cb3..0000000000000000000000000000000000000000
--- a/src/App.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { Component } from 'react';
-import './App.css';
-import BuildingList from './components/building_list';
-import 'whatwg-fetch';
-
-class App extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- buildings: []
- };
-
- this.getBuildings();
- }
-
- getBuildings() {
- const myHeaders = new Headers();
- myHeaders.append("x-blocpower-app-key", "04a6b12c-d3d3-4ad2-afe4-b22fd0215578");
-
- const myInit = {
- method: 'GET',
- headers: myHeaders,
- mode: 'cors',
- cache: 'default'
- };
-
- const url = 'http://localhost:5404/building/?address=23%20broadway';
-
- fetch(url, myInit).then(function (response) {
- return response.json()
-
- }).catch(function (error) {
- console.log('request failed for buildings', error)
-
- }).then(json => {
- this.setState({
- buildings: json.data,
- });
-
- }).catch(function (error) {
- console.log('parser failed', error)
- });
- }
-
- render() {
- return (
-
- );
- }
-}
-
-export default App;
diff --git a/src/components/building_list.js b/src/components/BuildingList/index.js
similarity index 71%
rename from src/components/building_list.js
rename to src/components/BuildingList/index.js
index 39656991eed29a9a9149c3f97a2fe905b6a9f733..8de12843a4e42f779de82707e11303d06547e60b 100644
--- a/src/components/building_list.js
+++ b/src/components/BuildingList/index.js
@@ -1,13 +1,15 @@
import React from 'react';
-import BuildingListItem from './building_list_item'
-const BuildingList = ({buildings}) => {
+import BuildingListItem from '../BuildingListItem/index'
+import './styles.css';
+
+export default function BuildingList({buildings}) {
if (!buildings || buildings.length === 0) {
return Loading...
}
let i = 0;
- const buildingProperties = Object.keys(buildings[0]).map((item) => {
+ const buildingProperties = Object.keys(buildings[0]).map((item) => {
return { item } |
});
@@ -30,5 +32,3 @@ const BuildingList = ({buildings}) => {
)
};
-
-export default BuildingList;
\ No newline at end of file
diff --git a/src/components/BuildingList/styles.css b/src/components/BuildingList/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/building_list_item.js b/src/components/BuildingListItem/index.js
similarity index 77%
rename from src/components/building_list_item.js
rename to src/components/BuildingListItem/index.js
index 6c7d0d99399b3034b24f2e25e0137925aa4939cf..b51cacbeffced6d697f430a1dd824e4bc892863e 100644
--- a/src/components/building_list_item.js
+++ b/src/components/BuildingListItem/index.js
@@ -1,6 +1,7 @@
import React from 'react';
+import './styles.css';
-const BuildingListItem = (props) => {
+export default function BuildingListItem(props) {
let i = 0;
const building_items = Object.values(props).map((building_item) => {
@@ -13,5 +14,3 @@ const BuildingListItem = (props) => {
)
};
-
-export default BuildingListItem
\ No newline at end of file
diff --git a/src/components/BuildingListItem/styles.css b/src/components/BuildingListItem/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..2f5a065585e5a9391547f83131a5e9b24f3d5016
--- /dev/null
+++ b/src/components/BuildingListItem/styles.css
@@ -0,0 +1,7 @@
+.building-list-item {
+ cursor: pointer;
+}
+
+.building-list-item:hover {
+ background-color: #eee;
+}
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b725bd1575de485f43d03d51d81fb8e0ea45da33
--- /dev/null
+++ b/src/containers/App/index.js
@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import './styles.css';
+
+import HomePage from '../HomePage';
+
+class App extends Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/containers/App/index.test.js
similarity index 87%
rename from src/App.test.js
rename to src/containers/App/index.test.js
index b84af98d72031dc70085f2120c967b58adfcef6b..ba444eb1b7b6c00e8380b5af03279eec67f28927 100644
--- a/src/App.test.js
+++ b/src/containers/App/index.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import App from './App';
+import App from './index';
it('renders without crashing', () => {
const div = document.createElement('div');
diff --git a/src/containers/App/styles.css b/src/containers/App/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..34b8ee09c60b8cfcc53807a2354c67d41d340899
--- /dev/null
+++ b/src/containers/App/styles.css
@@ -0,0 +1,3 @@
+.App {
+
+}
diff --git a/src/containers/HomePage/actions.js b/src/containers/HomePage/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..f37e330b89072b7e0bfba22848bd594690bcefff
--- /dev/null
+++ b/src/containers/HomePage/actions.js
@@ -0,0 +1,30 @@
+import 'whatwg-fetch';
+import {FETCH_BUILDINGS} from './constants'
+
+const ROOT_URL = 'http://localhost:5404/building/';
+
+export function fetchBuildings(address) {
+ const myHeaders = new Headers({"x-blocpower-app-key": "04a6b12c-d3d3-4ad2-afe4-b22fd0215578"});
+
+ const myInit = {
+ method: 'GET',
+ headers: myHeaders,
+ mode: 'cors',
+ cache: 'default'
+ };
+
+ const url = `${ROOT_URL}?address=${address}`;
+
+ const request = fetch(url, myInit).then(function (response) {
+ return response.json()
+
+ }).catch(function (error) {
+ console.log('request failed for buildings', error)
+
+ });
+
+ return {
+ type: FETCH_BUILDINGS,
+ payload: request
+ };
+}
diff --git a/src/containers/HomePage/constants.js b/src/containers/HomePage/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..bdea640008155219b368de0dfeeeaa17123ae1c0
--- /dev/null
+++ b/src/containers/HomePage/constants.js
@@ -0,0 +1 @@
+export const FETCH_BUILDINGS = 'FETCH_BUILDINGS';
diff --git a/src/containers/HomePage/index.js b/src/containers/HomePage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0664832b64e5eb78dddcb118cdcd216f42510f63
--- /dev/null
+++ b/src/containers/HomePage/index.js
@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {fetchBuildings} from './actions'
+
+import BuildingList from '../../components/BuildingList'
+import './styles.css';
+
+
+class HomePage extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {term: '107 broadway'};
+
+ this.onInputChange = this.onInputChange.bind(this);
+ this.onFormSubmit = this.onFormSubmit.bind(this);
+ }
+
+ componentDidMount() {
+ this.getBuildings();
+ }
+
+ getBuildings() {
+ this.props.fetchBuildings(this.state.term);
+ }
+
+ onInputChange(event) {
+ this.setState({term: event.target.value});
+ }
+
+ onFormSubmit(event) {
+ event.preventDefault();
+
+ this.getBuildings();
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+function mapDispatchToProps(dispatch) {
+ return bindActionCreators({fetchBuildings}, dispatch);
+}
+
+function mapStateToProps({buildings}) {
+ return {buildings};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
diff --git a/src/containers/HomePage/reducer.js b/src/containers/HomePage/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..077dcc302dc62e2dcec293cb01744c6634555d98
--- /dev/null
+++ b/src/containers/HomePage/reducer.js
@@ -0,0 +1,11 @@
+import {FETCH_BUILDINGS} from './constants';
+
+export default function (state = [], action) {
+ switch (action.type) {
+ case FETCH_BUILDINGS:
+ return action.payload.data;
+
+ default:
+ return state;
+ }
+}
diff --git a/src/containers/HomePage/styles.css b/src/containers/HomePage/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..56722ce8580d6661a4e4f547fb6e973315cbb302
--- /dev/null
+++ b/src/containers/HomePage/styles.css
@@ -0,0 +1,4 @@
+.building-search {
+ background-color: #222;
+ padding: 40px;
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index b4cc7250b98cb3f1a2dd5bec134296c6942344d9..0000000000000000000000000000000000000000
--- a/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- font-family: sans-serif;
-}
diff --git a/src/index.js b/src/index.js
index 54c5ef1a427ab033ff649410d3f956c737a09d3a..252797585836c119c747af3f78092d986d08c6b2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,19 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
+
+import {Provider} from 'react-redux';
+import {createStore, applyMiddleware} from 'redux';
+import ReduxPromise from 'redux-promise';
+
+import App from './containers/App';
+import rootReducer from './reducer'
+
+const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
- ,
+
+
+ ,
document.getElementById('root')
);
diff --git a/src/reducer.js b/src/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd0cedcb55a8138bcc1e0c3d31aa506e7e7fd12a
--- /dev/null
+++ b/src/reducer.js
@@ -0,0 +1,9 @@
+import {combineReducers} from 'redux';
+
+import BuildingReducer from './containers/HomePage/reducer';
+
+const rootReducer = combineReducers({
+ buildings: BuildingReducer
+});
+
+export default rootReducer;