Merge branch 'master' of https://github.com/esteemapp/esteem-mobile into header

package.json

@@ -3,10 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "react-native-scripts start",
-    "eject": "react-native-scripts eject",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios",
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "eject": "node node_modules/react-native/local-cli/cli.js eject",
+    "android": "node node_modules/react-native/local-cli/cli.js run-android",
+    "ios": "node node_modules/react-native/local-cli/cli.js run-ios",
     "test": "node node_modules/jest/bin/jest.js --watch",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",

src/components/basicUIElements/index.js

@@ -2,10 +2,9 @@ import Card from './view/cardView';
 import GrayWrapper from './view/grayWrapperView';
 import LineBreak from './view/lineBreakView';
 import NoPost from './view/noPostView';
-import PercentBar from './view/percentBarView';
 import TextWithIcon from './view/textWithIconView';
 import WalletLineItem from './view/walletLineItemView';
 
 export {
-  Card, GrayWrapper, LineBreak, NoPost, PercentBar, TextWithIcon, WalletLineItem,
+  Card, GrayWrapper, LineBreak, NoPost, TextWithIcon, WalletLineItem,
 };

src/components/basicUIElements/view/noPostStyles.js

@@ -1,21 +1,21 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   wrapper: {
-    flexDirection: "column",
-    alignItems: "center",
-    height: "$deviceHeight",
-    backgroundColor: "$white",
+    flexDirection: 'column',
+    alignItems: 'center',
+    height: '$deviceHeight',
+    backgroundColor: '$white',
   },
   image: {
-    width: "$deviceWidth - 40",
+    width: '$deviceWidth - 40',
     height: 192,
     marginTop: 16,
   },
   text: {
-    color: "$primaryDarkGray",
+    color: '$primaryDarkGray',
     fontSize: 14,
     marginTop: 12,
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
 });

src/components/basicUIElements/view/percentBarView.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { View, Dimensions, Text } from 'react-native';
-import styles from './percentBarStyles';
-
-const PercentBar = ({
-  percent, margin, text, barColor, barPercentColor, textColor, isTop,
-}) => (
-  <View>
-    {_getText(textColor, text, isTop, true)}
-    <View style={[styles.container, barColor && { backgroundColor: barColor }]}>
-      <View
-        style={[
-          styles.powerBar,
-          barPercentColor && { backgroundColor: barPercentColor },
-          { width: _calculateWidth(percent, margin) },
-        ]}
-      />
-    </View>
-    {_getText(textColor, text, isTop, false)}
-  </View>
-);
-
-const _calculateWidth = (percent, margin = null) => {
-  if (percent) {
-    const per = 100 / percent;
-
-    return Dimensions.get('window').width / per - margin;
-  }
-  return null;
-};
-
-const _getText = (textColor, text, isTop, isRender) => {
-  if (isTop === isRender && text) {
-    return (
-      <View style={styles.percentTitleWrapper}>
-        <Text style={[styles.percentTitle, textColor && { color: textColor }]}>{text}</Text>
-      </View>
-    );
-  }
-};
-
-export default PercentBar;

src/components/comment/comment.js

@@ -375,7 +375,7 @@ class Comment extends React.PureComponent {
                                         flexDirection:
                                                                 'row',
                                         borderColor:
-                                                                'lightgray',
+                                                                '$primaryLightGray',
                                         borderWidth: 1,
                                         borderRadius: 10,
                                       }}

src/components/formInput/view/formInputView.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import {
-  View, Text, Image, TextInput,
-} from 'react-native';
+import { View, TextInput } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import FastImage from 'react-native-fast-image';
 
@@ -30,7 +28,7 @@ class FormInputView extends Component {
 
     this.state = {
       value: '',
-      inputBorderColor:"$iconColor",
+      inputBorderColor: '#c1c5c7',
       isValid: true,
     };
   }
@@ -93,7 +91,7 @@ class FormInputView extends Component {
           })
           }
           onSubmitEditing={() => this.setState({
-            inputBorderColor:"$iconColor",
+            inputBorderColor: '$iconColor',
           })
           }
           autoCapitalize="none"
@@ -101,9 +99,7 @@ class FormInputView extends Component {
           placeholder={placeholder}
           editable={isEditable || true}
           textContentType={type}
-          onChangeText={(value) => {
-            this._handleOnChange(value);
-          }}
+          onChangeText={val => this._handleOnChange(val)}
           value={value}
           style={styles.textInput}
         />

src/components/percentBar/index.js

@@ -0,0 +1,4 @@
+import PercentBar from './view/percentBarView';
+
+export { PercentBar };
+export default PercentBar;

src/components/percentBar/view/percentBarStyles.js

@@ -4,7 +4,7 @@ export default EStyleSheet.create({
   container: {
     backgroundColor: '$primaryLightBlue',
     height: 2,
-    marginVertical: 4,
+    marginVertical: 2,
     borderRadius: 50,
   },
   powerBar: {
@@ -19,6 +19,7 @@ export default EStyleSheet.create({
   percentTitle: {
     color: '$primaryBlue',
     fontSize: 11,
-    marginVertical: 10,
+    marginVertical: 1,
+    height: 15,
   },
 });

src/components/percentBar/view/percentBarView.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import {
+  View, Dimensions, Text, TouchableOpacity,
+} from 'react-native';
+
+// Constants
+
+// Components
+
+// Styles
+import styles from './percentBarStyles';
+
+class PercentBarView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { string }    barColor                - Bar color proferties
+    *   @prop { string }    barPercentColor         - Bar background color properties
+    *   @prop { number }    margin                  - If you use with margin right and left you should declare that if it neccessary
+    *   @prop { number }    percent                 - Percent for bar (ex: %32 just send 32)
+    *   @prop { string }    text                    - Text string
+    *   @prop { string }    textColor               - Text color
+    *
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _calculateWidth = (percent, margin = null) => {
+    if (percent) {
+      const per = 100 / percent;
+
+      return Dimensions.get('window').width / per - margin;
+    }
+    return null;
+  };
+
+  _getText = (textColor, text, isTop, isRender) => {
+    const { isShowText } = this.props;
+
+    if (isTop === isRender && text) {
+      return (
+        <View style={styles.percentTitleWrapper}>
+          <Text style={[styles.percentTitle, textColor && { color: textColor }]}>
+            {isShowText && text}
+          </Text>
+        </View>
+      );
+    }
+  };
+
+  render() {
+    const {
+      percent, margin, text, barColor, barPercentColor, textColor, isTop,
+    } = this.props;
+
+    return (
+      <View>
+        {this._getText(textColor, text, isTop, true)}
+        <View style={[styles.container, barColor && { backgroundColor: barColor }]}>
+          <View
+            style={[
+              styles.powerBar,
+              barPercentColor && { backgroundColor: barPercentColor },
+              { width: this._calculateWidth(percent, margin) },
+            ]}
+          />
+        </View>
+        {this._getText(textColor, text, isTop, false)}
+      </View>
+    );
+  }
+}
+
+export default PercentBarView;

src/components/profileSummary/view/profileSummaryView.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react';
-import { View, Image, Text } from 'react-native';
+import React, { Component, Fragment } from 'react';
+import {
+  View, Image, Text, TouchableOpacity,
+} from 'react-native';
 import { DropdownButton } from '../../dropdownButton';
 
 // Constants
@@ -7,7 +9,7 @@ import DEFAULT_IMAGE from '../../../assets/default_cover_image.png';
 
 // Components
 import { TextWithIcon } from '../../basicUIElements';
-import { PercentBar } from '../../basicUIElements';
+import { PercentBar } from '../../percentBar';
 import { IconButton } from '../../iconButton';
 // Styles
 // eslint-disable-next-line
@@ -21,26 +23,22 @@ class ProfileSummaryView extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isShowPercentText: false,
+    };
   }
 
   // Component Life Cycles
 
   // Component Functions
-  _getFollowerCount = () => {
-    const { followerCount } = this.props;
-    return 32;
-  };
-
-  _getFollowingCount = () => {
-    const { followingCoung } = this.props;
-    return 32;
-  };
 
   render() {
+    const { isShowPercentText } = this.state;
     const {
-      percent,
-      hours,
+      percentRC,
+      percentVP,
+      hoursVP,
+      hoursRC,
       location,
       link,
       date,
@@ -48,11 +46,11 @@ class ProfileSummaryView extends Component {
       followerCount,
       coverImage,
     } = this.props;
-    const votingPowerText = `Voting power:${{ percent }}% • Full in ${{ hours }}hours`;
-    const rcsPowerText = 'RCs: 20% • Full in 36 hours';
+    const votingPowerText = `Voting power: ${percentVP}% • Full in ${hoursVP} hours`;
+    const rcsPowerText = `RCs: ${percentRC}% • Full in ${hoursRC} hours`;
 
     return (
-      <View>
+      <Fragment>
         <View style={styles.textWithIconWrapper}>
           <TextWithIcon text={location} iconName="md-navigate" />
           <TextWithIcon isClickable text={link} iconName="md-globe" />
@@ -64,10 +62,17 @@ class ProfileSummaryView extends Component {
           source={{ uri: coverImage }}
           defaultSource={DEFAULT_IMAGE}
         />
-
-        <PercentBar percent={percent} margin={24} isTop text={votingPowerText} />
+        <TouchableOpacity onPress={() => this.setState({ isShowPercentText: !isShowPercentText })}>
           <PercentBar
-          percent={percent}
+            isShowText={isShowPercentText}
+            percent={percentVP}
+            margin={24}
+            isTop
+            text={votingPowerText}
+          />
+          <PercentBar
+            isShowText={isShowPercentText}
+            percent={percentRC}
             margin={24}
             barColor="#eafcef"
             barPercentColor="#11c28b"
@@ -75,6 +80,7 @@ class ProfileSummaryView extends Component {
             isTop={false}
             text={rcsPowerText}
           />
+        </TouchableOpacity>
 
         <View style={styles.footer}>
           <View style={styles.leftIcons}>
@@ -111,7 +117,7 @@ class ProfileSummaryView extends Component {
             />
           </View>
         </View>
-      </View>
+      </Fragment>
     );
   }
 }

src/components/wallet/view/walletView.js

@@ -10,7 +10,6 @@ import { CollapsibleCard } from '../../collapsibleCard';
 import { WalletDetails } from '../../walletDetails';
 import { Transaction } from '../../transaction';
 
-
 // Styles
 import styles from './walletStyles';
 
@@ -30,7 +29,7 @@ class WalletView extends Component {
   // Component Functions
 
   render() {
-    // const {} = this.props;
+    const { user } = this.props;
 
     return (
       <View style={styles.container}>
@@ -53,7 +52,7 @@ class WalletView extends Component {
           </CollapsibleCard>
 
           <CollapsibleCard titleColor="#788187" title="Wallet Details" expanded>
-            <WalletDetails />
+            <WalletDetails balance={user.balance} />
           </CollapsibleCard>
 
           <Transaction />

src/components/walletDetails/view/walletDetailsView.js

@@ -25,13 +25,14 @@ class WalletDetailsView extends Component {
   // Component Functions
 
   render() {
+    const { balance } = this.props;
     return (
       <View>
         <WalletLineItem
           text="Steem"
           textColor="#3c4449"
           iconName="ios-information-circle-outline"
-          rightText="27.178 STEEM"
+          rightText={balance}
           isBoldText
         />
         <GrayWrapper>

src/screens/authorProfile/screen/authorStyles.js

@@ -23,7 +23,7 @@ export default EStyleSheet.create({
     alignSelf: 'center',
   },
   about: {
-    borderColor: 'lightgray',
+    borderColor: '$primaryLightGray',
     borderTopWidth: 1,
     borderBottomWidth: 1,
     flexDirection: 'row',

src/screens/login/screen/loginScreen.js

@@ -9,12 +9,12 @@ import { isLoggedIn } from '../../../redux/actions/userActions';
 
 // Internal Components
 import { FormInput } from '../../../components/formInput';
-import { TextButton } from '../../../components/buttons';
 import { InformationArea } from '../../../components/informationArea';
 import { Login } from '../../../providers/steem/auth';
 import { LoginHeader } from '../../../components/loginHeader';
 import { MainButton } from '../../../components/mainButton';
 import { TabBar } from '../../../components/tabBar';
+import { TextButton } from '../../../components/buttons';
 import { lookupAccounts } from '../../../providers/steem/dsteem';
 import STEEM_CONNECT_LOGO from '../../../assets/steem_connect.png';
 
@@ -104,6 +104,10 @@ class LoginScreen extends Component {
           description="To get all the benefits using eSteem"
           onPress={() => this._handleSignUp()}
         />
+        <KeyboardAwareScrollView
+          onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
+          onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
+        >
           <ScrollableTabView
             locked={isLoading}
             style={styles.tabView}
@@ -172,6 +176,7 @@ class LoginScreen extends Component {
               />
             </View>
           </ScrollableTabView>
+        </KeyboardAwareScrollView>
       </View>
     );
   }

src/screens/profile/screen/profileScreen.js

@@ -1,8 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { Component } from 'react';
-import {
-  FlatList, ActivityIndicator, View, Text,
-} from 'react-native';
+import { FlatList, ActivityIndicator, View } from 'react-native';
 
 import FastImage from 'react-native-fast-image';
 // Components
@@ -156,8 +154,17 @@ class ProfileScreen extends Component {
     let coverImage;
     let location;
     let website;
-    const votingPower = user && user.voting_power && user.voting_power / 100;
-    const fullInHour = Math.ceil((100 - votingPower) * 0.833333);
+    let votingPower;
+    let resourceCredits;
+    let fullInHourVP;
+    let fullInHourRC;
+
+    if (user) {
+      votingPower = user.voting_power && user.voting_power / 100;
+      resourceCredits = user.resource_credits && user.resource_credits / 100;
+      fullInHourVP = Math.ceil((100 - votingPower) * 0.833333);
+      fullInHourRC = Math.ceil((100 - resourceCredits) * 0.833333);
+    }
 
     if (about) {
       _about = about.about;
@@ -170,12 +177,14 @@ class ProfileScreen extends Component {
         <CollapsibleCard
           title={_about}
           defaultTitle="Profile details"
-          expanded={true}
-          // locked={!isLoggedIn}
+          expanded={!isLoggedIn}
+          locked={!isLoggedIn}
         >
           <ProfileSummary
-            percent={votingPower}
-            hours={fullInHour}
+            percentVP={votingPower}
+            percentRC={resourceCredits}
+            hoursVP={fullInHourVP}
+            hoursRC={fullInHourRC}
             location={location}
             link={website}
             date={getFormatedCreatedDate(user && user.created)}
@@ -254,7 +263,7 @@ class ProfileScreen extends Component {
             )}
           </View>
           <View tabLabel={user.balance ? `$${user.balance}` : 'Wallet'}>
-            <Wallet />
+            <Wallet user={user}/>
           </View>
         </ScrollableTabView>
       </View>

src/screens/profile/screen/profileStyles.js

@@ -5,10 +5,10 @@ export default EStyleSheet.create({
   container: {
     flex: 1,
     top: StatusBar.currentHeight,
-    backgroundColor: '#f6f6f6',
+    backgroundColor: '$primaryGray',
   },
   content: {
-    backgroundColor: '#f9f9f9',
+    backgroundColor: '$primaryGray',
   },
   cover: {
     width: '$deviceWidth',
@@ -20,11 +20,11 @@ export default EStyleSheet.create({
     borderRadius: 50,
     top: -50,
     borderWidth: 1,
-    borderColor: 'white',
+    borderColor: '$white',
     alignSelf: 'center',
   },
   about: {
-    borderColor: 'lightgray',
+    borderColor: '$primaryLightGray',
     borderTopWidth: 1,
     borderBottomWidth: 1,
     flexDirection: 'row',
@@ -39,8 +39,9 @@ export default EStyleSheet.create({
   },
   tabbar: {
     alignSelf: 'center',
-    height: 40,
-    backgroundColor: '#fff',
+    height: 55,
+    backgroundColor: '$white',
+    borderBottomColor: '#f1f1f1',
   },
   tabbarItem: {
     flex: 1,
@@ -48,18 +49,15 @@ export default EStyleSheet.create({
     backgroundColor: '#f9f9f9',
     minWidth: '$deviceWidth',
   },
-
-  tabbar: {
-    alignSelf: 'center',
-    height: 55,
-    backgroundColor: 'white',
-    borderBottomColor: '#f1f1f1',
-  },
   tabView: {
     alignSelf: 'center',
     backgroundColor: 'transparent',
   },
-  postTabBar: {},
-  commentsTabBar: {},
+  postTabBar: {
+    backgroundColor: '$white',
+  },
+  commentsTabBar: {
+    backgroundColor: '$white',
+  },
   tabBarTitle: {},
 });

src/screens/splash/container/splashContainer.js

@@ -8,14 +8,14 @@ import { default as ROUTES } from '../../../constants/routeNames';
 import SplashScreen from '../screen/splashScreen';
 
 class SplashContainer extends Component {
-  componentWillMount() {
+  async componentWillMount() {
     const { navigation } = this.props;
     // getUserData().then((res) => {
     //   if (res) {
     //     alert(...res);
     //   }
     // });
-    getAuthStatus().then((res) => {
+    await getAuthStatus().then((res) => {
       if (res) {
         navigation.navigate(ROUTES.DRAWER.MAIN);
       } else {