WIP Price alert

src/actions/alert.js

@@ -0,0 +1,18 @@
+import types from '../types/alert';
+
+export const enablePriceAlertAction = (data) => ({
+    type: types.ENABLE_PRICE_ALERT,
+    payload: data
+});
+export const disablePriceAlertAction = (data) => ({
+    type: types.DISABLE_PRICE_ALERT,
+    payload: data
+});
+export const deletePriceAlertAction = (data) => ({
+    type: types.DELETE_PRICE_ALERT,
+    payload: data
+});
+export const fetchPriceAlertAction = (data) => ({
+    type: types.FETCH_PRICE_ALERT,
+    payload: data
+});

src/components/PriceAlert/create.js

@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import { ScrollView, StyleSheet, View, Text, TextInput, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
+import { baseColor, lossColor, brandColor } from '../../config'
+import { Button, StyleProvider,  } from 'native-base';
+import getTheme from '../../../native-base-theme/components';
+import _platform from '../../../native-base-theme/variables/platform';
+import { withDrawer } from '../../helpers/drawer';
+import { createPriceAlert } from '../../reducers/alert'
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        backgroundColor: baseColor
+    },
+    container: {
+        display: 'flex',
+        borderColor: '#fff',
+        justifyContent: 'space-between',
+        backgroundColor: baseColor,
+        marginBottom: 10,
+        flexDirection: 'row',
+        paddingLeft: 20
+    },
+    containerChild: {
+        marginBottom: 15,
+        flexGrow: .5,
+        flexBasis: 1,
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexDirection: 'row'
+    },
+    textInput: {
+        height: 30,
+        fontSize: 14,
+        width: '50%',
+        borderColor: 'gray',
+        borderBottomWidth: 1,
+        color: '#fff'
+    },
+    horizontalLine: {
+        borderBottomColor: '#f5f5f5',
+        borderBottomWidth: 1,
+        marginTop: 15,
+        marginBottom: 15
+    }
+})
+
+const radioProps = [
+    {label: 'One Time', value: 0 },
+    {label: 'Continuous', value: 1 }
+]
+
+const priceLevel = [
+    {label: 'More than', value: 0 },
+    {label: 'Less than', value: 1 }
+]
+
+class CreatePriceAlert extends Component {
+    state = {
+        radioValue: 0,
+        frequency: 0,
+        price: 0,
+        type: 0,
+    }
+
+    submit = () => {
+        const {currencySymbol, currency, createPriceAlert } = this.props;
+        if(this.state.price <= 0) {
+            Alert.alert('Please enter a correct price value');
+            return
+        }
+
+        createPriceAlert({
+            fsym : currencySymbol,
+            tsym: currency,
+            price: parseFloat(this.state.price),
+            type: parseInt(this.state.type),
+            frequency: parseInt(this.state.frequency)
+        })
+    }
+
+    render() {
+        const { tokenDetails, edit, price } = this.props
+
+        return (
+            <StyleProvider style={getTheme(_platform)}>
+                <ScrollView
+                    style={styles.scrollContainer}
+                    containerStyleContent={styles.container}
+                >
+                    <View style={[styles.containerChild, {justifyContent: 'flex-start', padding: 35, paddingBottom: 0}]}>
+                        <Text style={{color: '#666'}}>THRESHOLD</Text>
+                    </View>
+
+                    <View style={styles.containerChild}>
+                        <Text style={{color: '#fff'}}>PRICE</Text>
+                        <TextInput
+                            style={styles.textInput}
+                            onChangeText={(price) => this.setState({price})}
+                            keyboardType='numeric'
+                            placeholder={'Enter numeric value'}
+                            placeholderTextColor='#444'
+                        />
+                    </View>
+
+                    <View style={styles.containerChild}>
+                        <Text style={{color: '#fff'}}>Current</Text>
+                        <TextInput
+                            style={styles.textInput}
+                            keyboardType='numeric'
+                            placeholder={''}
+                            placeholderTextColor='#444'
+                            editable={false}
+                            value={price}
+                        />
+                    </View>
+
+                    <View style={[styles.containerChild, {
+                        justifyContent: 'flex-start',
+                        paddingHorizontal: 35,
+                        marginTop: 20
+                      }]
+                      }>
+                        <Text style={{color: '#666'}}>WHEN THE PRICE IS </Text>
+                    </View>
+                    <View
+                        style={[styles.containerChild,
+                         {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'flex-start',
+                            paddingHorizontal: 35
+                          }
+                        ]}>
+                        <RadioForm
+                            radio_props={priceLevel}
+                            formHorizontal={true}
+                            labelHorizontal={true}
+                            labelStyle={{color: '#fff', paddingRight: 10}}
+                            buttonColor={brandColor}
+                            selectedButtonColor={brandColor}
+                            initial={0}
+                            onPress={(value) => {this.setState({type: value})}}
+                        />
+                    </View>
+
+                    <View style={[styles.containerChild, {
+            justifyContent: 'flex-start',
+            paddingHorizontal: 35,
+            marginTop: 20
+          }]
+          }>
+                        <Text style={{color: '#666'}}>FREQUENCY</Text>
+                    </View>
+
+                    <View
+                        style={[styles.containerChild,
+              {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                paddingHorizontal: 35
+              }
+            ]}>
+                        <RadioForm
+                            radio_props={radioProps}
+                            formHorizontal={true}
+                            labelHorizontal={true}
+                            labelStyle={{color: '#fff', paddingRight: 10}}
+                            buttonColor={brandColor}
+                            selectedButtonColor={brandColor}
+                            initial={0}
+                            onPress={(value) => {this.setState({frequency: value})}}
+                        />
+                    </View>
+                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
+                        <Button
+                            style={{flex: .8}}
+                            primary
+                            title={"Create Alert"}
+                            block
+                            onPress={() => { this.submit() }}>
+                            <Text style={{color: '#000'}}>Create Alert</Text>
+                        </Button>
+                    </View>
+
+                </ScrollView>
+            </StyleProvider>
+
+        )
+    }
+}
+
+
+const mapStateToProps = (state, props) => ({
+    tokenDetails: state.account.tokenDetails,
+    portfolio: state.account.portfolio,
+    currency: state.account.preference.currency,
+    ...props.navigation.state.params,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+    createPriceAlert: (data) => dispatch(createPriceAlert(data))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(withDrawer(CreatePriceAlert));