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

[TMA-660] Recently Searched Categories

1 files changed, 31 insertions, 20 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 6fb9fca9..b4cc5483 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,37 +7,45 @@ 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';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
   sectionTitle: PreviewType;
-  sectionButtonTitle: string;
   recents: Array<ProfilePreviewType>;
+  recentCategories: CategoryPreviewType[];
   screenType: ScreenType;
 }
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
+
 const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+  const {
+    sectionTitle,
+    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 && (
-          <TouchableOpacity {...props}>
-            <Text style={styles.clear}>Clear all</Text>
-          </TouchableOpacity>
-        )}
+      contentContainerStyle={styles.contentContainer}>
+      <View style={styles.header}>
+        <Text style={styles.title}>{sectionTitle}</Text>
+        <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>
   );
@@ -45,17 +53,20 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
 
 const styles = StyleSheet.create({
   mainContainer: {
-    marginLeft: '3%',
-    padding: 20,
+    flexGrow: 1,
+  },
+  contentContainer: {
+    paddingBottom: SCREEN_HEIGHT * 0.1,
   },
-  container: {
+  header: {
+    paddingHorizontal: 25,
+    paddingVertical: 5,
     flexDirection: 'row',
   },
   title: {
     fontSize: 18,
     fontWeight: '600',
     flexGrow: 1,
-    marginBottom: '5%',
   },
   clear: {
     fontSize: 18,