From bdbfd992fbfc0a2044851a70f1fec8195a8ffdf6 Mon Sep 17 00:00:00 2001
From: u-e <ugurerdal93@gmail.com>
Date: Wed, 10 Jul 2019 20:19:19 +0300
Subject: [PATCH] created seperate slider

---
 src/components/scaleSlider/customSlider.js    | 95 +++++++++++++++++++
 src/components/scaleSlider/item.js            | 23 +++++
 .../scaleSlider/scaleSliderStyles.js          | 49 ++++++++++
 src/containers/pointsContainer.js             |  2 +-
 src/screens/promote/screen/promoteScreen.js   | 75 ++++++++-------
 5 files changed, 205 insertions(+), 39 deletions(-)
 create mode 100644 src/components/scaleSlider/customSlider.js
 create mode 100644 src/components/scaleSlider/item.js
 create mode 100644 src/components/scaleSlider/scaleSliderStyles.js

diff --git a/src/components/scaleSlider/customSlider.js b/src/components/scaleSlider/customSlider.js
new file mode 100644
index 000000000..b6e677076
--- /dev/null
+++ b/src/components/scaleSlider/customSlider.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import { View, Dimensions } from 'react-native';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
+import { Item } from './item';
+
+import styles from './scaleSliderStyles';
+
+export class CustomSlider extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      multiSliderValue: [props.min, props.max],
+      first: props.min,
+      second: props.max,
+    };
+  }
+
+  _renderMarker = () => (
+    <View
+      style={{
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        backgroundColor: 'white',
+        borderColor: '#5CCDFF',
+        borderWidth: 1,
+        position: 'absolute',
+      }}
+    />
+  );
+
+  _multiSliderValuesChange = values => {
+    const { single, callback } = this.props;
+
+    if (single) {
+      this.setState({
+        second: values[0],
+      });
+    } else {
+      this.setState({
+        multiSliderValue: values,
+        first: values[0],
+        second: values[1],
+      });
+
+      if (callback) callback(values);
+    }
+  };
+
+  _renderScale = () => {
+    const { min, max, values } = this.props;
+    const { first, second } = this.state;
+
+    const items = [];
+
+    if (values) {
+      for (let i = min; i <= values.length; i++) {
+        items.push(<Item value={values[i - 1]} first={first} second={second} />);
+      }
+    } else {
+      for (let i = min; i <= max; i++) {
+        items.push(<Item value={i} first={first} second={second} />);
+      }
+    }
+    return items;
+  };
+
+  render() {
+    const { multiSliderValue } = this.state;
+    const { min, max, single, LRpadding } = this.props;
+
+    return (
+      <View>
+        <View style={[styles.column, { marginLeft: LRpadding, marginRight: LRpadding }]}>
+          {this._renderScale()}
+        </View>
+        <View style={styles.container}>
+          <MultiSlider
+            trackStyle={{ backgroundColor: '#bdc3c7' }}
+            selectedStyle={{ backgroundColor: '#357ce6' }}
+            values={single ? [multiSliderValue[1]] : [multiSliderValue[0], multiSliderValue[1]]}
+            sliderLength={Dimensions.get('window').width - LRpadding * 2}
+            onValuesChange={this._multiSliderValuesChange}
+            min={min}
+            max={max}
+            step={1}
+            allowOverlap={false}
+            customMarker={this._renderMarker}
+            snapped
+          />
+        </View>
+      </View>
+    );
+  }
+}
diff --git a/src/components/scaleSlider/item.js b/src/components/scaleSlider/item.js
new file mode 100644
index 000000000..5cbfa1f43
--- /dev/null
+++ b/src/components/scaleSlider/item.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+import styles from './scaleSliderStyles';
+
+export class Item extends Component {
+  render() {
+    const { value } = this.props;
+
+    return (
+      <View>
+        <Text style={[this.checkActive() ? styles.active : styles.inactive]}>{value}</Text>
+        <View style={[this.checkActive() ? styles.line : styles.passiveLine]} />
+      </View>
+    );
+  }
+
+  checkActive = () => {
+    const { value, first, second } = this.props;
+
+    if (value >= first && value <= second) return true;
+    return false;
+  };
+}
diff --git a/src/components/scaleSlider/scaleSliderStyles.js b/src/components/scaleSlider/scaleSliderStyles.js
new file mode 100644
index 000000000..84a61dac1
--- /dev/null
+++ b/src/components/scaleSlider/scaleSliderStyles.js
@@ -0,0 +1,49 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  active: {
+    textAlign: 'center',
+    fontSize: 17,
+    bottom: 10,
+    color: '#788187',
+  },
+  inactive: {
+    flex: 1,
+    textAlignVertical: 'center',
+    textAlign: 'center',
+    fontWeight: 'normal',
+    color: '#bdc3c7',
+  },
+  line: {
+    width: 15,
+    height: 15,
+    borderColor: '#357ce6',
+    borderRadius: 9,
+    top: 12,
+    borderWidth: 1,
+    backgroundColor: '#357ce6',
+    zIndex: 999,
+  },
+  passiveLine: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    top: 17,
+    borderColor: '#fff',
+    borderWidth: 1,
+    position: 'absolute',
+    backgroundColor: '#fff',
+    zIndex: 999,
+  },
+
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  column: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    bottom: -20,
+  },
+});
diff --git a/src/containers/pointsContainer.js b/src/containers/pointsContainer.js
index 4aa01b4d4..5b6c42549 100644
--- a/src/containers/pointsContainer.js
+++ b/src/containers/pointsContainer.js
@@ -136,7 +136,7 @@ class PointsContainer extends Component {
     await getUser(username)
       .then(userPoints => {
         const balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
-        this.setState({ userPoints, balance });
+        return balance;
       })
       .catch(err => {
         Alert.alert(err);
diff --git a/src/screens/promote/screen/promoteScreen.js b/src/screens/promote/screen/promoteScreen.js
index cda127664..51e656eb8 100644
--- a/src/screens/promote/screen/promoteScreen.js
+++ b/src/screens/promote/screen/promoteScreen.js
@@ -4,12 +4,17 @@
 import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
 import { Text, View, WebView, ScrollView, TouchableOpacity } from 'react-native';
+import get from 'lodash/get';
 import ActionSheet from 'react-native-actionsheet';
 import Slider from 'react-native-slider';
+import { CustomSlider } from '../../../components/scaleSlider/customSlider';
 
 // Container
 import { PointsContainer } from '../../../containers';
 
+// Services and Actions
+import { getUser } from '../../../providers/esteem/ePoint';
+
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
 import { TextInput } from '../../../components/textInput';
@@ -18,6 +23,8 @@ import { MainButton } from '../../../components/mainButton';
 import { DropdownButton } from '../../../components/dropdownButton';
 // import { Modal } from '../../../components/modal';
 
+import { PROMOTE_PRICING } from '../../../constants/options/points';
+
 // Styles
 import styles from './promoteStyles';
 
@@ -31,7 +38,9 @@ class PointsScreen extends PureComponent {
     super(props);
     this.state = {
       permlink: '',
-      selectedUser: props.currentAccountName,
+      selectedUser: '',
+      balance: '',
+      day: 1,
     };
   }
 
@@ -42,7 +51,7 @@ class PointsScreen extends PureComponent {
   _renderInput = (placeholder, state, keyboardType, isTextArea) => (
     <TextInput
       style={[isTextArea ? styles.textarea : styles.input]}
-      onChangeText={val => this._handleOnAmountChange(state, val)}
+      onChangeText={val => this.setState({ permlink: val })}
       value={this.state[state]}
       placeholder={placeholder}
       placeholderTextColor="#c1c5c7"
@@ -55,7 +64,7 @@ class PointsScreen extends PureComponent {
 
   _renderDescription = text => <Text style={styles.description}>{text}</Text>;
 
-  _renderDropdown = (accounts, currentAccountName, getUserBalance) => (
+  _renderDropdown = (accounts, currentAccountName) => (
     <DropdownButton
       dropdownButtonStyle={styles.dropdownButtonStyle}
       rowTextStyle={styles.rowTextStyle}
@@ -67,13 +76,27 @@ class PointsScreen extends PureComponent {
       selectedOptionIndex={accounts.findIndex(item => item.username === currentAccountName)}
       onSelect={(index, value) => {
         this.setState({ selectedUser: value });
-        getUserBalance(value);
+        this._getUserBalance(value);
       }}
     />
   );
 
+  _getUserBalance = async username => {
+    await getUser(username)
+      .then(userPoints => {
+        const balance = Math.round(get(userPoints, 'points') * 1000) / 1000;
+        this.setState({ balance });
+      })
+      .catch(err => {
+        Alert.alert(err);
+      });
+  };
+
   render() {
     const { intl } = this.props;
+    const { selectedUser, balance } = this.state;
+
+    // this._getUserBalance();
 
     return (
       <PointsContainer>
@@ -85,8 +108,7 @@ class PointsScreen extends PureComponent {
           refreshing,
           accounts,
           currentAccountName,
-          balance,
-          getUserBalance,
+          balance: _balance,
         }) => (
           <Fragment>
             <BasicHeader title="Promote" />
@@ -96,12 +118,12 @@ class PointsScreen extends PureComponent {
                   <TransferFormItem
                     label={intl.formatMessage({ id: 'promote.user' })}
                     rightComponent={() =>
-                      this._renderDropdown(accounts, currentAccountName, getUserBalance)
+                      this._renderDropdown(accounts, selectedUser || currentAccountName)
                     }
                   />
-                  <Text style={styles.balanceText}>{`${balance} eSteem Points`}</Text>
+                  <Text style={styles.balanceText}>{`${balance || _balance} eSteem Points`}</Text>
                   <TransferFormItem
-                    label={intl.formatMessage({ id: 'transfer.amount' })}
+                    label={intl.formatMessage({ id: 'promote.permlink' })}
                     rightComponent={() =>
                       this._renderInput(
                         intl.formatMessage({ id: 'promote.permlink' }),
@@ -110,36 +132,13 @@ class PointsScreen extends PureComponent {
                       )
                     }
                   />
-                  <TransferFormItem
-                    rightComponent={() => (
-                      <TouchableOpacity
-                        onPress={() => this._handleOnAmountChange('amount', balance)}
-                      >
-                        {this._renderDescription(
-                          `${intl.formatMessage({
-                            id: 'transfer.amount_desc',
-                          })}`,
-                        )}
-                      </TouchableOpacity>
-                    )}
+                  <CustomSlider
+                    min={1}
+                    values={[1, 2, 3, 7, 14]}
+                    LRpadding={40}
+                    callback={day => this.setState({ day })}
+                    single
                   />
-                  {/* <TransferFormItem
-                rightComponent={() =>
-                  this._renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' }))
-                }
-              /> */}
-                  {/* <Slider
-                    style={styles.slider}
-                    trackStyle={styles.track}
-                    thumbStyle={styles.thumb}
-                    minimumTrackTintColor="#357ce6"
-                    thumbTintColor="#007ee5"
-                    maximumValue={10000}
-                    value={100}
-                    onValueChange={val => {
-                      this.setState({ amount: val });
-                    }}
-                  /> */}
                 </View>
                 <View style={styles.bottomContent}>
                   <MainButton