Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add deposits container. #16

Merged
merged 2 commits into from Jul 23, 2018
Merged

Add deposits container. #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b42aae
Wire deposit container.
abuiles Jul 23, 2018
9662c1b
Add credit debit mutation and use it in container.
abuiles Jul 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion app/components/TransferForm.tsx
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ import { Transaction } from '../Types'

interface Props {
send: (amount: string) => Promise<Transaction>
didSend: () => void
}

interface State {
Expand Down Expand Up @@ -37,14 +38,16 @@ class TransferForm extends React.Component<Props, State> {
sending: false
})

this.props.didSend()

return transaction
}

render() {
const { amount, sending } = this.state

return (
<Container>
<Container style={{backgroundColor: '#F5FCFF'}}>
<Content scrollEnabled={false}>
<Form>
<Item floatingLabel>
Expand Down
88 changes: 88 additions & 0 deletions app/containers/Deposit.tsx
View file
Open in desktop
@@ -0,0 +1,88 @@
import * as React from 'react'
import { View } from 'react-native'

import { NavigationScreenProps } from 'react-navigation'
import { Body, Button, Container, Content, Header, Icon, Left, Right, Text, Title } from 'native-base'
import { styles as s } from 'react-native-style-tachyons'
import layoutStyles from '../styles/layout'
import DismissableStackNavigator from './DismissableStackNavigator'
import { Transaction } from '../Types'
import TransferForm from '../components/TransferForm'
import CreditDebitMutation, { CREDIT_MUTATION } from '../mutations/CreditDebit'
import CurrentUserQuery, { GET_CURRENT_USER_QUERY } from '../queries/CurrentUser'

export class DepositScreen extends React.Component<NavigationScreenProps> {
async deposit(mutation, username: string, amount: string): Promise<Transaction> {
const { data } = await mutation({
variables: {
username,
amount
}
})

return data.credit
}

didSend(): void {
this.props.navigation.navigate('Home')
}

render() {
const { navigation } = this.props

const userSelected = () => navigation.navigate('PaymentDetails')

return (
<CurrentUserQuery query={GET_CURRENT_USER_QUERY}>
{({ loading, data }) => {
if (loading) {
return <Loading />
}

const { me } = data
return (
<Container style={{backgroundColor: '#F5FCFF'}}>
<Header style={layoutStyles.header}>
<Left>
<Button
transparent
onPress={() => this.props.screenProps.dismiss()}>
<Icon name='close' />
</Button>
</Left>
<Body>
<Title>Deposit</Title>
</Body>
<Right />
</Header>
<Content scrollEnabled={false}>
<CreditDebitMutation mutation={CREDIT_MUTATION}>
{(mutation, { data }) => {
return (
<TransferForm send={this.deposit.bind(this, mutation, me.username)} didSend={this.didSend.bind(this)} />
)
}}
</CreditDebitMutation>
</Content>
</Container>
)
}}
</CurrentUserQuery>
)
}
}

export default DismissableStackNavigator(
{
Deposit: {
screen: DepositScreen
}
},
{
initialRouteName: 'Deposit',
headerMode: 'none',
cardStyle: {
backgroundColor: '#F5FCFF'
}
}
)
61 changes: 35 additions & 26 deletions app/containers/Drawer.tsx
View file
Open in desktop
Expand Up @@ -19,32 +19,41 @@ export default class Drawer extends React.Component<NavigationScreenProps> {
render() {
return (
<Container style={{backgroundColor: '#F5FCFF'}}>
<Header style={{backgroundColor: '#F5FCFF'}} />
<Content>
<List>
<ListItem>
<Button
transparent
onPress={() => alert('implement me')}>
>
<Icon name="ios-qr-scanner" />
<Text>Your QR Code</Text>
</Button>
</ListItem>
<ListItem>
<ApolloConsumer>
{cache => (
<Button
transparent
onPress={() => { this.logout(cache) }}>
<Icon name="log-out" />
<Text>Log out</Text>
</Button>
)}
</ApolloConsumer>
</ListItem>
</List>
</Content>
<Header style={{backgroundColor: '#F5FCFF'}} />
<Content>
<List>
<ListItem>
<Button
transparent
onPress={() => alert('implement me')}>
>
<Icon name='ios-qr-scanner' />
<Text>Your QR Code</Text>
</Button>
</ListItem>
<ListItem>
<Button
transparent
onPress={() => this.props.navigation.navigate('Deposit')}>
>
<Icon name='ios-send' />
<Text>Deposit money</Text>
</Button>
</ListItem>
<ListItem>
<ApolloConsumer>
{cache => (
<Button
transparent
onPress={() => { this.logout(cache) }}>
<Icon name='log-out' />
<Text>Log out</Text>
</Button>
)}
</ApolloConsumer>
</ListItem>
</List>
</Content>
</Container>
)
}
Expand Down
4 changes: 4 additions & 0 deletions app/containers/Root.tsx
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@ import { InMemoryCache } from 'apollo-cache-inmemory'
import { onError } from 'apollo-link-error'
import { withClientState } from 'apollo-link-state'

import DepositStack from './Deposit'
import Drawer from './Drawer'
import HomeScreen from './Home'
import { AuthLoadingScreen, SignInScreen } from './SignInScreen'
Expand All @@ -30,6 +31,9 @@ const HomeStack = createStackNavigator(
},
NewPayment: {
screen: NewPaymentStack
},
Deposit: {
screen: DepositStack
}
},
{
Expand Down
21 changes: 21 additions & 0 deletions app/mutations/CreditDebit.tsx
View file
Open in desktop
@@ -0,0 +1,21 @@
import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'
import { Transaction } from '../Types'

interface Data {
deposit: Transaction
}

interface Variables {
amount: string
username: string
}

export const CREDIT_MUTATION = gql`
mutation credit($amount: String!, $username: String!) {
credit(amount: $amount, username: $username) {
id
}
}
`
export default class CreditDebitMutation extends Mutation<Data, Variables> {}