From cb7dbea74c37e48b1e125da1d41896f48ab84f51 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Wed, 26 Jul 2017 09:26:44 -0500 Subject: [PATCH] feature(activity reducer): add activity reducer and api calls --- app/api/index.js | 34 ++++++++++++ app/reducers/activity.js | 52 +++++++++++++++++++ app/reducers/index.js | 4 +- app/routes.js | 4 +- app/routes/activity/components/Activity.js | 46 ++++++++++++++++ .../components/Activity.scss} | 29 ++++++++++- .../activity/containers/ActivityContainer.js | 13 +++++ app/routes/activity/index.js | 3 ++ app/routes/home/components/Home.js | 22 -------- app/routes/home/containers/HomeContainer.js | 8 --- app/routes/home/index.js | 3 -- package-lock.json | 22 +++++++- package.json | 1 + 13 files changed, 202 insertions(+), 39 deletions(-) create mode 100644 app/api/index.js create mode 100644 app/reducers/activity.js create mode 100644 app/routes/activity/components/Activity.js rename app/routes/{home/components/Home.scss => activity/components/Activity.scss} (50%) create mode 100644 app/routes/activity/containers/ActivityContainer.js create mode 100644 app/routes/activity/index.js delete mode 100644 app/routes/home/components/Home.js delete mode 100644 app/routes/home/containers/HomeContainer.js delete mode 100644 app/routes/home/index.js diff --git a/app/api/index.js b/app/api/index.js new file mode 100644 index 00000000..c250ceec --- /dev/null +++ b/app/api/index.js @@ -0,0 +1,34 @@ +import axios from 'axios' + +export function callApi(endpoint, method = 'get', data = null) { + const BASE_URL = 'http://localhost:3000/api/' + let payload + + if (data) { + payload = { + headers: { + 'Content-Type': 'application/json' + }, + method, + data, + url: `${BASE_URL}${endpoint}` + } + } else { + payload = { + headers: { + 'Content-Type': 'application/json' + }, + method, + url: `${BASE_URL}${endpoint}` + } + } + + return axios(payload) + .then(response => response.data) + .catch(error => error) +} + +export function callApis(endpoints) { + const BASE_URL = 'http://localhost:3000/api/' + return axios.all(endpoints.map(endpoint => callApi(endpoint))) +} \ No newline at end of file diff --git a/app/reducers/activity.js b/app/reducers/activity.js new file mode 100644 index 00000000..7d5fd9e4 --- /dev/null +++ b/app/reducers/activity.js @@ -0,0 +1,52 @@ +import { callApis } from '../api' +// ------------------------------------ +// Constants +// ------------------------------------ +export const GET_ACTIVITY = 'GET_ACTIVITY' +export const RECEIVE_ACTIVITY = 'RECEIVE_ACTIVITY' + +// ------------------------------------ +// Actions +// ------------------------------------ +export function getActivity() { + return { + type: GET_ACTIVITY + } +} + +export function receiveActvity(data) { + return { + type: RECEIVE_ACTIVITY, + payments: data[0].data.payments, + invoices: data[1].data.invoices + } +} + +export const fetchActivity = () => async (dispatch) => { + dispatch(getActivity()) + const activity = await callApis(['payments', 'invoices']) + dispatch(receiveActvity(activity)) +} + +// ------------------------------------ +// Action Handlers +// ------------------------------------ +const ACTION_HANDLERS = { + [GET_ACTIVITY]: (state) => ({ ...state, isLoading: true }), + [RECEIVE_ACTIVITY]: (state, { payments, invoices }) => ({ ...state, isLoading: false, payments, invoices }) +} + +// ------------------------------------ +// Reducer +// ------------------------------------ +const initialState = { + isLoading: false, + payments: [], + invoices: [] +} + +export default function activityReducer(state = initialState, action) { + const handler = ACTION_HANDLERS[action.type] + + return handler ? handler(state, action) : state +} \ No newline at end of file diff --git a/app/reducers/index.js b/app/reducers/index.js index f5bc8a1c..ccb744d8 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -1,9 +1,11 @@ // @flow import { combineReducers } from 'redux' import { routerReducer as router } from 'react-router-redux' +import activity from './activity' const rootReducer = combineReducers({ - router + router, + activity }) export default rootReducer diff --git a/app/routes.js b/app/routes.js index 55ce60f4..ab92d615 100644 --- a/app/routes.js +++ b/app/routes.js @@ -2,12 +2,12 @@ import React from 'react' import { Switch, Route } from 'react-router' import App from './routes/app' -import Home from './routes/home' +import Activity from './routes/activity' export default () => ( - + ); diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js new file mode 100644 index 00000000..8b28583d --- /dev/null +++ b/app/routes/activity/components/Activity.js @@ -0,0 +1,46 @@ +// @flow +import React, { Component } from 'react' +import { MdSearch } from 'react-icons/lib/md' +import styles from './Activity.scss' + +class Activity extends Component { + componentWillMount() { + this.props.fetchActivity() + } + + render() { + const { activity: { isLoading, payments, invoices } } = this.props + if (isLoading) { return
Loading...
} + return ( +
+
+ + +
+ +
+

Payments

+
+
    + { + payments.map((payment, index) => { + console.log('payment: ', payment) + return ( +
  • + hi +
    • + ) + }) + } +
+
+
+
+ ) + } +} + + +export default Activity \ No newline at end of file diff --git a/app/routes/home/components/Home.scss b/app/routes/activity/components/Activity.scss similarity index 50% rename from app/routes/home/components/Home.scss rename to app/routes/activity/components/Activity.scss index bab509cc..91c71a61 100644 --- a/app/routes/home/components/Home.scss +++ b/app/routes/activity/components/Activity.scss @@ -26,4 +26,31 @@ height: 68px; font-size: 18px; } -} \ No newline at end of file +} + +.transactions { + background: #F7F7F7; + + .header { + width: 50%; + margin: 0 auto; + padding: 60px 0 20px 0; + background: #F7F7F7; + color: #999; + text-transform: uppercase; + font-size: 14px; + font-weight: 400; + letter-spacing: 1.6px; + } +} + +.activityContainer { + background: #fff; + padding: 20px 0; + + .activityList { + width: 50%; + margin: 0 auto; + background: #fff; + } +} diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js new file mode 100644 index 00000000..4f1928b5 --- /dev/null +++ b/app/routes/activity/containers/ActivityContainer.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import { fetchActivity } from '../../../reducers/activity' +import Activity from '../components/Activity' + +const mapDispatchToProps = { + fetchActivity +} + +const mapStateToProps = (state) => ({ + activity: state.activity +}) + +export default connect(mapStateToProps, mapDispatchToProps)(Activity) \ No newline at end of file diff --git a/app/routes/activity/index.js b/app/routes/activity/index.js new file mode 100644 index 00000000..45b53e96 --- /dev/null +++ b/app/routes/activity/index.js @@ -0,0 +1,3 @@ +import ActivityContainer from './containers/ActivityContainer' + +export default ActivityContainer \ No newline at end of file diff --git a/app/routes/home/components/Home.js b/app/routes/home/components/Home.js deleted file mode 100644 index ae487873..00000000 --- a/app/routes/home/components/Home.js +++ /dev/null @@ -1,22 +0,0 @@ -// @flow -import React, { Component } from 'react' -import { MdSearch } from 'react-icons/lib/md' -import styles from './Home.scss' - -class Home extends Component { - render() { - return ( -
-
- - -
-
- ) - } -} - - -export default Home \ No newline at end of file diff --git a/app/routes/home/containers/HomeContainer.js b/app/routes/home/containers/HomeContainer.js deleted file mode 100644 index 74d25fed..00000000 --- a/app/routes/home/containers/HomeContainer.js +++ /dev/null @@ -1,8 +0,0 @@ -import { connect } from 'react-redux' -import Home from '../components/Home' - -const mapDispatchToProps = {} - -const mapStateToProps = (state) => ({}) - -export default connect(mapStateToProps, mapDispatchToProps)(Home) \ No newline at end of file diff --git a/app/routes/home/index.js b/app/routes/home/index.js deleted file mode 100644 index f579e64e..00000000 --- a/app/routes/home/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import HomeContainer from './containers/HomeContainer' - -export default HomeContainer \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a32c97a3..280015b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -622,6 +622,25 @@ "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=", "dev": true }, + "axios": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz", + "integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=", + "requires": { + "follow-redirects": "1.2.4", + "is-buffer": "1.1.5" + }, + "dependencies": { + "follow-redirects": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.4.tgz", + "integrity": "sha512-Suw6KewLV2hReSyEOeql+UUkBVyiBm3ok1VPrVFRZnQInWpdoZbbiG5i8aJVSjTr0yQ4Ava0Sh6/joCg1Brdqw==", + "requires": { + "debug": "2.6.8" + } + } + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", @@ -8210,8 +8229,7 @@ "is-buffer": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz", - "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=", - "dev": true + "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=" }, "is-builtin-module": { "version": "1.0.0", diff --git a/package.json b/package.json index 4df066b9..9c412cc0 100644 --- a/package.json +++ b/package.json @@ -182,6 +182,7 @@ "webpack-merge": "^4.1.0" }, "dependencies": { + "axios": "^0.16.2", "devtron": "^1.4.0", "electron-debug": "^1.2.0", "font-awesome": "^4.7.0",