diff --git a/src/components/bottomTabBar/view/tabbar.js b/src/components/bottomTabBar/view/tabbar.js index b5457d25d..ca535bef0 100644 --- a/src/components/bottomTabBar/view/tabbar.js +++ b/src/components/bottomTabBar/view/tabbar.js @@ -5,7 +5,6 @@ import Svg, { Circle, Path } from 'react-native-svg'; import scalePx from '../../../utils/scalePx'; import styles from './bottomTabBarStyles'; - const AnimatedCircle = Animated.createAnimatedComponent(Circle); const AnimatedPath = Animated.createAnimatedComponent(Path); @@ -164,12 +163,7 @@ const TabBarItem = ({ } if (showIcon) { return ( - + {selectedIcon || icon} ); diff --git a/src/components/comment/view/commentStyles.js b/src/components/comment/view/commentStyles.js index 7345f67bc..de69930c8 100644 --- a/src/components/comment/view/commentStyles.js +++ b/src/components/comment/view/commentStyles.js @@ -37,6 +37,7 @@ export default EStyleSheet.create({ position: 'absolute', right: 0, bottom: -10, + padding: 10, }, voteCountText: { alignSelf: 'center', diff --git a/src/components/comment/view/commentView.js b/src/components/comment/view/commentView.js index 67b355360..e11d11eb3 100644 --- a/src/components/comment/view/commentView.js +++ b/src/components/comment/view/commentView.js @@ -1,7 +1,7 @@ -import React, { PureComponent, Fragment } from 'react'; +import React, { Fragment, useState, useRef } from 'react'; import { View, TouchableWithoutFeedback } from 'react-native'; import ActionSheet from 'react-native-actionsheet'; -import { injectIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import get from 'lodash/get'; import { getTimeFromNow } from '../../../utils/time'; @@ -17,177 +17,162 @@ import { TextWithIcon } from '../../basicUIElements'; // Styles import styles from './commentStyles'; -class CommentView extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ - - constructor(props) { - super(props); - this.state = { - isShowSubComments: props.isShowSubComments || false, - isPressedShowButton: false, - }; - } - - // Component Life Cycles - // Component Functions - - _showSubCommentsToggle = () => { - const { isShowSubComments } = this.state; - - this.setState({ isShowSubComments: !isShowSubComments, isPressedShowButton: true }); +const CommentView = ({ + avatarSize, + comment, + commentNumber, + currentAccountUsername, + fetchPost, + handleDeleteComment, + handleOnEditPress, + handleOnLongPress, + handleOnReplyPress, + handleOnUserPress, + handleOnVotersPress, + isLoggedIn, + isShowComments, + isShowMoreButton, + marginLeft, + voteCount, + mainAuthor = { mainAuthor }, + isHideImage, + showAllComments, + isShowSubComments, + hideManyCommentsButton, +}) => { + const [_isShowSubComments, setIsShowSubComments] = useState(isShowSubComments || false); + const [isPressedShowButton, setIsPressedShowButton] = useState(false); + const intl = useIntl(); + const actionSheet = useRef(null); + const _showSubCommentsToggle = () => { + setIsShowSubComments(!_isShowSubComments); + setIsPressedShowButton(true); }; - render() { - const { - avatarSize, - comment, - commentNumber, - currentAccountUsername, - fetchPost, - handleDeleteComment, - handleOnEditPress, - handleOnLongPress, - handleOnReplyPress, - handleOnUserPress, - handleOnVotersPress, - isLoggedIn, - isShowComments, - isShowMoreButton, - marginLeft, - voteCount, - intl, - mainAuthor = { mainAuthor }, - isHideImage, - } = this.props; - const { isShowSubComments, isPressedShowButton } = this.state; - console.log(commentNumber); - return ( - - - + + + + - - - - {isLoggedIn && ( - - - - handleOnVotersPress && - voteCount > 0 && - handleOnVotersPress(get(comment, 'active_votes')) - } - text={voteCount} - textMarginLeft={20} - textStyle={styles.voteCountText} - /> - handleOnReplyPress && handleOnReplyPress(comment)} - iconType="MaterialIcons" - /> - {currentAccountUsername === comment.author && ( - - handleOnEditPress && handleOnEditPress(comment)} - iconType="MaterialIcons" - /> - {!comment.children && !voteCount && ( - - this.ActionSheet.show()} - iconType="MaterialIcons" - /> - (this.ActionSheet = o)} - options={[ - intl.formatMessage({ id: 'alert.delete' }), - intl.formatMessage({ id: 'alert.cancel' }), - ]} - title={intl.formatMessage({ id: 'alert.delete' })} - destructiveButtonIndex={0} - cancelButtonIndex={1} - onPress={index => { - index === 0 ? handleDeleteComment(comment.permlink) : null; - }} - /> - - )} - - )} - - )} - {isShowMoreButton && ( - - this._showSubCommentsToggle()} - text={!isPressedShowButton ? `${comment.children} more replies` : ''} - /> - - )} - - {isShowSubComments && commentNumber > 0 && ( - 0} - fetchPost={fetchPost} - mainAuthor={mainAuthor} - /> + + {isLoggedIn && ( + + + + handleOnVotersPress && + voteCount > 0 && + handleOnVotersPress(get(comment, 'active_votes')) + } + text={voteCount} + textMarginLeft={20} + textStyle={styles.voteCountText} + /> + handleOnReplyPress && handleOnReplyPress(comment)} + iconType="MaterialIcons" + /> + {currentAccountUsername === comment.author && ( + + handleOnEditPress && handleOnEditPress(comment)} + iconType="MaterialIcons" + /> + {!comment.children && !voteCount && ( + + actionSheet.current.show()} + iconType="MaterialIcons" + /> + { + index === 0 ? handleDeleteComment(comment.permlink) : null; + }} + /> + + )} + + )} + + )} + {!showAllComments && isShowMoreButton && ( + + _showSubCommentsToggle()} + text={!isPressedShowButton ? `${comment.children} more replies` : ''} + /> + )} + {_isShowSubComments && commentNumber > 0 && ( + 0} + fetchPost={fetchPost} + hideManyCommentsButton={hideManyCommentsButton} + mainAuthor={mainAuthor} + /> + )} - - ); - } -} + + + ); +}; -export default injectIntl(CommentView); +export default CommentView; diff --git a/src/components/comments/container/commentsContainer.js b/src/components/comments/container/commentsContainer.js index 5f52f9e4b..6441e3cfe 100644 --- a/src/components/comments/container/commentsContainer.js +++ b/src/components/comments/container/commentsContainer.js @@ -262,12 +262,15 @@ class CommentsContainer extends Component { isHideImage, isShowSubComments, hasManyComments, + showAllComments, + hideManyCommentsButton, } = this.props; return ( ); } diff --git a/src/components/comments/view/commentStyles.js b/src/components/comments/view/commentStyles.js index d5b8fb30c..ac9ba63d8 100644 --- a/src/components/comments/view/commentStyles.js +++ b/src/components/comments/view/commentStyles.js @@ -4,4 +4,18 @@ export default EStyleSheet.create({ list: { marginBottom: 20, }, + moreRepliesButtonWrapper: { + backgroundColor: '$iconColor', + height: 18, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 20, + marginTop: 15, + minWidth: 40, + maxWidth: 170, + }, + moreRepliesText: { + color: '$white', + fontSize: 10, + }, }); diff --git a/src/components/comments/view/commentsView.js b/src/components/comments/view/commentsView.js index 8a1eac6a7..733e5d89a 100644 --- a/src/components/comments/view/commentsView.js +++ b/src/components/comments/view/commentsView.js @@ -1,118 +1,122 @@ -import React, { Component, Fragment } from 'react'; +import React, { useState, Fragment, useRef } from 'react'; import { FlatList } from 'react-native'; import ActionSheet from 'react-native-actionsheet'; import get from 'lodash/get'; -import { injectIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; +import { navigate } from '../../../navigation/service'; // Components -// eslint-disable-next-line import/no-cycle -import { Comment } from '../../comment'; +import { Comment, TextButton } from '../..'; + +// Constants +import ROUTES from '../../../constants/routeNames'; // Styles import styles from './commentStyles'; -class CommentsView extends Component { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const CommentsView = ({ + avatarSize, + commentCount, + commentNumber, + comments, + currentAccountUsername, + fetchPost, + handleDeleteComment, + handleOnEditPress, + handleOnPressCommentMenu, + handleOnReplyPress, + handleOnUserPress, + handleOnVotersPress, + hasManyComments, + isHideImage, + isLoggedIn, + isOwnProfile, + isShowSubComments, + mainAuthor, + marginLeft, + isShowMoreButton, + showAllComments, + hideManyCommentsButton, +}) => { + const [selectedComment, setSelectedComment] = useState(null); + const intl = useIntl(); + const commentMenu = useRef(); - constructor(props) { - super(props); - this.state = { - selectedComment: null, - }; - this.commentMenu = React.createRef(); - } + const _keyExtractor = item => get(item, 'permlink'); - // Component Life Cycles - - // Component Functions - - _keyExtractor = item => item.permlink; - - _openCommentMenu = item => { - this.setState({ selectedComment: item }); - this.commentMenu.current.show(); + const _openCommentMenu = item => { + setSelectedComment(item); + commentMenu.current.show(); }; - render() { - const { - mainAuthor, - avatarSize, - commentCount, - commentNumber, - comments, - currentAccountUsername, - fetchPost, - handleOnEditPress, - handleOnReplyPress, - handleOnUserPress, - isLoggedIn, - isShowSubComments, - marginLeft, - handleDeleteComment, - handleOnPressCommentMenu, - handleOnVotersPress, - intl, - isOwnProfile, - isHideImage, - hasManyComments, - } = this.props; - const { selectedComment } = this.state; + const _readMoreComments = () => { + navigate({ + routeName: ROUTES.SCREENS.COMMENTS, + params: { comments, fetchPost, handleOnVotersPress }, + }); + }; - const menuItems = isOwnProfile - ? [ - intl.formatMessage({ id: 'post.copy_link' }), - intl.formatMessage({ id: 'post.open_thread' }), - intl.formatMessage({ id: 'alert.cancel' }), - ] - : [intl.formatMessage({ id: 'post.copy_link' }), intl.formatMessage({ id: 'alert.cancel' })]; - - // TODO: - if (hasManyComments) return null; + const menuItems = isOwnProfile + ? [ + intl.formatMessage({ id: 'post.copy_link' }), + intl.formatMessage({ id: 'post.open_thread' }), + intl.formatMessage({ id: 'alert.cancel' }), + ] + : [intl.formatMessage({ id: 'post.copy_link' }), intl.formatMessage({ id: 'alert.cancel' })]; + if (!hideManyCommentsButton && hasManyComments) { return ( - - ( - 0} - voteCount={get(item, 'vote_count')} - isShowSubComments={isShowSubComments} - key={item.permlink} - marginLeft={marginLeft} - handleOnLongPress={() => this._openCommentMenu(item)} - /> - )} - /> - handleOnPressCommentMenu(index, selectedComment)} - /> - + _readMoreComments()} + text="Read more comments" + /> ); } -} -export default injectIntl(CommentsView); + return ( + + ( + 0} + showAllComments={showAllComments} + voteCount={get(item, 'vote_count')} + isShowSubComments={isShowSubComments} + key={get(item, 'permlink')} + marginLeft={marginLeft} + handleOnLongPress={() => _openCommentMenu(item)} + /> + )} + /> + handleOnPressCommentMenu(index, selectedComment)} + /> + + ); +}; + +export default CommentsView; diff --git a/src/components/profile/profileView.js b/src/components/profile/profileView.js index b61780202..925edca85 100644 --- a/src/components/profile/profileView.js +++ b/src/components/profile/profileView.js @@ -221,25 +221,29 @@ class ProfileView extends PureComponent { /> )} - - {selectedUser ? ( - this.setState({ estimatedWalletValue: value })} - selectedUser={selectedUser} - handleOnScroll={isSummaryOpen ? this._handleOnScroll : null} - /> - ) : ( - - )} - + {!isOwnProfile && ( + + {selectedUser ? ( + + this.setState({ estimatedWalletValue: value }) + } + selectedUser={selectedUser} + handleOnScroll={isSummaryOpen ? this._handleOnScroll : null} + /> + ) : ( + + )} + + )} diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 12c28a4cb..d4ed0c308 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -413,5 +413,8 @@ "current_time": "Current time;", "information": "We noticed that your device has incorrect date or time. Please fix Date & Time or Set Automatically and try again." } + }, + "comments": { + "title": "Comments" } -} \ No newline at end of file +} diff --git a/src/constants/routeNames.js b/src/constants/routeNames.js index fea17e1ec..aaeb50b96 100644 --- a/src/constants/routeNames.js +++ b/src/constants/routeNames.js @@ -24,6 +24,7 @@ export default { STEEM_CONNECT: `SteemConnect${SCREEN_SUFFIX}`, TRANSFER: `Transfer${SCREEN_SUFFIX}`, VOTERS: `Voters${SCREEN_SUFFIX}`, + COMMENTS: `Comments${SCREEN_SUFFIX}`, }, DRAWER: { MAIN: `Main${DRAWER_SUFFIX}`, diff --git a/src/navigation/baseNavigator.js b/src/navigation/baseNavigator.js index c6dd7f266..7ef86f165 100644 --- a/src/navigation/baseNavigator.js +++ b/src/navigation/baseNavigator.js @@ -58,7 +58,12 @@ const BaseNavigator = createBottomTabNavigator( screen: Profile, navigationOptions: () => ({ tabBarIcon: ({ tintColor }) => ( - + ), }), }, diff --git a/src/navigation/routes.js b/src/navigation/routes.js index 40c83dd5e..7773713a2 100644 --- a/src/navigation/routes.js +++ b/src/navigation/routes.js @@ -24,6 +24,7 @@ import { SteemConnect, Transfer, Voters, + Comments, } from '../screens'; // Components @@ -138,6 +139,12 @@ const stackNavigator = createStackNavigator( header: () => null, }, }, + [ROUTES.SCREENS.COMMENTS]: { + screen: Comments, + navigationOptions: { + header: () => null, + }, + }, }, { headerMode: 'none', diff --git a/src/screens/comments/screen/commentsScreen.js b/src/screens/comments/screen/commentsScreen.js new file mode 100644 index 000000000..3ee41e527 --- /dev/null +++ b/src/screens/comments/screen/commentsScreen.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { View } from 'react-native'; +import { useIntl } from 'react-intl'; + +import { BasicHeader, Comments } from '../../../components'; + +// Styles +import globalStyles from '../../../globalStyles'; + +const CommentsScreen = ({ navigation }) => { + const intl = useIntl(); + const comments = navigation.getParam('comments', [{}])[0]; + + return ( + + + + + + + ); +}; + +export { CommentsScreen as Comments }; diff --git a/src/screens/index.js b/src/screens/index.js index d81fa0503..6e01317c2 100755 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -1,17 +1,18 @@ import { Bookmarks } from './bookmarks'; +import { Comments } from './comments/screen/commentsScreen'; import { Drafts } from './drafts'; import { Editor } from './editor'; -import { Follows } from './follows'; import { Feed } from './feed'; +import { Follows } from './follows'; import { Launch } from './launch'; import { Login } from './login'; import { Notification } from './notification'; import { PinCode } from './pinCode'; -import { Wallet } from './wallet'; import { Post } from './post'; import { SearchResult } from './searchResult'; import { Settings } from './settings'; import { SpinGame } from './spinGame/screen/spinGameScreen'; +import { Wallet } from './wallet'; import Boost from './boost/screen/boostScreen'; import Profile from './profile/screen/profileScreen'; import ProfileEdit from './profileEdit/screen/profileEditScreen'; @@ -24,15 +25,15 @@ import Voters from './voters'; export { Bookmarks, Boost, + Comments, Drafts, Editor, - Follows, Feed, + Follows, Launch, Login, Notification, PinCode, - Wallet, Post, Profile, ProfileEdit, @@ -44,4 +45,5 @@ export { SteemConnect, Transfer, Voters, + Wallet, };