Merge pull request #293 from leonyjiang/tma683-dynamic-search-placeholder

[TMA-683] Dynamic Search Suggestions

1 files changed, 24 insertions, 30 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 728510c5..59b17f57 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -18,7 +18,13 @@ import {loadSearchResults} from '../../services';
 import {resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  getRecentlySearchedCategories,
+  getRecentlySearchedUsers,
+} from '../../utils';
 
 /**
  * Search Screen for user recommendations and a search
@@ -58,9 +64,8 @@ const SearchScreen: React.FC = () => {
    */
   useEffect(() => {
     if (!searching) return;
-    if (!query.length) loadRecentSearches();
     if (query.length < 3) {
-      setResults(undefined);
+      loadRecentlySearched().then(() => setResults(undefined));
       return;
     }
     (async () => {
@@ -101,7 +106,9 @@ const SearchScreen: React.FC = () => {
   // when searching state changes, run animation and reset query accordingly
   useEffect(() => {
     if (searching) {
-      timing(top, topInConfig).start();
+      loadRecentlySearched().then(() => {
+        timing(top, topInConfig).start();
+      });
     } else {
       setQuery('');
       handleBlur();
@@ -109,36 +116,23 @@ const SearchScreen: React.FC = () => {
     }
   }, [searching]);
 
-  const loadRecentlySearchedUsers = async () => {
-    try {
-      const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
-      asyncCache != null ? setRecents(JSON.parse(asyncCache)) : setRecents([]);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const loadRecentlySearchedCategories = async () => {
-    try {
-      const recentCategoriesJSON = await AsyncStorage.getItem(
-        '@recently_searched_categories',
-      );
-      setRecentCategories(
-        recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [],
-      );
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const loadRecentSearches = () => {
-    loadRecentlySearchedUsers();
-    loadRecentlySearchedCategories();
+  // loads recent searches (users & categories) from AsyncStorage
+  const loadRecentlySearched = async () => {
+    return Promise.all([
+      getRecentlySearchedUsers(),
+      getRecentlySearchedCategories(),
+    ]).then(
+      ([users, categories]: [ProfilePreviewType[], CategoryPreviewType[]]) => {
+        setRecents(users);
+        setRecentCategories(categories);
+      },
+    );
   };
   const clearRecentlySearched = async () => {
     try {
       AsyncStorage.removeItem('@recently_searched_users');
       AsyncStorage.removeItem('@recently_searched_categories');
-      loadRecentlySearchedUsers();
-      loadRecentlySearchedCategories();
+      loadRecentlySearched();
     } catch (e) {
       console.log(e);
     }
@@ -173,7 +167,7 @@ const SearchScreen: React.FC = () => {
         onBlur={handleBlur}
         onFocus={handleFocus}
         value={query}
-        {...{top}}
+        {...{top, searching}}
       />
       <ScrollView
         scrollEnabled={!searching}