From 3f5457137dd04db9a55983f68f4c519056cae6ed Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 16 Sep 2024 14:21:35 +0700 Subject: [PATCH 1/4] fix: preserve scroll position and fixed the Saved title --- src/pages/Search/SearchTypeMenu.tsx | 40 +++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index ce30c0a8d782..a22b2820862c 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -1,12 +1,14 @@ -import React, {useCallback} from 'react'; +import {useRoute} from '@react-navigation/native'; +import React, {useCallback, useContext, useLayoutEffect, useRef} from 'react'; import {View} from 'react-native'; -import type {TextStyle, ViewStyle} from 'react-native'; +import type {ScrollView as RNScrollView, ScrollViewProps, TextStyle, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {MenuItemBaseProps} from '@components/MenuItem'; import MenuItem from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; import type {MenuItemWithLink} from '@components/MenuItemList'; import {usePersonalDetails} from '@components/OnyxProvider'; +import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; import ScrollView from '@components/ScrollView'; import type {SearchQueryJSON} from '@components/Search/types'; import Text from '@components/Text'; @@ -165,8 +167,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { const renderSavedSearchesSection = useCallback( (menuItems: MenuItemWithLink[]) => ( - - {translate('search.savedSearchesMenuItemTitle')} + (null); + const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext); + const onScroll = useCallback>( + (e) => { + // If the layout measurement is 0, it means the flashlist is not displayed but the onScroll may be triggered with offset value 0. + // We should ignore this case. + if (e.nativeEvent.layoutMeasurement.height === 0) { + return; + } + saveScrollOffset(route, e.nativeEvent.contentOffset.y); + }, + [route, saveScrollOffset], + ); + + useLayoutEffect(() => { + const scrollOffset = getScrollOffset(route); + if (!scrollOffset || !scrollViewRef.current) { + return; + } + scrollViewRef.current.scrollTo({y: scrollOffset, animated: false}); + }, [getScrollOffset, route]); + return ( <> @@ -227,7 +251,13 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { {savedSearches && Object.keys(savedSearches).length > 0 && ( <> - {renderSavedSearchesSection(savedSearchesMenuItems())} + {translate('search.savedSearchesMenuItemTitle')} + + {renderSavedSearchesSection(savedSearchesMenuItems())} + )} From 8aa15ada08e51fa6e897bad1b865d28504d1a5eb Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 16 Sep 2024 15:10:32 +0700 Subject: [PATCH 2/4] fix lint --- src/pages/Search/SearchTypeMenu.tsx | 46 ++++++++++++++--------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index a22b2820862c..5dd79872d944 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -158,6 +158,29 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { return baseMenuItem; }; + const route = useRoute(); + const scrollViewRef = useRef(null); + const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext); + const onScroll = useCallback>( + (e) => { + // If the layout measurement is 0, it means the flashlist is not displayed but the onScroll may be triggered with offset value 0. + // We should ignore this case. + if (e.nativeEvent.layoutMeasurement.height === 0) { + return; + } + saveScrollOffset(route, e.nativeEvent.contentOffset.y); + }, + [route, saveScrollOffset], + ); + + useLayoutEffect(() => { + const scrollOffset = getScrollOffset(route); + if (!scrollOffset || !scrollViewRef.current) { + return; + } + scrollViewRef.current.scrollTo({y: scrollOffset, animated: false}); + }, [getScrollOffset, route]); + const savedSearchesMenuItems = () => { if (!savedSearches) { return []; @@ -199,29 +222,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { ); } - const route = useRoute(); - const scrollViewRef = useRef(null); - const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext); - const onScroll = useCallback>( - (e) => { - // If the layout measurement is 0, it means the flashlist is not displayed but the onScroll may be triggered with offset value 0. - // We should ignore this case. - if (e.nativeEvent.layoutMeasurement.height === 0) { - return; - } - saveScrollOffset(route, e.nativeEvent.contentOffset.y); - }, - [route, saveScrollOffset], - ); - - useLayoutEffect(() => { - const scrollOffset = getScrollOffset(route); - if (!scrollOffset || !scrollViewRef.current) { - return; - } - scrollViewRef.current.scrollTo({y: scrollOffset, animated: false}); - }, [getScrollOffset, route]); - return ( <> From 9b426380a3074b9ee258b93a150ea81162c8a679 Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 16 Sep 2024 15:57:24 +0700 Subject: [PATCH 3/4] fix: add comment eslint-disable-next-line no-restricted-imports --- src/pages/Search/SearchTypeMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index 5dd79872d944..91267871991c 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -1,6 +1,7 @@ import {useRoute} from '@react-navigation/native'; import React, {useCallback, useContext, useLayoutEffect, useRef} from 'react'; import {View} from 'react-native'; +// eslint-disable-next-line no-restricted-imports import type {ScrollView as RNScrollView, ScrollViewProps, TextStyle, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {MenuItemBaseProps} from '@components/MenuItem'; From a0c8b553c8ed01efd44e016f7a33155e927b90bf Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 16 Sep 2024 17:41:58 +0700 Subject: [PATCH 4/4] fix: lint --- src/pages/Search/SearchTypeMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index 91267871991c..0e59aa969b66 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -203,7 +203,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { /> ), - [styles, translate], + [styles], ); const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);