Merge pull request #286 from leonyjiang/tma660-recently-searched-categories

[TMA-660] Recently Searched Categories

1 files changed, 22 insertions, 11 deletions

diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 0f6f5b7d..e0351d96 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -6,7 +6,12 @@ import {useDispatch, useStore} from 'react-redux';
 import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {
+  ProfilePreviewType,
+  ScreenType,
+  UserType,
+  CategoryPreviewType,
+} from '../../types';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import {
   addUserToRecentlyViewed,
@@ -14,6 +19,7 @@ import {
   defaultUserProfile,
   fetchUserX,
   userXInStore,
+  addCategoryToRecentlySearched,
 } from '../../utils/users';
 
 interface SearchResults {
@@ -66,7 +72,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
         return;
       }
 
-      await addUserToRecentlyViewed({
+      addUserToRecentlyViewed({
         id,
         first_name,
         last_name,
@@ -99,6 +105,17 @@ const SearchResultsCell: React.FC<SearchResults> = ({
     }
   };
 
+  /*
+   * Save selected category in recently-searched categories and navigate to its Discover screen.
+   */
+  const onPressCategory = async () => {
+    const categoryObj: CategoryPreviewType = {name, category};
+    addCategoryToRecentlySearched(categoryObj);
+    navigation.navigate('DiscoverUsers', {
+      searchCategory: {id, name},
+    });
+  };
+
   const userCell = () => {
     return (
       <TouchableOpacity
@@ -129,13 +146,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
 
   const categoryCell = () => {
     return (
-      <TouchableOpacity
-        style={styles.cellContainer}
-        onPress={() =>
-          navigation.navigate('DiscoverUsers', {
-            searchCategory: {id, name},
-          })
-        }>
+      <TouchableOpacity style={styles.cellContainer} onPress={onPressCategory}>
         <View style={[styles.imageContainer, styles.categoryBackground]}>
           <Image
             resizeMode="contain"
@@ -156,8 +167,8 @@ const SearchResultsCell: React.FC<SearchResults> = ({
 const styles = StyleSheet.create({
   cellContainer: {
     flexDirection: 'row',
-    marginHorizontal: SCREEN_WIDTH * 0.08,
-    marginBottom: SCREEN_WIDTH * 0.08,
+    paddingHorizontal: 25,
+    paddingVertical: 15,
   },
   imageContainer: {
     width: SCREEN_WIDTH * 0.112,