maintaining feedposts cache separate to avoid data inconsistencies

I have also placed a basic structure to cache each feedScreen tab, will enable in next iteration after fixing the upvote updater issue
This commit is contained in:
Nouman Tahir 2021-03-03 14:34:26 +05:00
parent 63f1c04633
commit 88b40d7d20
8 changed files with 60 additions and 6 deletions

View File

@ -18,7 +18,7 @@ import { getPromotePosts } from '../../../providers/ecency/ecency';
import PostsView from '../view/postsView'; import PostsView from '../view/postsView';
// Actions // Actions
import { setFeedPosts } from '../../../redux/actions/postsAction'; import { setFeedPosts, filterSelected, setOtherPosts } from '../../../redux/actions/postsAction';
import { hidePostsThumbnails } from '../../../redux/actions/uiAction'; import { hidePostsThumbnails } from '../../../redux/actions/uiAction';
import { fetchLeaderboard, followUser, unfollowUser } from '../../../redux/actions/userAction'; import { fetchLeaderboard, followUser, unfollowUser } from '../../../redux/actions/userAction';
import { import {
@ -42,6 +42,7 @@ const PostsContainer = ({
feedUsername, feedUsername,
feedSubfilterOptions, feedSubfilterOptions,
feedSubfilterOptionsValue, feedSubfilterOptionsValue,
isFeedScreen = false,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const intl = useIntl(); const intl = useIntl();
@ -82,8 +83,20 @@ const PostsContainer = ({
const elem = useRef(null); const elem = useRef(null);
const isMountedRef = useIsMountedRef(); const isMountedRef = useIsMountedRef();
useEffect(() => {
if(isFeedScreen){
dispatch(filterSelected(selectedFilterValue !== 'feed'
? selectedFilterValue
: selectedFeedSubfilterValue))
}else{
_setFeedPosts([])
}
}, [])
useEffect(() => { useEffect(() => {
if (isConnected) { if (isConnected) {
_loadPosts(); _loadPosts();
_getPromotePosts(); _getPromotePosts();
} }
@ -206,7 +219,12 @@ const PostsContainer = ({
const _setFeedPosts = (_posts) => { const _setFeedPosts = (_posts) => {
setPosts(_posts); setPosts(_posts);
if(isFeedScreen){
dispatch(setFeedPosts(_posts)); dispatch(setFeedPosts(_posts));
}else{
dispatch(setOtherPosts(_posts));
}
}; };
const _handleImagesHide = () => { const _handleImagesHide = () => {
@ -382,6 +400,16 @@ const PostsContainer = ({
setIsNoPost(false); setIsNoPost(false);
}; };
const _setSelectedFilterValue = (val) => {
dispatch(filterSelected(val))
setSelectedFilterValue(val)
}
const _setSelectedFeedSubfilterValue = (val) => {
dispatch(filterSelected(val))
setSelectedFeedSubfilterValue(val)
}
const _getRecommendedUsers = () => dispatch(fetchLeaderboard()); const _getRecommendedUsers = () => dispatch(fetchLeaderboard());
const _formatRecommendedUsers = (usersArray) => { const _formatRecommendedUsers = (usersArray) => {
@ -488,7 +516,7 @@ const PostsContainer = ({
isNoPost={isNoPost} isNoPost={isNoPost}
promotedPosts={promotedPosts} promotedPosts={promotedPosts}
selectedFilterValue={selectedFilterValue} selectedFilterValue={selectedFilterValue}
setSelectedFilterValue={setSelectedFilterValue} setSelectedFilterValue={_setSelectedFilterValue}
handleFilterOnDropdownSelect={_handleFilterOnDropdownSelect} handleFilterOnDropdownSelect={_handleFilterOnDropdownSelect}
loadPosts={_loadPosts} loadPosts={_loadPosts}
handleOnRefreshPosts={_handleOnRefreshPosts} handleOnRefreshPosts={_handleOnRefreshPosts}
@ -496,7 +524,7 @@ const PostsContainer = ({
selectedFeedSubfilterIndex={selectedFeedSubfilterIndex} selectedFeedSubfilterIndex={selectedFeedSubfilterIndex}
feedSubfilterOptionsValue={feedSubfilterOptionsValue} feedSubfilterOptionsValue={feedSubfilterOptionsValue}
handleFeedSubfilterOnDropdownSelect={_handleFeedSubfilterOnDropdownSelect} handleFeedSubfilterOnDropdownSelect={_handleFeedSubfilterOnDropdownSelect}
setSelectedFeedSubfilterValue={setSelectedFeedSubfilterValue} setSelectedFeedSubfilterValue={_setSelectedFeedSubfilterValue}
selectedFeedSubfilterValue={selectedFeedSubfilterValue} selectedFeedSubfilterValue={selectedFeedSubfilterValue}
getRecommendedUsers={_getRecommendedUsers} getRecommendedUsers={_getRecommendedUsers}
getRecommendedCommunities={_getRecommendedCommunities} getRecommendedCommunities={_getRecommendedCommunities}
@ -506,6 +534,7 @@ const PostsContainer = ({
handleSubscribeCommunityButtonPress={_handleSubscribeCommunityButtonPress} handleSubscribeCommunityButtonPress={_handleSubscribeCommunityButtonPress}
followingUsers={followingUsers} followingUsers={followingUsers}
subscribingCommunities={subscribingCommunities} subscribingCommunities={subscribingCommunities}
isFeedScreen={isFeedScreen}
/> />
); );
}; };

View File

@ -59,6 +59,7 @@ const PostsView = ({
handleSubscribeCommunityButtonPress, handleSubscribeCommunityButtonPress,
followingUsers, followingUsers,
subscribingCommunities, subscribingCommunities,
isFeedScreen,
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const postsList = useRef(null); const postsList = useRef(null);
@ -340,6 +341,7 @@ const PostsView = ({
colors={['#fff']} colors={['#fff']}
/> />
} }
isFeedScreen={isFeedScreen}
/> />
{/* <FlatList {/* <FlatList

View File

@ -1,4 +1,4 @@
import React, {forwardRef, memo, useRef, useImperativeHandle} from 'react' import React, {forwardRef, memo, useRef, useImperativeHandle, useState, useEffect} from 'react'
import PostCard from '../../postCard'; import PostCard from '../../postCard';
import { get } from 'lodash'; import { get } from 'lodash';
import { FlatListProps, FlatList } from 'react-native'; import { FlatListProps, FlatList } from 'react-native';
@ -7,16 +7,22 @@ import { useSelector } from 'react-redux';
interface postsListContainerProps extends FlatListProps<any> { interface postsListContainerProps extends FlatListProps<any> {
promotedPosts:Array<any>; promotedPosts:Array<any>;
isFeedScreen:boolean;
} }
const postsListContainer = ({ const postsListContainer = ({
promotedPosts, promotedPosts,
isFeedScreen,
...props ...props
}:postsListContainerProps, ref) => { }:postsListContainerProps, ref) => {
const flatListRef = useRef(null); const flatListRef = useRef(null);
const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails); const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails);
const posts = useSelector((state) => state.posts.feedPosts); const posts = useSelector((state) => {
return isFeedScreen
? state.posts.feedPosts
: state.posts.otherPosts
});
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
scrollToTop() { scrollToTop() {

View File

@ -202,6 +202,7 @@ class ProfileView extends PureComponent {
handleOnScroll={isSummaryOpen ? this._handleOnScroll : null} handleOnScroll={isSummaryOpen ? this._handleOnScroll : null}
forceLoadPost={forceLoadPost} forceLoadPost={forceLoadPost}
changeForceLoadPostState={changeForceLoadPostState} changeForceLoadPostState={changeForceLoadPostState}
isFeedScreen={false}
/> />
</View> </View>

View File

@ -1,5 +1,6 @@
import { import {
SET_FEED_POSTS, SET_FEED_POSTS,
SET_OTHER_POSTS,
FETCH_POSTS, FETCH_POSTS,
FETCH_POSTS_SUCCESS, FETCH_POSTS_SUCCESS,
RESET, RESET,
@ -10,6 +11,10 @@ export const setFeedPosts = (payload) => ({
payload, payload,
type: SET_FEED_POSTS, type: SET_FEED_POSTS,
}); });
export const setOtherPosts = (payload) => ({
payload,
type: SET_OTHER_POSTS,
});
export const fetchPosts = (payload) => ({ export const fetchPosts = (payload) => ({
payload, payload,
type: FETCH_POSTS, type: FETCH_POSTS,

View File

@ -55,6 +55,7 @@ export const TOGGLE_ACCOUNTS_BOTTOM_SHEET = 'TOGGLE_ACCOUNTS_BOTTOM_SHEET';
// POSTS // POSTS
export const SET_FEED_POSTS = 'SET_FEED_POSTS'; export const SET_FEED_POSTS = 'SET_FEED_POSTS';
export const SET_OTHER_POSTS = 'SET_OTHER_POSTS';
export const FILTER_SELECTED = 'FILTER_SELECTED'; export const FILTER_SELECTED = 'FILTER_SELECTED';
export const FETCH_POSTS = 'FETCH_POSTS'; export const FETCH_POSTS = 'FETCH_POSTS';
export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS'; export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS';

View File

@ -1,5 +1,6 @@
import { import {
SET_FEED_POSTS, SET_FEED_POSTS,
SET_OTHER_POSTS,
FILTER_SELECTED, FILTER_SELECTED,
FETCH_POSTS, FETCH_POSTS,
FETCH_POSTS_SUCCESS, FETCH_POSTS_SUCCESS,
@ -8,6 +9,7 @@ import {
const initialState = { const initialState = {
feedPosts: [], feedPosts: [],
otherPosts: [],
posts: [], posts: [],
loading: false, loading: false,
selectedFilterValue: '', selectedFilterValue: '',
@ -21,6 +23,12 @@ export default function (state = initialState, action) {
feedPosts: action.payload, feedPosts: action.payload,
posts: action.payload, posts: action.payload,
}; };
case SET_OTHER_POSTS:
return {
...state,
otherPosts: action.payload,
posts: action.payload,
};
case FILTER_SELECTED: { case FILTER_SELECTED: {
return { return {
...state, ...state,

View File

@ -19,6 +19,7 @@ import {
} from '../../../constants/options/filters'; } from '../../../constants/options/filters';
const FeedScreen = () => { const FeedScreen = () => {
return ( return (
<AccountContainer> <AccountContainer>
{({ currentAccount }) => ( {({ currentAccount }) => (
@ -33,6 +34,7 @@ const FeedScreen = () => {
getFor={get(currentAccount, 'name', null) ? 'feed' : 'hot'} getFor={get(currentAccount, 'name', null) ? 'feed' : 'hot'}
selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2} selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2}
feedUsername={get(currentAccount, 'name', null)} feedUsername={get(currentAccount, 'name', null)}
isFeedScreen={true}
/> />
</SafeAreaView> </SafeAreaView>
</Fragment> </Fragment>