diff options
Diffstat (limited to 'src/screens')
-rw-r--r-- | src/screens/search/SearchScreen.tsx | 55 |
1 files changed, 42 insertions, 13 deletions
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 223fc2b2..835a5622 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -17,7 +17,7 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadSearchResults} from '../../services'; import {resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType} from '../../types'; +import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** @@ -32,6 +32,9 @@ const SearchScreen: React.FC = () => { const [recents, setRecents] = useState<Array<ProfilePreviewType>>( recentSearches ?? [], ); + const [recentCategories, setRecentCategories] = useState< + CategoryPreviewType[] + >([]); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); const [keyboardVisible, setKeyboardVisible] = React.useState( @@ -50,7 +53,18 @@ const SearchScreen: React.FC = () => { }, []); const dispatch = useDispatch(); + /* + * If user begins actively searching, refresh recently-searched list. + */ + useEffect(() => { + if (searching) loadRecentSearches(); + }, [searching]); + + /* + * Main handler for changes in query. + */ useEffect(() => { + if (!query.length) loadRecentSearches(); if (query.length < 3) { setResults(undefined); return; @@ -97,17 +111,17 @@ const SearchScreen: React.FC = () => { timing(top, topInConfig).start(); setSearching(true); }; - const handleBlur = () => { - setQuery(''); + const handleCancel = () => { Keyboard.dismiss(); const topOutConfig = { duration: 180, toValue: -SCREEN_HEIGHT, easing: Easing.inOut(Easing.ease), }; - timing(top, topOutConfig).start(); + timing(top, topOutConfig).start(() => setQuery('')); setSearching(false); }; + const loadRecentlySearchedUsers = async () => { try { const asyncCache = await AsyncStorage.getItem('@recently_searched_users'); @@ -116,17 +130,31 @@ const SearchScreen: React.FC = () => { console.log(e); } }; - const clearRecentlySearched = async () => { + const loadRecentlySearchedCategories = async () => { try { - await AsyncStorage.removeItem('@recently_searched_users'); - loadRecentlySearchedUsers(); + const recentCategoriesJSON = await AsyncStorage.getItem( + '@recently_searched_categories', + ); + setRecentCategories( + recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [], + ); } catch (e) { console.log(e); } }; - const handleUpdate = async (val: string) => { - setQuery(val); + const loadRecentSearches = () => { loadRecentlySearchedUsers(); + loadRecentlySearchedCategories(); + }; + const clearRecentlySearched = async () => { + try { + AsyncStorage.removeItem('@recently_searched_users'); + AsyncStorage.removeItem('@recently_searched_categories'); + loadRecentlySearchedUsers(); + loadRecentlySearchedCategories(); + } catch (e) { + console.log(e); + } }; return ( @@ -141,8 +169,8 @@ const SearchScreen: React.FC = () => { showsVerticalScrollIndicator={false}> <SearchBar style={styles.searchBar} - onCancel={handleBlur} - onChangeText={handleUpdate} + onCancel={handleCancel} + onChangeText={setQuery} onBlur={Keyboard.dismiss} onFocus={handleFocus} value={query} @@ -150,13 +178,14 @@ const SearchScreen: React.FC = () => { /> <SearchCategories /> <SearchResultsBackground {...{top}}> - {results === undefined && recents.length !== 0 ? ( + {results === undefined && + recents.length + recentCategories.length !== 0 ? ( <RecentSearches sectionTitle="Recent" sectionButtonTitle="Clear all" onPress={clearRecentlySearched} - recents={recents} screenType={ScreenType.Search} + {...{recents, recentCategories}} /> ) : ( <SearchResultList |