1 files changed, 33 insertions, 12 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index df3c1d67..90501734 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,8 +53,12 @@ const SearchScreen: React.FC = () => {
   }, []);
   const dispatch = useDispatch();
 
+  /*
+   * Main handler for changes in query.
+   */
   useEffect(() => {
     if (!searching) return;
+    if (!query.length) loadRecentSearches();
     if (query.length < 3) {
       setResults(undefined);
       return;
@@ -92,11 +99,11 @@ const SearchScreen: React.FC = () => {
   // when searching state changes, run animation and reset query accordingly
   useEffect(() => {
     if (searching) {
-      timing(top, topInConfig).start(() => setResults(undefined));
+      timing(top, topInConfig).start();
     } else {
       setQuery('');
       handleBlur();
-      timing(top, topOutConfig).start();
+      timing(top, topOutConfig).start(() => setResults(undefined));
     }
   }, [searching]);
 
@@ -108,17 +115,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);
+    }
   };
 
   const topInConfig = {
@@ -146,7 +167,7 @@ const SearchScreen: React.FC = () => {
       <StatusBar barStyle="dark-content" />
       <SearchBar
         onCancel={handleCancel}
-        onChangeText={handleUpdate}
+        onChangeText={setQuery}
         onBlur={handleBlur}
         onFocus={handleFocus}
         value={query}
@@ -160,13 +181,13 @@ const SearchScreen: React.FC = () => {
         showsVerticalScrollIndicator={false}>
         <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