implemented filter tap to scroll top

This commit is contained in:
Nouman Tahir 2021-04-10 00:34:06 +05:00
parent f3c5967960
commit b14191604f
3 changed files with 29 additions and 18 deletions

View File

@ -51,7 +51,7 @@ export const TabbedPosts = ({
const [combinedFilters] = useState([...mainFilters, ...subFilters]);
// const [sessionUser, setSessionUser] = useState(username);
const [selectedFilter, setSelectedFilter] = useState(combinedFilters[initialTabIndex].filterKey)
const [filterScrollRequest, setFilterScrollRequest] = useState<string|null>(null)
// //sideEffects
// useEffect(() => {
@ -68,18 +68,23 @@ export const TabbedPosts = ({
//components actions
const _onFilterSelect = (filter:string) => {
if(filter !== selectedFilter){
// _getPromotedPosts()
} else {
//scroll tab to top
if(filter === selectedFilter){
//scroll filter to top
setFilterScrollRequest(selectedFilter)
}else{
setSelectedFilter(filter)
}
setSelectedFilter(filter)
}
const _toggleHideImagesFlag = () => {
dispatch(hidePostsThumbnails(!isHideImages));
}
const _onScrollRequestProcessed = () => {
setFilterScrollRequest(null);
}
// const _getPromotedPosts = async () => {
// if(pageType === 'profiles'){
// return;
@ -101,6 +106,8 @@ export const TabbedPosts = ({
isFeedScreen={isFeedScreen}
feedUsername={feedUsername}
pageType={pageType}
filterScrollRequest={filterScrollRequest}
onScrollRequestProcessed={_onScrollRequestProcessed}
{...props}
/>
))

View File

@ -50,5 +50,6 @@ export interface TabMeta {
feedUsername:string,
tag:string,
forceLoadPosts:boolean,
// promotedPosts:any[],
filterScrollRequest:string,
onScrollRequestProcessed:()=>void
}

View File

@ -1,4 +1,4 @@
import React, {useState, useEffect, useRef, useImperativeHandle, forwardRef} from 'react';
import React, {useState, useEffect, useRef} from 'react';
import PostsList from '../../postsList';
import { getPromotedPosts, loadPosts } from '../services/tabbedPostsFetch';
import { LoadPostsOptions, TabContentProps, TabMeta } from '../services/tabbedPostsModels';
@ -8,7 +8,6 @@ import { setInitPosts } from '../../../redux/actions/postsAction';
import NewPostsPopup from './newPostsPopup';
import { calculateTimeLeftForPostCheck } from '../services/tabbedPostsReducer';
import { AppState } from 'react-native';
import { filter } from 'core-js/core/array';
const TabContent = ({
@ -16,9 +15,10 @@ const TabContent = ({
isFeedScreen,
pageType,
forceLoadPosts,
filterScrollRequest,
onScrollRequestProcessed,
...props
}: TabContentProps, ref) => {
}: TabContentProps) => {
let _postFetchTimer = null;
let _isMounted = true;
@ -55,12 +55,6 @@ const TabContent = ({
const postsRef = useRef(posts);
postsRef.current = posts;
useImperativeHandle(ref ,() => ({
scrollToTop:()=>{
_scrollToTop();
}
}));
//side effects
useEffect(() => {
@ -83,6 +77,15 @@ const TabContent = ({
}
}, [username, forceLoadPosts])
useEffect(() => {
if(filterScrollRequest && filterScrollRequest === filterKey){
_scrollToTop();
if(onScrollRequestProcessed){
onScrollRequestProcessed();
}
}
}, [filterScrollRequest])
const _cleanup = () => {
_isMounted = false;
@ -260,6 +263,6 @@ const TabContent = ({
);
};
export default forwardRef(TabContent);
export default TabContent;