Jack Mallers
8 years ago
13 changed files with 202 additions and 39 deletions
@ -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))) |
|||
} |
|||
@ -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 |
|||
} |
|||
@ -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 |
|||
|
|||
@ -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 <div>Loading...</div> } |
|||
return ( |
|||
<div> |
|||
<div className={styles.search}> |
|||
<label className={`${styles.label} ${styles.input}`}> |
|||
<MdSearch /> |
|||
</label> |
|||
<input className={`${styles.text} ${styles.input}`} placeholder='Search transactions by amount, pubkey, channel' type='text' /> |
|||
</div> |
|||
|
|||
<div className={styles.transactions}> |
|||
<h2 className={styles.header}>Payments</h2> |
|||
<div className={styles.activityContainer}> |
|||
<ul className={styles.activityList}> |
|||
{ |
|||
payments.map((payment, index) => { |
|||
console.log('payment: ', payment) |
|||
return ( |
|||
<li key={index} className={styles.activity}> |
|||
hi |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default Activity |
|||
@ -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) |
|||
@ -0,0 +1,3 @@ |
|||
import ActivityContainer from './containers/ActivityContainer' |
|||
|
|||
export default ActivityContainer |
|||
@ -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 ( |
|||
<div> |
|||
<div className={styles.search}> |
|||
<label className={`${styles.label} ${styles.input}`}> |
|||
<MdSearch /> |
|||
</label> |
|||
<input className={`${styles.text} ${styles.input}`} placeholder='Search transactions by amount, pubkey, channel' type='text' /> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default Home |
|||
@ -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) |
|||
@ -1,3 +0,0 @@ |
|||
import HomeContainer from './containers/HomeContainer' |
|||
|
|||
export default HomeContainer |
|||
Loading…
Reference in new issue