Fixed comment issues

This commit is contained in:
Mustafa Buyukcelebi 2019-06-09 20:14:33 +03:00
parent 2204a9fde0
commit 326257bc40
8 changed files with 218 additions and 147 deletions

View File

@ -1,5 +1,5 @@
import React, { PureComponent, Fragment } from 'react';
import { View, Text } from 'react-native';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import ActionSheet from 'react-native-actionsheet';
import { injectIntl } from 'react-intl';
@ -48,6 +48,7 @@ class CommentView extends PureComponent {
fetchPost,
handleDeleteComment,
handleOnEditPress,
handleOnLongPress,
handleOnReplyPress,
handleOnUserPress,
isLoggedIn,
@ -56,12 +57,12 @@ class CommentView extends PureComponent {
marginLeft,
voteCount,
intl,
author,
mainAuthor = { mainAuthor },
} = this.props;
const { isShowSubComments, isPressedShowButton } = this.state;
return (
<TouchableWithoutFeedback onLongPress={handleOnLongPress}>
<View>
<PostHeaderDescription
key={comment.permlink}
@ -73,7 +74,12 @@ class CommentView extends PureComponent {
isShowOwnerIndicator={mainAuthor === comment.author}
/>
<View style={[{ marginLeft: marginLeft || 29 }, styles.bodyWrapper]}>
<PostBody isComment handleOnUserPress={handleOnUserPress} body={comment.body} />
<PostBody
isComment
handleOnUserPress={handleOnUserPress}
body={comment.body}
textSelectable={false}
/>
<View style={styles.footerWrapper}>
{isLoggedIn && (
<Fragment>
@ -165,6 +171,7 @@ class CommentView extends PureComponent {
)}
</View>
</View>
</TouchableWithoutFeedback>
);
}
}

View File

@ -1,18 +1,22 @@
import React, { Component } from 'react';
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import get from 'lodash/get';
import { getComments, deleteComment } from '../../../providers/steem/dsteem';
// Services and Actions
import { writeToClipboard } from '../../../utils/clipboard';
import { toastNotification } from '../../../redux/actions/uiAction';
// Middleware
// Constants
import { default as ROUTES } from '../../../constants/routeNames';
import ROUTES from '../../../constants/routeNames';
// Component
import { CommentsView } from '..';
import CommentsView from '../view/commentsView';
/*
* Props Name Description Value
@ -163,6 +167,27 @@ class CommentsContainer extends Component {
});
};
_handleCommentCopyAction = (index, selectedComment) => {
const { dispatch, intl } = this.props;
switch (index) {
case 0:
writeToClipboard(`https://steemit.com${get(selectedComment, 'url')}`).then(() => {
dispatch(
toastNotification(
intl.formatMessage({
id: 'alert.copied',
}),
),
);
});
break;
default:
break;
}
};
render() {
const { comments: _comments, selectedPermlink } = this.state;
const {
@ -196,6 +221,7 @@ class CommentsContainer extends Component {
isLoggedIn={isLoggedIn}
fetchPost={fetchPost}
handleDeleteComment={this._handleDeleteComment}
handleCommentCopyAction={this._handleCommentCopyAction}
{...this.props}
/>
);
@ -208,4 +234,4 @@ const mapStateToProps = state => ({
pinCode: state.account.pin,
});
export default withNavigation(connect(mapStateToProps)(CommentsContainer));
export default withNavigation(connect(mapStateToProps)(injectIntl(CommentsContainer)));

View File

@ -1,7 +1,11 @@
import React, { PureComponent } from 'react';
import React, { PureComponent, Fragment } from 'react';
import { FlatList } from 'react-native';
import ActionSheet from 'react-native-actionsheet';
import get from 'lodash/get';
import { injectIntl } from 'react-intl';
// Components
// eslint-disable-next-line import/no-cycle
import { Comment } from '../../comment';
// Styles
@ -15,7 +19,10 @@ class CommentsView extends PureComponent {
constructor(props) {
super(props);
this.state = {};
this.state = {
selectedComment: null,
};
this.commentMenu = React.createRef();
}
// Component Life Cycles
@ -24,6 +31,11 @@ class CommentsView extends PureComponent {
_keyExtractor = item => item.permlink;
_openCommentMenu = item => {
this.setState({ selectedComment: item });
this.commentMenu.current.show();
};
render() {
const {
mainAuthor,
@ -40,9 +52,13 @@ class CommentsView extends PureComponent {
isShowSubComments,
marginLeft,
handleDeleteComment,
handleCommentCopyAction,
intl,
} = this.props;
const { selectedComment } = this.state;
return (
<Fragment>
<FlatList
data={comments}
keyExtractor={this._keyExtractor}
@ -65,11 +81,27 @@ class CommentsView extends PureComponent {
isShowSubComments={isShowSubComments}
key={item.permlink}
marginLeft={marginLeft}
handleOnLongPress={() => this._openCommentMenu(item)}
/>
)}
/>
<ActionSheet
ref={this.commentMenu}
options={[
intl.formatMessage({
id: 'post.copy_link',
}),
intl.formatMessage({
id: 'alert.cancel',
}),
]}
title={get(selectedComment, 'summary')}
cancelButtonIndex={1}
onPress={index => handleCommentCopyAction(index, selectedComment)}
/>
</Fragment>
);
}
}
export default CommentsView;
export default injectIntl(CommentsView);

View File

@ -120,10 +120,10 @@ class PostCardView extends Component {
<Text style={styles.comment}>{content.vote_count}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.commentButton}>
<View style={styles.commentButton}>
<Icon style={[styles.commentIcon]} iconType="MaterialIcons" name="comment" />
<Text style={styles.comment}>{content.children}</Text>
</TouchableOpacity>
</View>
</View>
</View>
);

View File

@ -1,7 +1,5 @@
import React, { PureComponent, Fragment } from 'react';
import {
Dimensions, Linking, Alert, TouchableOpacity, Text,
} from 'react-native';
import { Dimensions, Linking, Alert, TouchableOpacity, Text } from 'react-native';
import { withNavigation } from 'react-navigation';
import { injectIntl } from 'react-intl';
import FastImage from 'react-native-fast-image';
@ -48,7 +46,7 @@ class PostBody extends PureComponent {
if (!url) return;
const { intl } = this.props;
Linking.canOpenURL(url).then((supported) => {
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
@ -148,7 +146,7 @@ class PostBody extends PureComponent {
};
render() {
const { body, isComment } = this.props;
const { body, isComment, textSelectable = true } = this.props;
const _initialDimensions = isComment
? { width: WIDTH - 50, height: 80 }
: { width: WIDTH, height: 216 };
@ -166,13 +164,21 @@ class PostBody extends PureComponent {
a: (htmlAttribs, children, convertedCSSStyles, passProps) => {
if (passProps.parentWrapper === 'Text') {
return (
<Text key={passProps.key} {...htmlAttribs} onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}>
<Text
key={passProps.key}
{...htmlAttribs}
onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}
>
{children}
</Text>
);
}
return (
<TouchableOpacity key={passProps.key} {...htmlAttribs} onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}>
<TouchableOpacity
key={passProps.key}
{...htmlAttribs}
onPress={() => this._handleOnLinkPress(htmlAttribs['data-href'], htmlAttribs)}
>
{children}
</TouchableOpacity>
);
@ -185,7 +191,7 @@ class PostBody extends PureComponent {
html={body}
onLinkPress={(evt, href, hrefatr) => this._handleOnLinkPress(evt, href, hrefatr)}
containerStyle={isComment ? styles.commentContainer : styles.container}
textSelectable
textSelectable={textSelectable}
tagsStyles={isComment ? { img: { height: 120 } } : styles}
ignoredTags={['script']}
debug={false}

View File

@ -185,8 +185,8 @@ class PostDisplayView extends PureComponent {
<View style={styles.footer}>
<Tags tags={post.json_metadata && post.json_metadata.tags} />
<Text style={styles.footerText}>
Posted by <Text style={styles.footerName}>{author || post.author}</Text>
{' '}
Posted by
<Text style={styles.footerName}>{author || post.author}</Text>
{formatedTime}
</Text>
{/* {isPostEnd && this._getTabBar()} */}

View File

@ -199,7 +199,8 @@
},
"post": {
"reblog_alert": "Are you sure you want to reblog?",
"removed_hint": "The post was removed by"
"removed_hint": "The post was removed by",
"copy_link": "Copy Link"
},
"drafts": {
"title": "Drafts",

View File

@ -1,4 +1,3 @@
/* eslint-disable no-restricted-globals */
import React, { Fragment, Component } from 'react';
import { Text, View, WebView, ScrollView, TouchableOpacity } from 'react-native';
import ActionSheet from 'react-native-actionsheet';