ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-13 18:22:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

created show more comments button

Browse Source
This commit is contained in:
u-e 2019-01-17 18:43:58 +03:00
commit 3fe58c7d83
14 changed files with 245 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/comment/index.js Normal file
View File

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

30
src/components/comment/view/commentStyles.js Normal file
View File

@ -0,0 +1,30 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
leftIcon: {
color: '$iconColor',
},
leftButton: {
marginLeft: 10,
},
rightButton: {
flexGrow: 1,
alignSelf: 'flex-end',
position: 'absolute',
right: 10,
backgroundColor: '$iconColor',
height: 15,
width: 25,
},
moreIcon: {
color: '$white',
marginTop: -1,
},
bodyWrapper: {
marginTop: -10,
},
footerWrapper: {
flex: 1,
flexDirection: 'row',
},
});

121
src/components/comment/view/commentView.js Normal file
View File

@ -0,0 +1,121 @@
import React, { PureComponent, Fragment } from 'react';
import { View } from 'react-native';
import { getTimeFromNow } from '../../../utils/time';
// Constants
// Components
import { PostBody, PostHeaderDescription } from '../../postElements';
import { Upvote } from '../../upvote';
import { IconButton } from '../../iconButton';
import { Comments } from '../../comments';
// Styles
import styles from './commentStyles';
class CommentView extends PureComponent {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
this.state = {
isShowSubComments: props.isShowSubComments || false,
};
}
// Component Life Cycles
// Component Functions
_showSubCommentsToggle = () => {
const { isShowSubComments } = this.state;
this.setState({ isShowSubComments: !isShowSubComments });
};
render() {
const {
avatarSize,
currentAccountUsername,
handleOnEditPress,
handleOnReplyPress,
handleOnUserPress,
isLoggedIn,
marginLeft,
isShowMoreButton,
comment,
commentNumber,
fetchPost,
isShowComments,
} = this.props;
const { isShowSubComments } = this.state;
return (
<View style={{ marginLeft: marginLeft || 29 }}>
<PostHeaderDescription
key={comment.permlink}
date={getTimeFromNow(comment.created)}
name={comment.author}
reputation={comment.author_reputation}
size={avatarSize || 24}
/>
<View style={[{ marginLeft: marginLeft || 29 }, styles.bodyWrapper]}>
<PostBody isComment handleOnUserPress={handleOnUserPress} body={comment.body} />
<View style={styles.footerWrapper}>
{isLoggedIn && (
<Fragment>
<Upvote isShowPayoutValue content={comment} />
<IconButton
size={18}
iconStyle={styles.leftIcon}
style={styles.leftButton}
name="reply"
onPress={() => handleOnReplyPress && handleOnReplyPress(comment)}
iconType="MaterialIcons"
/>
{currentAccountUsername === comment.author && (
<IconButton
size={18}
iconStyle={styles.leftIcon}
style={styles.leftButton}
name="create"
onPress={() => handleOnEditPress && handleOnEditPress(comment)}
iconType="MaterialIcons"
/>
)}
</Fragment>
)}
{isShowMoreButton && (
<IconButton
size={18}
iconStyle={styles.moreIcon}
style={styles.rightButton}
name={isShowSubComments ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
onPress={() => this._showSubCommentsToggle()}
iconType="MaterialIcons"
/>
)}
</View>
{isShowSubComments && commentNumber > 0 && (
<Comments
isShowComments={isShowComments}
commentNumber={commentNumber && commentNumber * 2}
marginLeft={20}
isShowSubComments={isShowSubComments}
avatarSize={avatarSize || 16}
author={comment.author}
permlink={comment.permlink}
commentCount={comment.children}
isShowMoreButton={false}
fetchPost={fetchPost}
/>
)}
</View>
</View>
);
}
}
export default CommentView;

62
src/components/comments/container/commentsContainer.js
View File

@ -27,8 +27,6 @@ class CommentsContainer extends Component {
super(props);
this.state = {
comments: [],
isShowComments: false,
isRenderRequire: true,
};
}
@ -83,23 +81,8 @@ class CommentsContainer extends Component {
});
};
_showComentsToggle = (permlink) => {
const { isShowComments, selectedPermlink } = this.state;
const { selectedPermlink: _selectedPermlink } = this.props;
if (_selectedPermlink !== selectedPermlink) {
this.setState({ isShowComments: !!isShowComments, selectedPermlink: permlink });
} else {
this.setState({ isShowComments: !isShowComments, selectedPermlink: permlink });
}
this.setState({ isRenderRequire: false }, () => this.setState({ isRenderRequire: true }));
};
render() {
const {
comments, isShowComments, isRenderRequire, selectedPermlink,
} = this.state;
const { comments: _comments, selectedPermlink } = this.state;
const {
isLoggedIn,
commentCount,
@ -107,31 +90,30 @@ class CommentsContainer extends Component {
permlink,
currentAccount,
commentNumber,
comments,
fetchPost,
isShowMoreButton,
selectedPermlink: _selectedPermlink,
} = this.props;
if (isRenderRequire) {
return (
<CommentsView
key={permlink}
selectedPermlink={_selectedPermlink || selectedPermlink}
isShowComments={isShowComments}
showComentsToggle={this._showComentsToggle}
author={author}
commentNumber={commentNumber || 1}
commentCount={commentCount}
comments={comments}
currentAccountUsername={currentAccount.name}
handleOnEditPress={this._handleOnEditPress}
handleOnReplyPress={this._handleOnReplyPress}
isLoggedIn={isLoggedIn}
permlink={permlink}
fetchPost={fetchPost}
{...this.props}
/>
);
}
return null;
return (
<CommentsView
key={permlink}
selectedPermlink={_selectedPermlink || selectedPermlink}
author={author}
isShowMoreButton={isShowMoreButton}
commentNumber={commentNumber || 1}
commentCount={commentCount}
comments={_comments || comments}
currentAccountUsername={currentAccount.name}
handleOnEditPress={this._handleOnEditPress}
handleOnReplyPress={this._handleOnReplyPress}
isLoggedIn={isLoggedIn}
permlink={permlink}
fetchPost={fetchPost}
{...this.props}
/>
);
}
}

130
src/components/comments/view/commentsView.js
View File

@ -1,15 +1,8 @@
import React, { PureComponent, Fragment } from 'react';
import React, { PureComponent } from 'react';
import { View, FlatList } from 'react-native';
import { injectIntl } from 'react-intl';
import { getTimeFromNow } from '../../../utils/time';
// Constants
// Components
import Comments from '../container/commentsContainer';
import { PostBody, PostHeaderDescription } from '../../postElements';
import { Upvote } from '../../upvote';
import { IconButton } from '../../iconButton';
import { Comment } from '../../comment';
// Styles
// import styles from './commentStyles';
@ -42,106 +35,39 @@ class CommentsView extends PureComponent {
handleOnReplyPress,
handleOnUserPress,
isLoggedIn,
isProfilePreview,
marginLeft,
isShowSubComments,
fetchPost,
intl,
showComentsToggle,
isShowComments,
parentPermlink,
selectedPermlink,
commentCount,
} = this.props;
// if (isShowComments) alert(isShowComments);
return (
<View>
{!!comments && (
<FlatList
data={comments}
keyExtractor={this._keyExtractor}
renderItem={({ item, index }) => (
<View key={index}>
<PostHeaderDescription
key={item.permlink}
// date={intl.formatRelative(item.created)}
date={getTimeFromNow(item.created)}
name={item.author}
reputation={item.author_reputation}
size={avatarSize || 24}
/>
<View
style={{
marginLeft: marginLeft || 29,
flexDirection: 'column',
marginTop: -10,
}}
>
<PostBody isComment handleOnUserPress={handleOnUserPress} body={item.body} />
<View style={{ flexDirection: 'row' }}>
{isLoggedIn && (
<Fragment>
<Upvote isShowPayoutValue content={item} />
<IconButton
size={18}
iconStyle={{ color: '#c1c5c7' }}
style={{ marginLeft: 10 }}
name="reply"
onPress={() => handleOnReplyPress && handleOnReplyPress(item)}
iconType="MaterialIcons"
/>
{currentAccountUsername === item.author && (
<IconButton
size={18}
iconStyle={{ color: '#c1c5c7' }}
style={{ marginLeft: 10 }}
name="create"
onPress={() => handleOnEditPress && handleOnEditPress(item)}
iconType="MaterialIcons"
/>
)}
{item.children > 0 && commentNumber === 1 && (
<IconButton
size={18}
iconStyle={{ color: '#c1c5c7' }}
style={{ marginLeft: 10 }}
name="star"
onPress={() => showComentsToggle(item.permlink)}
iconType="MaterialIcons"
/>
)}
</Fragment>
)}
</View>
</View>
{!isProfilePreview
&& item.children > 0
&& (isShowComments
&& (selectedPermlink === item.permlink
|| selectedPermlink === item.parent_permlink) && (
<View style={{ marginLeft: marginLeft || 29 }}>
<Comments
key={item.permlink}
selectedPermlink={selectedPermlink}
parentPermlink={item.parent_permlink}
isShowComments={isShowComments}
commentNumber={commentNumber && commentNumber * 2}
marginLeft={20}
avatarSize={avatarSize || 16}
author={item.author}
permlink={item.permlink}
commentCount={item.children}
fetchPost={fetchPost}
/>
</View>
))}
</View>
)}
/>
<FlatList
data={comments}
keyExtractor={this._keyExtractor}
renderItem={({ item, index }) => (
<View key={index}>
<Comment
isShowMoreButton={commentNumber === 1 && item.children > 0}
comment={item}
marginLeft={marginLeft}
commentNumber={commentNumber}
fetchPost={fetchPost}
commentCount={commentCount || item.children}
isShowSubComments={isShowSubComments}
avatarSize={avatarSize}
currentAccountUsername={currentAccountUsername}
handleOnReplyPress={handleOnReplyPress}
handleOnEditPress={handleOnEditPress}
handleOnUserPress={handleOnUserPress}
isLoggedIn={isLoggedIn}
showComentsToggle={this._showComentsToggle}
/>
</View>
)}
</View>
/>
);
}
}
export default injectIntl(CommentsView);
export default CommentsView;

9
src/components/dropdownButton/view/dropdownButtonStyles.js
View File

@ -8,11 +8,6 @@ export default EStyleSheet.create({
alignSelf: 'flex-start',
height: 35,
},
// dropdownText: {
// fontSize: 9,
// color: '$primaryDarkGray',
// marginLeft: 25,
// },
dropdownIcon: {
fontSize: 22,
color: '$primaryDarkText',
@ -41,10 +36,10 @@ export default EStyleSheet.create({
fontSize: 10,
color: '$primaryDarkText',
padding: 5,
borderColor: '#e7e7e7',
borderColor: '$borderColor',
},
dropdownTextHighlight: {
backgroundColor: '#387be5',
backgroundColor: '$primaryBlue',
width: '$deviceWidth / 3',
},
button: {

5
src/components/editorElements/tagArea/view/tagAreaView.js
View File

@ -79,6 +79,11 @@ export default class TagAreaView extends Component {
if (handleTagChanged) {
handleTagChanged(chips.filter((_, _i) => _i !== i));
}
// Restart chips
if (chips && chips.length === 1 && i === 0) {
this.setState({ chips: [' '] });
}
};
render() {

5
src/components/settingsItem/view/settingsItemStyles.js
View File

@ -26,8 +26,8 @@ export default EStyleSheet.create({
},
dropdownStyle: {
marginTop: 15,
minWidth: 172,
width: 172,
minWidth: 192,
width: 192,
},
dropdownButtonStyle: {
backgroundColor: '$primaryGray',
@ -38,6 +38,7 @@ export default EStyleSheet.create({
},
dropdown: {
flexGrow: 1,
width: 150,
},
textStyle: {
color: '$primaryBlue',

14
src/screens/editor/container/editorContainer.js
View File

@ -76,17 +76,17 @@ class EditorContainer extends Component {
}
if (navigationParams.post) {
post = navigationParams.post;
({ post } = navigationParams);
this.setState({ post });
}
if (navigationParams.isReply) {
isReply = navigationParams.isReply;
({ isReply } = navigationParams);
this.setState({ isReply });
}
if (navigationParams.isEdit) {
isEdit = navigationParams.isEdit;
({ isEdit } = navigationParams);
this.setState(
{
isEdit,
@ -117,7 +117,7 @@ class EditorContainer extends Component {
draftPost: { body: result.body, title: result.title, tags: result.tags.split(',') },
});
})
.catch((error) => {
.catch(() => {
// alert(error);
});
};
@ -361,7 +361,7 @@ class EditorContainer extends Component {
options,
0,
)
.then((result) => {
.then(() => {
this._handleSubmitSuccess();
})
.catch((error) => {
@ -403,7 +403,7 @@ class EditorContainer extends Component {
newBody,
jsonMeta,
)
.then((result) => {
.then(() => {
this._handleSubmitSuccess();
})
.catch((error) => {
@ -419,7 +419,7 @@ class EditorContainer extends Component {
intl.formatMessage({
id: 'alert.fail',
}),
error,
error.message || error.toString(),
);
this.setState({ isPostSending: false });
};

1
src/screens/profile/container/profileContainer.js
View File

@ -344,6 +344,7 @@ class ProfileContainer extends Component {
selectedQuickProfile={selectedQuickProfile}
selectedUser={user}
username={username}
getReplies={() => this._getReplies(username)}
/>
</Fragment>
);

3
src/screens/profile/screen/profileScreen.js
View File

@ -73,6 +73,7 @@ class ProfileScreen extends PureComponent {
selectedQuickProfile,
selectedUser,
username,
getReplies,
} = this.props;
const { isSummaryOpen, collapsibleMoreHeight } = this.state;
@ -182,7 +183,7 @@ class ProfileScreen extends PureComponent {
>
{comments && comments.length > 0 ? (
<ScrollView>
<Comments isProfilePreview comments={comments} />
<Comments isProfilePreview comments={comments} fetchPost={getReplies} />
</ScrollView>
) : (
<NoPost

1
src/screens/settings/container/settingsContainer.js
View File

@ -154,6 +154,7 @@ class SettingsContainer extends Component {
render() {
const { serverList } = this.state;
return (
<SettingsScreen
serverList={serverList}

7
src/screens/settings/screen/settingsScreen.js
View File

@ -2,6 +2,9 @@ import React, { PureComponent } from 'react';
import { ScrollView, View } from 'react-native';
import { injectIntl } from 'react-intl';
// Utils
import { groomingServerName } from '../../../utils/settings';
// Constants
import LANGUAGE, { VALUE as LANGUAGE_VALUE } from '../../../constants/options/language';
import CURRENCY, { VALUE as CURRENCY_VALUE } from '../../../constants/options/currency';
@ -75,9 +78,9 @@ class SettingsScreen extends PureComponent {
})}
type="dropdown"
actionType="api"
options={serverList}
options={serverList.map(serverName => groomingServerName(serverName))}
selectedOptionIndex={serverList.indexOf(selectedApi)}
defaultText={selectedApi}
defaultText={groomingServerName(selectedApi)}
handleOnChange={handleOnChange}
/>
<SettingsItem

14
src/utils/settings.js Normal file
View File

@ -0,0 +1,14 @@
export const groomingServerName = (serverName, prefix1) => {
const PREFIX1 = prefix1 || 'https://';
const PREFIX2 = 'https://';
if (!serverName) return null;
if (serverName.indexOf(PREFIX1) === 0) {
return serverName.substr(PREFIX1.length);
}
if (serverName.indexOf(PREFIX2) === 0) {
return serverName.substr(PREFIX2.length);
}
return serverName;
};