From 3a7f79f11e41db590d4a99ee7985b9820b1d2944 Mon Sep 17 00:00:00 2001
From: ue <ugurerdal93@gmail.com>
Date: Tue, 30 Oct 2018 13:15:33 +0300
Subject: [PATCH] created tab bar according to scroll element && enhanced
 couple comp && upvoted added && comment count added

---
 src/components/basicUIElements/index.js       |  2 +
 .../basicUIElements/view/stickyBarStyles.js   | 20 ++++++
 .../basicUIElements/view/stickyBarView.js     |  9 +++
 .../view/textWithIconStyles.js                |  5 +-
 .../basicUIElements/view/textWithIconView.js  |  9 +--
 .../view/markdownEditorStyles.js              | 11 ---
 .../markdownEditor/view/markdownEditorView.js |  5 +-
 .../container/postDisplayContainer.js         | 10 ++-
 .../postView/view/postDisplayStyles.js        | 11 +++
 .../postView/view/postDisplayView.js          | 69 +++++++++++++++++--
 src/components/posts/view/postsView.js        | 22 ++++--
 src/components/upvote/view/upvoteStyles.js    |  6 ++
 src/components/upvote/view/upvoteView.js      | 15 ++--
 src/screens/home/screen/homeScreen.js         | 29 +++-----
 src/screens/post/container/postContainer.js   | 35 ++++++++--
 src/screens/post/screen/postScreen.js         |  4 +-
 16 files changed, 197 insertions(+), 65 deletions(-)
 create mode 100644 src/components/basicUIElements/view/stickyBarStyles.js
 create mode 100644 src/components/basicUIElements/view/stickyBarView.js

diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js
index cea965a87..36a7aa72f 100644
--- a/src/components/basicUIElements/index.js
+++ b/src/components/basicUIElements/index.js
@@ -9,9 +9,11 @@ import ProfileSummaryPlaceHolder from './view/profileSummaryPlaceHolder';
 import Tag from './view/tagView';
 import TextWithIcon from './view/textWithIconView';
 import WalletLineItem from './view/walletLineItemView';
+import StickyBar from './view/stickyBarView';
 
 export {
   // Card,
+  StickyBar,
   Chip,
   GrayWrapper,
   LineBreak,
diff --git a/src/components/basicUIElements/view/stickyBarStyles.js b/src/components/basicUIElements/view/stickyBarStyles.js
new file mode 100644
index 000000000..8c3fb30d6
--- /dev/null
+++ b/src/components/basicUIElements/view/stickyBarStyles.js
@@ -0,0 +1,20 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: '$white',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '$deviceWidth',
+    height: 50,
+    shadowOpacity: 0.2,
+    shadowOffset: {
+      height: 1.5,
+    },
+  },
+  fixedFooter: {
+    position: 'absolute',
+    bottom: 0,
+  },
+});
diff --git a/src/components/basicUIElements/view/stickyBarView.js b/src/components/basicUIElements/view/stickyBarView.js
new file mode 100644
index 000000000..1d56c256b
--- /dev/null
+++ b/src/components/basicUIElements/view/stickyBarView.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './stickyBarStyles';
+
+const StickyBar = ({ children, isFixedFooter }) => (
+  <View style={[styles.container, isFixedFooter && styles.fixedFooter]}>{children}</View>
+);
+
+export default StickyBar;
diff --git a/src/components/basicUIElements/view/textWithIconStyles.js b/src/components/basicUIElements/view/textWithIconStyles.js
index ca77d6fd1..b0d7e13fd 100644
--- a/src/components/basicUIElements/view/textWithIconStyles.js
+++ b/src/components/basicUIElements/view/textWithIconStyles.js
@@ -10,12 +10,13 @@ export default EStyleSheet.create({
     alignSelf: 'flex-start',
   },
   icon: {
-    color: '#c1c5c7',
+    color: '$iconColor',
     fontSize: 12,
     marginRight: 3,
   },
   text: {
-    color: '#788187',
+    color: '$primaryDarkGray',
+    alignSelf: 'center',
     fontSize: 11,
   },
 });
diff --git a/src/components/basicUIElements/view/textWithIconView.js b/src/components/basicUIElements/view/textWithIconView.js
index f5624b448..635d0c653 100644
--- a/src/components/basicUIElements/view/textWithIconView.js
+++ b/src/components/basicUIElements/view/textWithIconView.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import { View, TouchableHighlight, Text } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Icon } from '../../icon';
 import styles from './textWithIconStyles';
 
 const TextWithIcon = ({
-  iconName, text, isClickable, onPress,
+  iconName, text, isClickable, onPress, iconStyle, iconType,
 }) => (
   <View style={styles.container}>
     {isClickable || onPress ? (
       <TouchableHighlight underlayColor="transparent" onPress={() => onPress && onPress()}>
         <View style={styles.wrapper}>
-          {text && <Ionicons style={styles.icon} name={iconName} />}
-          <Text style={styles.text}>{text}</Text>
+          <Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
+          <Text style={[styles.text]}>{text}</Text>
         </View>
       </TouchableHighlight>
     ) : (
       <View style={styles.wrapper}>
-        {text && <Ionicons style={styles.icon} name={iconName} />}
+        {text && <Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />}
         <Text style={styles.text}>{text}</Text>
       </View>
     )}
diff --git a/src/components/markdownEditor/view/markdownEditorStyles.js b/src/components/markdownEditor/view/markdownEditorStyles.js
index 052a5527f..768f0a32e 100644
--- a/src/components/markdownEditor/view/markdownEditorStyles.js
+++ b/src/components/markdownEditor/view/markdownEditorStyles.js
@@ -17,17 +17,6 @@ export default EStyleSheet.create({
   inlinePadding: {
     padding: 8,
   },
-  editorButtons: {
-    flexDirection: 'row',
-    backgroundColor: '$white',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: 50,
-    shadowOpacity: 0.2,
-    shadowOffset: {
-      height: 1.5,
-    },
-  },
   leftButtonsWrapper: {
     marginLeft: 16,
     flexDirection: 'row',
diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js
index bab93f503..73fa9fb93 100644
--- a/src/components/markdownEditor/view/markdownEditorView.js
+++ b/src/components/markdownEditor/view/markdownEditorView.js
@@ -8,6 +8,7 @@ import { MarkdownView } from 'react-native-markdown-view';
 import Formats from './formats/formats';
 import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
+import { StickyBar } from '../../basicUIElements';
 
 // Styles
 import styles from './markdownEditorStyles';
@@ -85,7 +86,7 @@ export default class MarkdownEditorView extends Component {
   );
 
   _renderEditorButtons = ({ getState, setState }) => (
-    <View style={styles.editorButtons}>
+    <StickyBar>
       <View style={styles.leftButtonsWrapper}>
         <FlatList
           data={Formats}
@@ -111,7 +112,7 @@ export default class MarkdownEditorView extends Component {
           isHasChildIcon
         />
       </View>
-    </View>
+    </StickyBar>
   );
 
   render() {
diff --git a/src/components/postView/container/postDisplayContainer.js b/src/components/postView/container/postDisplayContainer.js
index 3faa9ed21..ff9532e4c 100644
--- a/src/components/postView/container/postDisplayContainer.js
+++ b/src/components/postView/container/postDisplayContainer.js
@@ -42,9 +42,15 @@ class PostDisplayContainer extends Component {
   };
 
   render() {
-    const { post } = this.props;
+    const { post, currentUser } = this.props;
 
-    return <PostDisplayView handleOnUserPress={this._handleOnUserPress} post={post} />;
+    return (
+      <PostDisplayView
+        currentUser={currentUser}
+        handleOnUserPress={this._handleOnUserPress}
+        post={post}
+      />
+    );
   }
 }
 
diff --git a/src/components/postView/view/postDisplayStyles.js b/src/components/postView/view/postDisplayStyles.js
index e56d0da15..a120ad364 100644
--- a/src/components/postView/view/postDisplayStyles.js
+++ b/src/components/postView/view/postDisplayStyles.js
@@ -35,4 +35,15 @@ export default EStyleSheet.create({
     color: '$primaryBlack',
     fontWeight: 'bold',
   },
+  stickyWrapper: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+  },
+  barIcons: {
+    color: '$primaryDarkGray',
+    fontSize: 20,
+    marginRight: 8,
+    marginLeft: 25,
+    alignSelf: 'center',
+  },
 });
diff --git a/src/components/postView/view/postDisplayView.js b/src/components/postView/view/postDisplayView.js
index 527610436..b9aff3225 100644
--- a/src/components/postView/view/postDisplayView.js
+++ b/src/components/postView/view/postDisplayView.js
@@ -1,15 +1,20 @@
 import React, { Component, Fragment } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import {
+  View, Text, ScrollView, Dimensions,
+} from 'react-native';
 
 // Constants
 
 // Components
 import { PostHeaderDescription, PostBody, Tags } from '../../postElements';
-import { PostPlaceHolder } from '../../basicUIElements';
+import { PostPlaceHolder, StickyBar, TextWithIcon } from '../../basicUIElements';
+import { Upvote } from '../../upvote';
+import { IconButton } from '../../iconButton';
 
 // Styles
 import styles from './postDisplayStyles';
 
+const HEIGHT = Dimensions.get('window').width;
 class PostDisplayView extends Component {
   /* Props
     * ------------------------------------------------
@@ -18,24 +23,73 @@ class PostDisplayView extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      postHeight: 0,
+      scrollHeight: 0,
+    };
   }
 
   // Component Life Cycles
 
   // Component Functions
+  _handleOnScroll = (event) => {
+    const { y } = event.nativeEvent.contentOffset;
+
+    this.setState({
+      scrollHeight: HEIGHT + y,
+    });
+  };
+
+  _handleOnPostLayout = (event) => {
+    const { height } = event.nativeEvent.layout;
+
+    this.setState({
+      postHeight: height,
+    });
+  };
+
+  _getTabBar = (isFixedFooter = false) => {
+    const { post, currentUser } = this.props;
+
+    console.log(post);
+    return (
+      <StickyBar isFixedFooter={isFixedFooter}>
+        <View style={styles.stickyWrapper}>
+          <Upvote isShowpayoutValue content={post} user={currentUser} isLoggedIn={!!currentUser} />
+          <TextWithIcon
+            isClickable
+            iconStyle={styles.barIcons}
+            textMarginLeft={20}
+            text={post && post.vote_count}
+            iconName="ios-people"
+          />
+          <TextWithIcon
+            isClickable
+            iconStyle={styles.barIcons}
+            textMarginLeft={20}
+            text="64"
+            iconName="comments"
+            iconType="FontAwesome"
+          />
+        </View>
+      </StickyBar>
+    );
+  };
 
   render() {
     const { post, handleOnUserPress } = this.props;
+    const { postHeight, scrollHeight } = this.state;
+
+    const isPostEnd = scrollHeight > postHeight;
 
     return (
       <View style={styles.container}>
-        <ScrollView style={styles.scroll}>
+        <ScrollView style={styles.scroll} onScroll={event => this._handleOnScroll(event)}>
           <View style={styles.header}>
             {!post ? (
               <PostPlaceHolder />
             ) : (
-              <Fragment>
+              <View onLayout={event => this._handleOnPostLayout(event)}>
                 <Text style={styles.title}>{post.title}</Text>
                 <PostHeaderDescription
                   handleOnUserPress={handleOnUserPress}
@@ -58,10 +112,13 @@ class PostDisplayView extends Component {
                     {post.created}
                   </Text>
                 </View>
-              </Fragment>
+              </View>
             )}
           </View>
+          {isPostEnd && this._getTabBar()}
+          {/* Comments Here! */}
         </ScrollView>
+        {!isPostEnd && this._getTabBar(true)}
       </View>
     );
   }
diff --git a/src/components/posts/view/postsView.js b/src/components/posts/view/postsView.js
index dae33e639..02ddbd550 100644
--- a/src/components/posts/view/postsView.js
+++ b/src/components/posts/view/postsView.js
@@ -29,9 +29,10 @@ class PostsView extends Component {
   }
 
   componentDidMount() {
-    const { user } = this.state;
+    const { user, isLoggedIn, isLoginMust } = this.state;
+    const isCanLoad = isLoginMust ? isLoggedIn : true;
 
-    this._loadPosts(user);
+    isCanLoad && this._loadPosts(user);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -55,8 +56,8 @@ class PostsView extends Component {
             this.setState({
               isReady: true,
               posts: result,
-              startAuthor: result[result.length - 1].author,
-              startPermlink: result[result.length - 1].permlink,
+              startAuthor: result[result.length - 1] && result[result.length - 1].author,
+              startPermlink: result[result.length - 1] && result[result.length - 1].permlink,
               refreshing: false,
             });
           }
@@ -126,7 +127,12 @@ class PostsView extends Component {
       isReady, refreshing, posts, user,
     } = this.state;
     const {
-      componentId, handleOnUserPress, filterOptions, handleOnContentPress,
+      componentId,
+      handleOnUserPress,
+      filterOptions,
+      isLoginMust,
+      handleOnContentPress,
+      isLoggedIn,
     } = this.props;
 
     if (user && posts && posts.length > 0) {
@@ -148,7 +154,7 @@ class PostsView extends Component {
                 componentId={componentId}
                 content={item}
                 user={user}
-                isLoggedIn
+                isLoggedIn={isLoggedIn}
                 handleOnUserPress={handleOnUserPress}
                 handleOnContentPress={handleOnContentPress}
               />
@@ -178,6 +184,10 @@ class PostsView extends Component {
       );
     }
 
+    // if (isLoginMust && !isLoggedIn) {
+    //   return <NoPost defaultText="Login to see!" />;
+    // }
+
     return (
       <Fragment>
         <PostCardPlaceHolder />
diff --git a/src/components/upvote/view/upvoteStyles.js b/src/components/upvote/view/upvoteStyles.js
index c51a8534c..099268483 100644
--- a/src/components/upvote/view/upvoteStyles.js
+++ b/src/components/upvote/view/upvoteStyles.js
@@ -57,4 +57,10 @@ export default EStyleSheet.create({
   overlay: {
     backgroundColor: '#403c4449',
   },
+  payoutValue: {
+    alignSelf: 'center',
+    fontSize: 10,
+    color: '$primaryDarkGray',
+    marginLeft: 8,
+  },
 });
diff --git a/src/components/upvote/view/upvoteView.js b/src/components/upvote/view/upvoteView.js
index 92b68ad23..f53782912 100644
--- a/src/components/upvote/view/upvoteView.js
+++ b/src/components/upvote/view/upvoteView.js
@@ -103,7 +103,7 @@ class UpvoteView extends Component {
   };
 
   render() {
-    const { isLoggedIn } = this.props;
+    const { isLoggedIn, isShowpayoutValue, content } = this.props;
     const {
       isVoting, isModalVisible, amount, value, isVoted,
     } = this.state;
@@ -126,11 +126,14 @@ class UpvoteView extends Component {
               {isVoting ? (
                 <ActivityIndicator />
               ) : (
-                <Icon
-                  style={[styles.upvoteIcon, { color: '#007ee5' }]}
-                  active={!isLoggedIn}
-                  name={isVoted ? 'ios-arrow-dropup-circle' : 'ios-arrow-dropup-outline'}
-                />
+                <Fragment>
+                  <Icon
+                    style={[styles.upvoteIcon, { color: '#007ee5' }]}
+                    active={!isLoggedIn}
+                    name={isVoted ? 'ios-arrow-dropup-circle' : 'ios-arrow-dropup-outline'}
+                  />
+                  {isShowpayoutValue && <Text style={styles.payoutValue}>$ {content && content.pending_payout_value}</Text> }
+                </Fragment>
               )}
             </TouchableOpacity>
 
diff --git a/src/screens/home/screen/homeScreen.js b/src/screens/home/screen/homeScreen.js
index 7d4cc551a..e208a4b43 100644
--- a/src/screens/home/screen/homeScreen.js
+++ b/src/screens/home/screen/homeScreen.js
@@ -94,26 +94,15 @@ export default class HomeScreen extends PureComponent {
             )}
           >
             <View tabLabel="Feed" style={styles.tabbarItem}>
-              {isLoggedIn ? (
-                <Posts
-                  filterOptions={[
-                    'NEW POSTS',
-                    'VOTES',
-                    'REPLIES',
-                    'MENTIONS',
-                    'FOLLOWS',
-                    'REBLOGS',
-                  ]}
-                  isLoginMust
-                  getFor="feed"
-                  tag={user.name}
-                  user={user}
-                  isLoggedIn={isLoggedIn}
-                  componentId={componentId}
-                />
-              ) : (
-                <Text>Login to see your Feed</Text>
-              )}
+              <Posts
+                filterOptions={['NEW POSTS', 'VOTES', 'REPLIES', 'MENTIONS', 'FOLLOWS', 'REBLOGS']}
+                isLoginMust
+                getFor="feed"
+                tag={user.name}
+                user={user}
+                isLoggedIn={isLoggedIn}
+                componentId={componentId}
+              />
             </View>
             <View tabLabel="Hot" style={styles.tabbarItem}>
               <Posts
diff --git a/src/screens/post/container/postContainer.js b/src/screens/post/container/postContainer.js
index 2070d4f57..dfa36d139 100644
--- a/src/screens/post/container/postContainer.js
+++ b/src/screens/post/container/postContainer.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 // import { connect } from 'react-redux';
 
 // Services and Actions
-import { getPost } from '../../../providers/steem/dsteem';
+import { getUserData, getAuthStatus } from '../../../realm/realm';
+import { getPost, getUser } from '../../../providers/steem/dsteem';
 
 // Middleware
 
@@ -25,6 +26,7 @@ class PostContainer extends Component {
     this.state = {
       post: null,
       error: null,
+      currentUser: null,
     };
   }
 
@@ -34,6 +36,7 @@ class PostContainer extends Component {
     const { author, permlink } = navigation.state && navigation.state.params;
 
     this._loadPost(author, permlink);
+    this._getUser();
   }
 
   // Component Functions
@@ -50,10 +53,34 @@ class PostContainer extends Component {
       });
   };
 
-  render() {
-    const { post, error } = this.state;
+  async _getUser() {
+    let _currentUser;
+    let userData;
+    let isLoggedIn;
 
-    return <PostScreen key={Math.random * 100} post={post} error={error} />;
+    await getAuthStatus().then((res) => {
+      isLoggedIn = res;
+    });
+
+    if (isLoggedIn) {
+      await getUserData().then((res) => {
+        _currentUser = Array.from(res);
+      });
+
+      userData = _currentUser && (await getUser(_currentUser[0].username));
+
+      await this.setState({
+        currentUser: userData,
+      });
+    }
+  }
+
+  render() {
+    const { post, error, currentUser } = this.state;
+
+    return (
+      <PostScreen currentUser={currentUser} key={Math.random * 100} post={post} error={error} />
+    );
   }
 }
 
diff --git a/src/screens/post/screen/postScreen.js b/src/screens/post/screen/postScreen.js
index 657c9e532..e9d6b2729 100644
--- a/src/screens/post/screen/postScreen.js
+++ b/src/screens/post/screen/postScreen.js
@@ -25,12 +25,12 @@ class PostScreen extends Component {
   // Component Functions
 
   render() {
-    const { post } = this.props;
+    const { post, currentUser } = this.props;
 
     return (
       <Fragment>
         <EditorHeader isHasDropdown title="Post" />
-        <PostDisplay post={post} />
+        <PostDisplay post={post} currentUser={currentUser} />
       </Fragment>
     );
   }