mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-27 15:37:34 +03:00
post pull down to refresh, commentsContainer hooks
This commit is contained in:
parent
9cbc762b59
commit
44335f585a
src
components
screens/application/container
@ -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,
|
||||
|
@ -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} />}
|
||||
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user