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

View File

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