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;