post pull down to refresh, commentsContainer hooks

This commit is contained in:
feruz 2020-01-09 07:51:47 +02:00
parent 9cbc762b59
commit 44335f585a
3 changed files with 94 additions and 129 deletions
src
components
comments/container
postView/view
screens/application/container

View File

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { withNavigation } from 'react-navigation';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
@ -17,31 +17,49 @@ import ROUTES from '../../../constants/routeNames';
// Component
import CommentsView from '../view/commentsView';
/*
* Props Name Description Value
*@props --> props name here description here Value Type Here
*
*/
const CommentsContainer = ({
author,
permlink,
selectedFilter,
currentAccount: { name },
isOwnProfile,
fetchPost,
navigation,
content,
currentAccount,
pinCode,
comments,
dispatch,
intl,
commentCount,
isLoggedIn,
commentNumber,
isShowMoreButton,
mainAuthor,
selectedPermlink: _selectedPermlink,
isHideImage,
isShowSubComments,
hasManyComments,
showAllComments,
hideManyCommentsButton,
}) => {
const [lcomments, setLComments] = useState([]);
const [selectedPermlink, setSelectedPermlink] = useState('');
class CommentsContainer extends Component {
constructor(props) {
super(props);
this.state = {
comments: [],
};
}
useEffect(() => {
_getComments();
}, []);
// Component Life Cycle Functions
componentDidMount() {
this._getComments();
}
useEffect(() => {
_getComments();
const shortedComments = _shortComments(selectedFilter);
setLComments(shortedComments);
}, [commentCount, selectedFilter]);
// Component Functions
_shortComments = (sortOrder, comments) => {
const { comments: parent } = this.state;
const sortedComments = comments || parent;
const _shortComments = (sortOrder, _comments) => {
const sortedComments = _comments || lcomments;
const allPayout = c =>
parseFloat(get(c, 'pending_payout_value').split(' ')[0]) +
@ -122,39 +140,24 @@ class CommentsContainer extends Component {
return sortedComments;
};
_getComments = async () => {
const {
author,
permlink,
selectedFilter,
currentAccount: { name },
isOwnProfile,
fetchPost,
} = this.props;
const _getComments = async () => {
if (isOwnProfile) {
fetchPost();
} else if (author && permlink) {
await getComments(author, permlink, name)
.then(comments => {
.then(__comments => {
if (selectedFilter) {
const sortComments = this._shortComments(selectedFilter, comments);
this.setState({
comments: sortComments,
});
const sortComments = _shortComments(selectedFilter, __comments);
setLComments(sortComments);
} else {
this.setState({
comments,
});
setLComments(__comments);
}
})
.catch(() => {});
}
};
_handleOnReplyPress = item => {
const { navigation, fetchPost } = this.props;
const _handleOnReplyPress = item => {
navigation.navigate({
routeName: ROUTES.SCREENS.EDITOR,
params: {
@ -165,9 +168,7 @@ class CommentsContainer extends Component {
});
};
_handleOnVotersPress = activeVotes => {
const { navigation, content } = this.props;
const _handleOnVotersPress = activeVotes => {
navigation.navigate({
routeName: ROUTES.SCREENS.VOTERS,
params: {
@ -177,38 +178,32 @@ class CommentsContainer extends Component {
});
};
_handleOnEditPress = item => {
const { navigation } = this.props;
const _handleOnEditPress = item => {
navigation.navigate({
routeName: ROUTES.SCREENS.EDITOR,
params: {
isEdit: true,
isReply: true,
post: item,
fetchPost: this._getComments,
fetchPost: _getComments,
},
});
};
_handleDeleteComment = permlink => {
const { currentAccount, pinCode, comments } = this.props;
const { comments: _comments } = this.state;
const _handleDeleteComment = _permlink => {
let filteredComments;
deleteComment(currentAccount, pinCode, permlink).then(() => {
if (_comments.length > 0) {
filteredComments = _comments.filter(item => item.permlink !== permlink);
deleteComment(currentAccount, pinCode, _permlink).then(() => {
if (lcomments.length > 0) {
filteredComments = lcomments.filter(item => item.permlink !== _permlink);
} else {
filteredComments = comments.filter(item => item.permlink !== permlink);
filteredComments = comments.filter(item => item.permlink !== _permlink);
}
this.setState({ comments: filteredComments });
setLComments(filteredComments);
});
};
_handleOnPressCommentMenu = (index, selectedComment) => {
const { dispatch, intl, navigation, isOwnProfile } = this.props;
const _handleOnPressCommentMenu = (index, selectedComment) => {
if (index === 0) {
writeToClipboard(`https://esteem.app${get(selectedComment, 'url')}`).then(() => {
dispatch(
@ -231,70 +226,34 @@ class CommentsContainer extends Component {
}
};
UNSAFE_componentWillReceiveProps(nextProps) {
const { commentCount, selectedFilter } = this.props;
if (nextProps.commentCount > commentCount) {
this._getComments();
}
if (selectedFilter !== get(nextProps, 'selectedFilter') && get(nextProps, 'selectedFilter')) {
const shortedComments = this._shortComments(get(nextProps, 'selectedFilter'));
this.setState({ comments: shortedComments });
}
}
render() {
const { comments: _comments, selectedPermlink } = this.state;
const {
isLoggedIn,
commentCount,
author,
currentAccount,
commentNumber,
comments,
fetchPost,
isShowMoreButton,
selectedFilter,
mainAuthor,
selectedPermlink: _selectedPermlink,
isOwnProfile,
isHideImage,
isShowSubComments,
hasManyComments,
showAllComments,
hideManyCommentsButton,
} = this.props;
return (
<CommentsView
key={selectedFilter}
hasManyComments={hasManyComments}
hideManyCommentsButton={hideManyCommentsButton}
selectedFilter={selectedFilter}
selectedPermlink={_selectedPermlink || selectedPermlink}
author={author}
mainAuthor={mainAuthor}
isShowMoreButton={isShowMoreButton}
commentNumber={commentNumber || 1}
commentCount={commentCount}
comments={_comments.length > 0 ? _comments : comments}
currentAccountUsername={currentAccount.name}
handleOnEditPress={this._handleOnEditPress}
handleOnReplyPress={this._handleOnReplyPress}
isLoggedIn={isLoggedIn}
fetchPost={fetchPost}
handleDeleteComment={this._handleDeleteComment}
handleOnPressCommentMenu={this._handleOnPressCommentMenu}
isOwnProfile={isOwnProfile}
isHideImage={isHideImage}
handleOnVotersPress={this._handleOnVotersPress}
isShowSubComments={isShowSubComments}
showAllComments={showAllComments}
/>
);
}
}
return (
<CommentsView
key={selectedFilter}
hasManyComments={hasManyComments}
hideManyCommentsButton={hideManyCommentsButton}
selectedFilter={selectedFilter}
selectedPermlink={_selectedPermlink || selectedPermlink}
author={author}
mainAuthor={mainAuthor}
isShowMoreButton={isShowMoreButton}
commentNumber={commentNumber || 1}
commentCount={commentCount}
comments={lcomments.length > 0 ? lcomments : comments}
currentAccountUsername={currentAccount.name}
handleOnEditPress={_handleOnEditPress}
handleOnReplyPress={_handleOnReplyPress}
isLoggedIn={isLoggedIn}
fetchPost={fetchPost}
handleDeleteComment={_handleDeleteComment}
handleOnPressCommentMenu={_handleOnPressCommentMenu}
isOwnProfile={isOwnProfile}
isHideImage={isHideImage}
handleOnVotersPress={_handleOnVotersPress}
isShowSubComments={isShowSubComments}
showAllComments={showAllComments}
/>
);
};
const mapStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn,

View File

@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState, Fragment } from 'react';
import { View, Text, ScrollView, Dimensions, SafeAreaView } from 'react-native';
import React, { useCallback, useEffect, useRef, useState, Fragment } from 'react';
import { View, Text, ScrollView, Dimensions, SafeAreaView, RefreshControl } from 'react-native';
import { injectIntl } from 'react-intl';
import get from 'lodash/get';
import ActionSheet from 'react-native-actionsheet';
@ -43,6 +43,7 @@ const PostDisplayView = ({
const [scrollHeight, setScrollHeight] = useState(0);
const [isLoadedComments, setIsLoadedComments] = useState(false);
const actionSheet = useRef(null);
const [refreshing, setRefreshing] = useState(false);
// Component Life Cycles
useEffect(() => {
@ -52,6 +53,11 @@ const PostDisplayView = ({
}, []);
// Component Functions
const onRefresh = useCallback(() => {
setRefreshing(true);
fetchPost().then(() => setRefreshing(false));
}, [refreshing]);
const _handleOnScroll = event => {
const { y } = event.nativeEvent.contentOffset;
@ -164,6 +170,7 @@ const PostDisplayView = ({
style={styles.scroll}
onScroll={event => _handleOnScroll(event)}
scrollEventThrottle={16}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
>
{parentPost && <ParentPost post={parentPost} />}

View File

@ -78,11 +78,10 @@ import lightTheme from '../../../themes/lightTheme';
let previousAppState = 'background';
export const setPreviousAppState = () => {
previousAppState = AppState.currentState;
/*const appStateTimeout = setTimeout(() => {
console.log('current appstate timeout', AppState.currentState);
const appStateTimeout = setTimeout(() => {
previousAppState = AppState.currentState;
clearTimeout(appStateTimeout);
}, 2000);*/
}, 2000);
};
class ApplicationContainer extends Component {