[TMA-161] Recently Searched Users (#34)

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Basic AsyncStorage code

* Basic implementation complete

Need to fix re-rendering bug

* Removed errant comment

* Fixed bug for rerendering upon addition to recents

Need to fix bug for rerendering upon clearing

* Fixed rerendering bug for clear

* Only present recents header if users in recents

* Lint cleaning

* Added comments for a function

* Updated conditional presentation to use ternary

* Created component for List Section Headers

* Lint cleaning

* Converted component to be for Recent Searches

As opposed to just the list header

1 files changed, 52 insertions, 0 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
new file mode 100644
index 00000000..a5c08984
--- /dev/null
+++ b/src/components/search/RecentSearches.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TouchableOpacityProps,
+} from 'react-native';
+import {ProfilePreviewType} from 'src/types';
+import SearchResults from './SearchResults';
+
+interface RecentSearchesProps extends TouchableOpacityProps {
+  sectionTitle: string;
+  sectionButtonTitle: string;
+  recents: Array<ProfilePreviewType>;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+  return (
+    <>
+      <View style={styles.container}>
+        <Text style={styles.title}>{props.sectionTitle}</Text>
+        {props.sectionButtonTitle && (
+          <TouchableOpacity {...props}>
+            <Text style={styles.clear}>Clear all</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      <SearchResults results={props.recents} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    flexGrow: 1,
+  },
+  clear: {
+    fontSize: 17,
+    fontWeight: 'bold',
+    color: '#698DD3',
+  },
+});
+
+export default RecentSearches;