[TMA-375] Added discover users to explore (#119)

* Added discover users to explore

* Filtered following users out

* Removed reload button and filtering following users from discover page

* Wrapped contents

* Preview type in types.ts

4 files changed, 55 insertions, 6 deletions

diff --git a/src/components/search/DiscoverUsers.tsx b/src/components/search/DiscoverUsers.tsx
new file mode 100644
index 00000000..885c712b
--- /dev/null
+++ b/src/components/search/DiscoverUsers.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TouchableOpacityProps,
+} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import SearchResults from './SearchResults';
+
+interface DiscoverUsersProps extends TouchableOpacityProps {
+  sectionTitle: string;
+  users: Array<ProfilePreviewType>;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const DiscoverUsers: React.FC<DiscoverUsersProps> = (props) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>{props.sectionTitle}</Text>
+      </View>
+      <SearchResults results={props.users} previewType={props.sectionTitle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: '5%',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    marginBottom: '1%',
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: 'bold',
+    flexGrow: 1,
+    color: 'white',
+  },
+});
+
+export default DiscoverUsers;
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index f47f8879..6a98e49a 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -29,7 +29,7 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
           </TouchableOpacity>
         )}
       </View>
-      <SearchResults results={props.recents} />
+      <SearchResults results={props.recents} previewType={props.sectionTitle} />
     </>
   );
 };
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 57db4167..2d5c9db8 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-import {ProfilePreviewType} from '../../types';
+import {ProfilePreviewType, PreviewType} from '../../types';
 import ProfilePreview from '../profile/ProfilePreview';
 import {StyleSheet, View} from 'react-native';
 interface SearchResultsProps {
   results: Array<ProfilePreviewType>;
+  previewType: PreviewType;
 }
-const SearchResults: React.FC<SearchResultsProps> = ({results}) => {
+const SearchResults: React.FC<SearchResultsProps> = (props) => {
   return (
-    <View>
-      {results.map((profilePreview) => (
+    <View style={styles.container}>
+      {props.results.map((profilePreview) => (
         <ProfilePreview
           style={styles.result}
           key={profilePreview.id}
           {...{profilePreview}}
-          isComment={false}
+          previewType={props.previewType}
         />
       ))}
     </View>
@@ -21,6 +22,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({results}) => {
 };
 
 const styles = StyleSheet.create({
+  container: {flexDirection: 'row', flexWrap: 'wrap'},
   result: {
     marginVertical: 10,
   },
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
index 47dccd8b..08052f77 100644
--- a/src/components/search/index.ts
+++ b/src/components/search/index.ts
@@ -4,3 +4,4 @@ export {default as SearchBar} from './SearchBar';
 export {default as Explore} from './Explore';
 export {default as SearchResultsBackground} from './SearchResultsBackground';
 export {default as SearchResults} from './SearchResults';
+export {default as DiscoverUsers} from './DiscoverUsers';