diff --git a/src/components/posts/container/postsContainer.js b/src/components/posts/container/postsContainer.js index d17b68296..6a7da4a06 100644 --- a/src/components/posts/container/postsContainer.js +++ b/src/components/posts/container/postsContainer.js @@ -7,6 +7,7 @@ import { PostCardPlaceHolder } from '../../basicUIElements'; // Actions import { isCollapsePostButton } from '../../../redux/actions/uiAction'; +import { setFeedPosts } from '../../../redux/actions/postsAction'; /* * Props Name Description Value *@props --> props name here description here Value Type Here @@ -31,8 +32,14 @@ class PostsContainer extends PureComponent { } }; + _setFeedPosts = posts => { + const { dispatch } = this.props; + + dispatch(setFeedPosts(posts)); + }; + render() { - const { currentAccount, isLoginDone, tag } = this.props; + const { currentAccount, isLoginDone, tag, feedPosts, isConnected } = this.props; if (!isLoginDone && !tag) { return ( @@ -47,6 +54,9 @@ class PostsContainer extends PureComponent { ); @@ -60,6 +70,8 @@ const mapStateToProps = state => ({ isLoginDone: state.application.isLoginDone, isCollapsePostButtonOpen: state.ui.isCollapsePostButton, nsfw: state.application.nsfw, + feedPosts: state.posts.feedPosts, + isConnected: state.application.isConnected, }); export default connect(mapStateToProps)(PostsContainer); diff --git a/src/components/posts/view/postsView.js b/src/components/posts/view/postsView.js index 5f33e32a7..6954c06e3 100644 --- a/src/components/posts/view/postsView.js +++ b/src/components/posts/view/postsView.js @@ -22,7 +22,7 @@ class PostsView extends Component { super(props); this.state = { - posts: [], + posts: props.feedPosts, startAuthor: '', startPermlink: '', refreshing: false, @@ -44,14 +44,25 @@ class PostsView extends Component { } componentDidMount() { - this._loadPosts(); + const { isConnected } = this.props; + + if (isConnected) { + this._loadPosts(); + } else { + this.setState({ + refreshing: false, + isPostsLoading: false, + isLoading: false, + }); + } } componentWillReceiveProps(nextProps) { const { currentAccountUsername, changeForceLoadPostState } = this.props; if ( - (currentAccountUsername !== nextProps.currentAccountUsername && + (currentAccountUsername && + currentAccountUsername !== nextProps.currentAccountUsername && nextProps.currentAccountUsername) || nextProps.forceLoadPost ) { @@ -83,8 +94,23 @@ class PostsView extends Component { }; _loadPosts = () => { - const { getFor, tag, currentAccountUsername, pageType, nsfw } = this.props; - const { posts, startAuthor, startPermlink, refreshing, selectedFilterIndex } = this.state; + const { + getFor, + tag, + currentAccountUsername, + pageType, + nsfw, + setFeedPosts, + isConnected, + } = this.props; + const { + posts, + startAuthor, + startPermlink, + refreshing, + selectedFilterIndex, + isLoading, + } = this.state; const filter = pageType === 'posts' ? POPULAR_FILTERS[selectedFilterIndex].toLowerCase() @@ -92,6 +118,19 @@ class PostsView extends Component { let options; let newPosts = []; + if (!isConnected) { + this.setState({ + refreshing: false, + isPostsLoading: false, + isLoading: false, + }); + return null; + } + + if (isLoading) { + return null; + } + this.setState({ isLoading: true }); if (tag || filter === 'feed' || filter === 'blog' || getFor === 'blog') { options = { @@ -139,6 +178,7 @@ class PostsView extends Component { } } + setFeedPosts(_posts); if (refreshing && newPosts.length > 0) { this.setState({ posts: _posts, @@ -154,6 +194,7 @@ class PostsView extends Component { this.setState({ refreshing: false, isPostsLoading: false, + isLoading: false, }); } } else if (result.length === 0) { @@ -284,8 +325,8 @@ class PostsView extends Component { initialNumToRender={10} ListFooterComponent={this._renderFooter} onScrollBeginDrag={() => this._handleOnScrollStart()} - refreshControl={( - -)} + } ref={ref => { this.flatList = ref; }} diff --git a/src/redux/actions/postsAction.js b/src/redux/actions/postsAction.js new file mode 100644 index 000000000..744a8dc0b --- /dev/null +++ b/src/redux/actions/postsAction.js @@ -0,0 +1,6 @@ +import { SET_FEED_POSTS } from '../constants/constants'; + +export const setFeedPosts = payload => ({ + payload, + type: SET_FEED_POSTS, +}); diff --git a/src/redux/constants/constants.js b/src/redux/constants/constants.js index c4903d8fe..3c130a76e 100644 --- a/src/redux/constants/constants.js +++ b/src/redux/constants/constants.js @@ -46,3 +46,6 @@ export const FETCH_GLOBAL_PROPS = 'FETCH_GLOBAL_PROPS'; export const IS_COLLAPSE_POST_BUTTON = 'IS_COLLAPSE_POST_BUTTON'; export const UPDATE_ACTIVE_BOTTOM_TAB = 'UPDATE_ACTIVE_BOTTOM_TAB'; export const TOAST_NOTIFICATION = 'TOAST_NOTIFICATION'; + +// POSTS +export const SET_FEED_POSTS = 'SET_FEED_POSTS'; diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 03a855707..f9b573f7d 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -3,10 +3,12 @@ import accountReducer from './accountReducer'; import applicationReducer from './applicationReducer'; import nav from './nav'; import ui from './uiReducer'; +import postsReducer from './postsReducer'; export default combineReducers({ account: accountReducer, application: applicationReducer, + posts: postsReducer, nav, ui, }); diff --git a/src/redux/reducers/postsReducer.js b/src/redux/reducers/postsReducer.js new file mode 100644 index 000000000..99717cdcc --- /dev/null +++ b/src/redux/reducers/postsReducer.js @@ -0,0 +1,17 @@ +import { SET_FEED_POSTS } from '../constants/constants'; + +const initialState = { + feedPosts: [], +}; + +export default function(state = initialState, action) { + switch (action.type) { + case SET_FEED_POSTS: + return { + ...state, + feedPosts: action.payload, + }; + default: + return state; + } +}