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

[TMA-660] Recently Searched Categories

1 files changed, 35 insertions, 17 deletions

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',
   },
 });