You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.2 KiB
78 lines
2.2 KiB
// @flow
|
|
import React, { Component } from 'react'
|
|
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
|
|
import { MdSearch } from 'react-icons/lib/md'
|
|
import Payments from './components/Payments'
|
|
import Invoices from './components/Invoices'
|
|
import styles from './Activity.scss'
|
|
|
|
class Activity extends Component {
|
|
constructor(props, context) {
|
|
super(props, context)
|
|
this.state = {
|
|
tab: 1
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
const { fetchPayments, fetchInvoices } = this.props
|
|
|
|
fetchPayments()
|
|
fetchInvoices()
|
|
}
|
|
|
|
render() {
|
|
const { tab } = this.state
|
|
const {
|
|
ticker,
|
|
invoice: { invoices, invoiceLoading },
|
|
payment: { payments, paymentLoading }
|
|
} = this.props
|
|
|
|
if (invoiceLoading || paymentLoading) { 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, public key, channel' type='text' />
|
|
</div>
|
|
|
|
<div className={styles.activities}>
|
|
<header className={styles.header}>
|
|
<span
|
|
className={`${styles.title} ${tab === 1 ? styles.active : null}`}
|
|
onClick={() => this.setState({ tab: 1 })}
|
|
>
|
|
Payments
|
|
</span>
|
|
<span
|
|
className={`${styles.title} ${tab === 2 ? styles.active : null}`}
|
|
onClick={() => this.setState({ tab: 2 })}
|
|
>
|
|
Invoices
|
|
</span>
|
|
</header>
|
|
<div className={styles.activityContainer}>
|
|
<CSSTransitionGroup
|
|
transitionName='activity'
|
|
transitionEnterTimeout={500}
|
|
transitionLeaveTimeout={500}
|
|
>
|
|
{
|
|
tab === 1 ?
|
|
<Payments key={1} payments={payments} ticker={ticker} />
|
|
:
|
|
<Invoices key={2} invoices={invoices} ticker={ticker} />
|
|
}
|
|
</CSSTransitionGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
export default Activity
|