Add utils, fix ordering of recent searches

4 files changed, 120 insertions, 72 deletions

diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 5cba6d2f..f274bfb9 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -14,11 +14,11 @@ import {
 } from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import {
-  addUserToRecentlyViewed,
   checkIfUserIsBlocked,
   defaultUserProfile,
   fetchUserX,
   userXInStore,
+  addUserToRecentlySearched,
   addCategoryToRecentlySearched,
 } from '../../utils/users';
 
@@ -74,7 +74,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
         return;
       }
 
-      addUserToRecentlyViewed({
+      addUserToRecentlySearched({
         id,
         first_name,
         last_name,
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 277b3454..ef518d8b 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -23,20 +23,26 @@ const SearchResults: React.FC<SearchResultsProps> = ({results, categories}) => {
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   return (
     <View>
-      {categories.map((category: CategoryPreviewType) => (
-        <SearchResultsCell
-          key={category.name}
-          profileData={category}
-          {...{loggedInUser}}
-        />
-      ))}
-      {results.map((profile: ProfilePreviewType) => (
-        <SearchResultsCell
-          key={profile.id}
-          profileData={profile}
-          {...{loggedInUser}}
-        />
-      ))}
+      {categories
+        .slice(0)
+        .reverse()
+        .map((category: CategoryPreviewType) => (
+          <SearchResultsCell
+            key={category.name}
+            profileData={category}
+            {...{loggedInUser}}
+          />
+        ))}
+      {results
+        .slice(0)
+        .reverse()
+        .map((profile: ProfilePreviewType) => (
+          <SearchResultsCell
+            key={profile.id}
+            profileData={profile}
+            {...{loggedInUser}}
+          />
+        ))}
     </View>
   );
 };
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 728510c5..089e0d27 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);
     }
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 15107c99..3e0d9eef 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -166,55 +166,86 @@ export const defaultUserProfile = () => {
   return defaultImage;
 };
 
-export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => {
-  const jsonValue = await AsyncStorage.getItem('@recently_searched_users');
-  let recentlySearchedList = jsonValue != null ? JSON.parse(jsonValue) : null;
-  if (recentlySearchedList) {
-    if (recentlySearchedList.length > 0) {
-      if (
-        recentlySearchedList.some(
-          (saved_user: ProfilePreviewType) => saved_user.id === user.id,
-        )
-      ) {
-        console.log('User already in recently searched.');
-      } else {
-        if (recentlySearchedList.length >= 10) {
-          recentlySearchedList.pop();
+/*
+ * AsyncStorage key for list of recently-searched users.
+ */
+const recentlySearchedUsersKey = '@recently_searched_users';
+
+/*
+ * Stores `user` in AsyncStorage as a recently-searched user.
+ */
+export const addUserToRecentlySearched = async (user: ProfilePreviewType) => {
+  let users: ProfilePreviewType[];
+  // retrieve and update recently-searched categories list
+  try {
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) {
+      users = JSON.parse(usersJSON);
+      // if category already exists, move it to the end
+      for (let i = 0; i < users.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (users[i].id === user.id) {
+          users.splice(i, 1);
+          break;
         }
-        recentlySearchedList.unshift(user);
       }
+      users.push(user);
+    } else {
+      users = [user];
+    }
+    // store updated list of recently-searched categories
+    try {
+      AsyncStorage.setItem(recentlySearchedUsersKey, JSON.stringify(users));
+    } catch (e) {
+      console.log(e);
     }
-  } else {
-    recentlySearchedList = [user];
+  } catch (e) {
+    console.log(e);
   }
+};
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedUsers = async (): Promise<
+  ProfilePreviewType[]
+> => {
   try {
-    let recentlySearchedListString = JSON.stringify(recentlySearchedList);
-    await AsyncStorage.setItem(
-      '@recently_searched_users',
-      recentlySearchedListString,
-    );
+    const usersJSON = await AsyncStorage.getItem(recentlySearchedUsersKey);
+    if (usersJSON) return JSON.parse(usersJSON);
   } catch (e) {
     console.log(e);
   }
+  return [];
 };
 
 /*
- * Stores `category` in AsyncStorage as a recently searched category.
+ * AsyncStorage key for list of recently-searched categories.
+ */
+const recentlySearchedCategoriesKey = '@recently_searched_categories';
+
+/*
+ * Stores `category` in AsyncStorage as a recently-searched category.
  */
 export const addCategoryToRecentlySearched = async (
   category: CategoryPreviewType,
 ) => {
-  const recentlySearchedCategoriesKey = '@recently_searched_categories';
   let categories: CategoryPreviewType[];
-  // retrieve recently-searched categories and set new list
+  // retrieve and update recently-searched categories list
   try {
     const categoriesJSON = await AsyncStorage.getItem(
       recentlySearchedCategoriesKey,
     );
     if (categoriesJSON) {
       categories = JSON.parse(categoriesJSON);
-      // TODO: make this more efficient by comparing shorter key
-      if (categories.find((c) => c.name === category.name)) return;
+      // if category already exists, move it to the end
+      for (let i = 0; i < categories.length; i++) {
+        // TODO: speed up comparison by adding some id field to category
+        if (categories[i].name === category.name) {
+          categories.splice(i, 1);
+          break;
+        }
+      }
       categories.push(category);
     } else {
       categories = [category];
@@ -232,3 +263,20 @@ export const addCategoryToRecentlySearched = async (
     console.log(e);
   }
 };
+
+/*
+ * Retrieves and returns user's recently-searched categories from AsyncStorage.
+ */
+export const getRecentlySearchedCategories = async (): Promise<
+  CategoryPreviewType[]
+> => {
+  try {
+    const categoriesJSON = await AsyncStorage.getItem(
+      '@recently_searched_categories',
+    );
+    if (categoriesJSON) return JSON.parse(categoriesJSON);
+  } catch (e) {
+    console.log(e);
+  }
+  return [];
+};