Add categories to recently-searched results

2 files changed, 55 insertions, 24 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 5db1342c..89379596 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,12 @@ import {
   TouchableOpacityProps,
   ScrollView,
 } from 'react-native';
-import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
+import {
+  PreviewType,
+  ProfilePreviewType,
+  ScreenType,
+  CategoryPreviewType,
+} from '../../types';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
 import {SCREEN_HEIGHT} from '../../utils';
@@ -16,26 +21,35 @@ interface RecentSearchesProps extends TouchableOpacityProps {
   sectionTitle: PreviewType;
   sectionButtonTitle: string;
   recents: Array<ProfilePreviewType>;
+  recentCategories: CategoryPreviewType[];
   screenType: ScreenType;
 }
 
 const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+  const {
+    sectionTitle,
+    sectionButtonTitle,
+    recents,
+    recentCategories,
+    screenType,
+  } = props;
   return (
     <ScrollView
       style={styles.mainContainer}
       contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
       <View style={styles.container}>
-        <Text style={styles.title}>{props.sectionTitle}</Text>
-        {props.sectionButtonTitle && (
+        <Text style={styles.title}>{sectionTitle}</Text>
+        {sectionButtonTitle && (
           <TouchableOpacity {...props}>
             <Text style={styles.clear}>Clear all</Text>
           </TouchableOpacity>
         )}
       </View>
       <SearchResults
-        results={props.recents}
-        previewType={props.sectionTitle}
-        screenType={props.screenType}
+        results={recents}
+        categories={recentCategories}
+        previewType={sectionTitle}
+        screenType={screenType}
       />
     </ScrollView>
   );
@@ -44,7 +58,6 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
 const styles = StyleSheet.create({
   mainContainer: {
     marginLeft: '3%',
-    padding: 20,
   },
   container: {
     flexDirection: 'row',
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index bf355220..798d3251 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,22 +1,33 @@
 import React from 'react';
-import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import {
+  ProfilePreviewType,
+  PreviewType,
+  ScreenType,
+  CategoryPreviewType,
+} from '../../types';
 import ProfilePreview from '../profile/ProfilePreview';
 import {StyleSheet, View} from 'react-native';
+import SearchResultsCell from './SearchResultCell';
+import {useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
 interface SearchResultsProps {
-  results: Array<ProfilePreviewType>;
+  results: ProfilePreviewType[];
   previewType: PreviewType;
   screenType: ScreenType;
+  categories: CategoryPreviewType[];
 }
 const SearchResults: React.FC<SearchResultsProps> = ({
   results,
   previewType,
   screenType,
+  categories,
 }) => {
   /**
    * Added the following swicth case to make Results on Search and Recents screen a list
    * Flex is love
    */
-  var containerStyle;
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+  let containerStyle;
   switch (previewType) {
     case 'Search':
       containerStyle = styles.containerSearch;
@@ -29,25 +40,32 @@ const SearchResults: React.FC<SearchResultsProps> = ({
   }
   return (
     <View style={containerStyle}>
-      {results &&
-        results.map((profilePreview) => (
-          <ProfilePreview
-            style={styles.result}
-            key={profilePreview.id}
-            {...{profilePreview}}
-            previewType={previewType}
-            screenType={screenType}
-          />
-        ))}
+      {categories.map((category: CategoryPreviewType) => (
+        <SearchResultsCell
+          key={category.name}
+          profileData={category}
+          {...{loggedInUser}}
+        />
+      ))}
+      {results.map((profile: ProfilePreviewType) => (
+        <SearchResultsCell
+          key={profile.id}
+          profileData={profile}
+          {...{loggedInUser}}
+        />
+      ))}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  containerSearch: {flexDirection: 'column', flexWrap: 'wrap'},
-  container: {flexDirection: 'row', flexWrap: 'wrap'},
-  result: {
-    marginVertical: 10,
+  containerSearch: {
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+  },
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
 });