Add payments container.

app/containers/Home.tsx

@@ -11,6 +11,7 @@ import layoutStyles from '../styles/layout'
import CurrentUserQuery, { GET_CURRENT_USER_QUERY } from '../queries/CurrentUser'
import { User } from '../Types'
import Balance from './Balance'
import Payments from './Payments'

export default class Home extends React.Component<NavigationScreenProps> {
  static navigationOptions = {
@@ -71,7 +72,10 @@ export default class Home extends React.Component<NavigationScreenProps> {
                     asset={anchorXUSD} />
                 </View>
                 <View>
                   <Text style={s.tc}>Hola {data.me.username}, your Stellar account is {data.me.stellarAccount}</Text>
                   <Payments
                     accountId={data.me.stellarAccount}
                     asset={anchorXUSD}
                   />
                 </View>
               </Content>
             </Container>)

app/containers/Payments.tsx

@@ -0,0 +1,170 @@
import * as React from 'react'
import { View, StyleSheet, FlatList } from 'react-native'

import { Container, Content, Text, Button, Spinner } from 'native-base';
import { styles as s } from "react-native-style-tachyons";

import { Asset, PaymentOperationRecord, Server, Network } from 'stellar-sdk'

import Payment from '../components/Payment';

interface Props {
  accountId: string
  asset?: Asset
}

interface State {
  loadMore: boolean
  payments: PaymentOperationRecord[]
  loading: boolean
  closeStreaming?: any
}


export default class Payments extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      loadMore: true,
      payments: [],
      loading: false
    }
  }

  async loadPayments(cursor?: string) {
    const { accountId, asset } = this.props
    const { payments } = this.state
    Network.useTestNetwork()
    const stellarServer = new Server('https://horizon-testnet.stellar.org')

    let builder = stellarServer
      .payments()
      .forAccount(accountId)
      .order('desc')

    if (cursor) {
      builder.cursor(cursor)
    }

    const { records } = await builder.call()

    if (asset) {
      return records.filter((payment) => payment.asset_code === asset.code && payment.asset_issuer === asset.issuer)
    } else {
      return records
    }
  }

  listenForPayments(cursor = 'now') {
    const { closeStreaming } = this.state

    if (closeStreaming) {
      try {
        closeStreaming()
      } catch (e) {
        console.log('error closing streaming')
      }
    }

    const { accountId } = this.props

    Network.useTestNetwork()
    const server = new Server('https://horizon-testnet.stellar.org')

    let handleMessage = (payment: PaymentOperationRecord) => {
      const { asset } = this.props
      const { payments } = this.state

      if (payment.asset_code === asset.code && payment.asset_issuer === asset.issuer) {
        this.setState({
          payments: [payment, ...payments]
        })
      }
    }

    this.setState({
      closeStreaming: server.payments()
        .cursor(cursor)
        .forAccount(accountId)
        .stream({
          onmessage: handleMessage
        })
    })
  }

  async componentDidMount() {
    const payments = await this.loadPayments()

    this.setState({
      payments
    })

    this.listenForPayments()
  }

  componentWillUnmount() {
    const { closeStreaming } = this.state

    try {
      closeStreaming && closeStreaming()
    } catch (e) {
      console.log('error closing streaming')
    }
  }

  async fetchMoreData() {
    const { accountId } = this.props
    const { payments } = this.state

    const cursor = payments[payments.length - 1].id

    this.setState({
      loading: true
    })

    const nextPage = await this.loadPayments(cursor)

    const state = {
      loadMore: true,
      payments: [...payments, ...nextPage],
      loading: false
    }

    if (nextPage.length === 0) {
      state.loadMore = false
    }

    this.setState(state)
  }

  render() {
    const { accountId } = this.props
    const { loadMore, payments, loading } = this.state

    return (
      <Container style={{ backgroundColor: '#F5FCFF' }} >
        <FlatList
          data={payments}
          renderItem={({ item }) => <Payment key={item.id} payment={item} account={accountId} />}
          keyExtractor={(item) => item.id}
          onEndReachedThreshold={0.2}
          onEndReached={({ distanceFromEnd }) => {
            if (!loadMore || loading) {
              return
            }

            return this.fetchMoreData()
          }}
          refreshing={loading}
          ListFooterComponent={loading && <Spinner color="blue" />}
          onRefresh={() => {
            if (payments.length > 0) {
              this.listenForPayments(payments[0].id)
            }
          }}
        />
      </Container>
    )
  }
}