From ce8804a85fc7f0541581bd1bb6c0657e96ab8b25 Mon Sep 17 00:00:00 2001 From: sliptype Date: Mon, 12 Aug 2024 15:28:39 -0500 Subject: [PATCH 1/4] Fix search input --- .../src/screens/app-screen/AppTabScreen.tsx | 6 +- .../search-screen-v2/SearchScreenV2.tsx | 115 +++++++++++------- .../src/screens/search-screen-v2/index.ts | 2 +- .../screens/search-screen-v2/searchState.ts | 4 +- 4 files changed, 75 insertions(+), 52 deletions(-) diff --git a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx index b2d48d7cef4..1e1db040884 100644 --- a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx +++ b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx @@ -37,7 +37,7 @@ import { } from 'app/screens/search-results-screen' import { SearchScreen } from 'app/screens/search-screen' import type { SearchParams } from 'app/screens/search-screen-v2' -import { SearchScreenV2 } from 'app/screens/search-screen-v2' +import { SearchScreenStack } from 'app/screens/search-screen-v2' import { AboutScreen, AccountSettingsScreen, @@ -223,8 +223,8 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => { {isSearchV2Enabled ? ( ) : ( diff --git a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx b/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx index 9db13f5987e..e9710cd5059 100644 --- a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx +++ b/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx @@ -7,6 +7,7 @@ import type { import { Kind } from '@audius/common/models' import { searchSelectors } from '@audius/common/store' import { useFocusEffect } from '@react-navigation/native' +import { createNativeStackNavigator } from '@react-navigation/native-stack' import type { TextInput } from 'react-native/types' import { useSelector } from 'react-redux' import { useEffectOnce } from 'react-use' @@ -15,12 +16,20 @@ import { Flex } from '@audius/harmony-native' import { Screen } from 'app/components/core' import { useRoute } from 'app/hooks/useRoute' +import { useAppScreenOptions } from '../app-screen/useAppScreenOptions' + import { RecentSearches } from './RecentSearches' import { SearchBarV2 } from './SearchBarV2' import { SearchCatalogTile } from './SearchCatalogTile' import { SearchCategoriesAndFilters } from './SearchCategoriesAndFilters' import { SearchResults } from './search-results/SearchResults' -import { SearchContext } from './searchState' +import { + SearchContext, + useSearchAutoFocus, + useSearchCategory, + useSearchFilters, + useSearchQuery +} from './searchState' const { getV2SearchHistory } = searchSelectors @@ -32,25 +41,11 @@ const itemKindByCategory: Record = { albums: Kind.COLLECTIONS } -export const SearchScreenV2 = () => { - const { params } = useRoute<'Search'>() - - const [autoFocus, setAutoFocus] = useState(params?.autoFocus ?? false) - const [query, setQuery] = useState(params?.query ?? '') - const [category, setCategory] = useState( - params?.category ?? 'all' - ) - const [filters, setFilters] = useState( - params?.filters ?? {} - ) - const [bpmType, setBpmType] = useState<'range' | 'target'>('range') - - useEffect(() => { - setQuery(params?.query ?? '') - setCategory(params?.category ?? 'all') - setFilters(params?.filters ?? {}) - setAutoFocus(params?.autoFocus ?? false) - }, [params]) +const SearchScreenV2 = () => { + const [query] = useSearchQuery() + const [category] = useSearchCategory() + const [filters] = useSearchFilters() + const [autoFocus, setAutoFocus] = useSearchAutoFocus() const history = useSelector(getV2SearchHistory) const categoryKind: Kind | null = category @@ -84,6 +79,57 @@ export const SearchScreenV2 = () => { }, [autoFocus, refsSet, setAutoFocus]) ) + return ( + } + headerTitle={null} + variant='white' + > + + + {!showSearchResults ? ( + + {showRecentSearches ? ( + } + searchItems={filteredSearchItems} + /> + ) : ( + + )} + + ) : ( + + )} + + + ) +} + +const Stack = createNativeStackNavigator() + +export const SearchScreenStack = () => { + const { params } = useRoute<'Search'>() + + const [autoFocus, setAutoFocus] = useState(params?.autoFocus ?? false) + const [query, setQuery] = useState(params?.query ?? '') + const [category, setCategory] = useState( + params?.category ?? 'all' + ) + const [filters, setFilters] = useState( + params?.filters ?? {} + ) + const [bpmType, setBpmType] = useState<'range' | 'target'>('range') + + useEffect(() => { + setQuery(params?.query ?? '') + setCategory(params?.category ?? 'all') + setFilters(params?.filters ?? {}) + setAutoFocus(params?.autoFocus ?? false) + }, [params]) + + const screenOptions = useAppScreenOptions() + return ( { filters, setFilters, bpmType, - setBpmType, - active: true + setBpmType }} > - } - headerTitle={null} - variant='white' - > - - - {!showSearchResults ? ( - - {showRecentSearches ? ( - } - searchItems={filteredSearchItems} - /> - ) : ( - - )} - - ) : ( - - )} - - + + + ) } diff --git a/packages/mobile/src/screens/search-screen-v2/index.ts b/packages/mobile/src/screens/search-screen-v2/index.ts index c31f88995da..06396dd1d55 100644 --- a/packages/mobile/src/screens/search-screen-v2/index.ts +++ b/packages/mobile/src/screens/search-screen-v2/index.ts @@ -1,2 +1,2 @@ -export { SearchScreenV2 } from './SearchScreenV2' +export { SearchScreenStack } from './SearchScreenV2' export type { SearchParams } from './searchParams' diff --git a/packages/mobile/src/screens/search-screen-v2/searchState.ts b/packages/mobile/src/screens/search-screen-v2/searchState.ts index de1d3ca1cf1..d49d412964b 100644 --- a/packages/mobile/src/screens/search-screen-v2/searchState.ts +++ b/packages/mobile/src/screens/search-screen-v2/searchState.ts @@ -26,7 +26,6 @@ type SearchContextType = { setBpmType: Dispatch> autoFocus: boolean setAutoFocus: Dispatch> - active: boolean } export const SearchContext = createContext({ @@ -41,8 +40,7 @@ export const SearchContext = createContext({ setBpmType: (_) => {}, // Special state to determine if the search query input should be focused automatically autoFocus: false, - setAutoFocus: (_) => {}, - active: false + setAutoFocus: (_) => {} }) export const useIsEmptySearch = () => { From 5fcac7e439e6ff76f678d35eb588d031b519a588 Mon Sep 17 00:00:00 2001 From: sliptype Date: Mon, 12 Aug 2024 15:31:45 -0500 Subject: [PATCH 2/4] Small skeleton margin issue --- .../screens/search-screen-v2/search-results/AllResults.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx b/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx index 98bf43623d5..83b05389f98 100644 --- a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx +++ b/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx @@ -63,9 +63,7 @@ const AllResultsItem = ({ }, [item, dispatch, query]) return item.status === Status.LOADING ? ( - - - + ) : ( ) From cffa5b28621d07e69eb7e14b957113df20f2f2c6 Mon Sep 17 00:00:00 2001 From: sliptype Date: Mon, 12 Aug 2024 15:44:58 -0500 Subject: [PATCH 3/4] Lint fix --- .../src/screens/search-screen-v2/search-results/AllResults.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx b/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx index 83b05389f98..408431ac54a 100644 --- a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx +++ b/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx @@ -9,7 +9,7 @@ import { range } from 'lodash' import { Keyboard } from 'react-native' import { useDispatch } from 'react-redux' -import { Box, Divider, Flex, Text } from '@audius/harmony-native' +import { Divider, Flex, Text } from '@audius/harmony-native' import { SectionList } from 'app/components/core' import { make, track as record } from 'app/services/analytics' From 2d3adb9bc49af92a470c7db7707b805bcedcff7a Mon Sep 17 00:00:00 2001 From: sliptype Date: Mon, 12 Aug 2024 16:12:13 -0500 Subject: [PATCH 4/4] Put back active --- .../mobile/src/screens/search-screen-v2/SearchScreenV2.tsx | 3 ++- packages/mobile/src/screens/search-screen-v2/searchState.ts | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx b/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx index e9710cd5059..410e95ee728 100644 --- a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx +++ b/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx @@ -142,7 +142,8 @@ export const SearchScreenStack = () => { filters, setFilters, bpmType, - setBpmType + setBpmType, + active: true }} > diff --git a/packages/mobile/src/screens/search-screen-v2/searchState.ts b/packages/mobile/src/screens/search-screen-v2/searchState.ts index d49d412964b..de1d3ca1cf1 100644 --- a/packages/mobile/src/screens/search-screen-v2/searchState.ts +++ b/packages/mobile/src/screens/search-screen-v2/searchState.ts @@ -26,6 +26,7 @@ type SearchContextType = { setBpmType: Dispatch> autoFocus: boolean setAutoFocus: Dispatch> + active: boolean } export const SearchContext = createContext({ @@ -40,7 +41,8 @@ export const SearchContext = createContext({ setBpmType: (_) => {}, // Special state to determine if the search query input should be focused automatically autoFocus: false, - setAutoFocus: (_) => {} + setAutoFocus: (_) => {}, + active: false }) export const useIsEmptySearch = () => {