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 }) => ( + {children} +); + +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, }) => ( {isClickable || onPress ? ( onPress && onPress()}> - {text && } - {text} + + {text} ) : ( - {text && } + {text && } {text} )} 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 }) => ( - + - + ); 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 ; + return ( + + ); } } 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 ( + + + + + + + + ); + }; render() { const { post, handleOnUserPress } = this.props; + const { postHeight, scrollHeight } = this.state; + + const isPostEnd = scrollHeight > postHeight; return ( - + this._handleOnScroll(event)}> {!post ? ( ) : ( - + this._handleOnPostLayout(event)}> {post.title} - + )} + {isPostEnd && this._getTabBar()} + {/* Comments Here! */} + {!isPostEnd && this._getTabBar(true)} ); } 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 ; + // } + return ( 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 ? ( ) : ( - + + + {isShowpayoutValue && $ {content && content.pending_payout_value} } + )} 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 { )} > - {isLoggedIn ? ( - - ) : ( - Login to see your Feed - )} + ; + 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 ( + + ); } } 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 ( - + ); }