TMA-663-Updated Search init

5 files changed, 152 insertions, 1 deletions

diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index bebf6bcf..43a26514 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -42,6 +42,7 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
 const styles = StyleSheet.create({
   mainContainer: {
     marginLeft: '3%',
+    padding : 20,
   },
   container: {
     flexDirection: 'row',
@@ -53,6 +54,7 @@ const styles = StyleSheet.create({
     marginBottom: '5%',
   },
   clear: {
+    
     fontSize: 18,
     fontWeight: 'bold',
     color: TAGG_LIGHT_BLUE,
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
new file mode 100644
index 00000000..46d5ee44
--- /dev/null
+++ b/src/components/search/SearchResultCell.tsx
@@ -0,0 +1,100 @@
+import React, {useEffect, useState} from 'react';
+import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import ProfilePreview from '../profile/ProfilePreview';
+import {Image, SectionList, StyleSheet, View, Text} from 'react-native';
+import {normalize} from '../../utils';
+import {defaultUserProfile} from '../../utils/users';
+import {loadImageFromURL} from '../../services';
+
+
+const SearchResultsCell: React.FC<ProfilePreviewType> = ({
+    item: {id, name, username, first_name, last_name, thumbnail_url},
+  }) => {
+    const [avatar, setAvatar] = useState('');
+    useEffect(() => {
+      (async () => {
+        const response = await loadImageFromURL(thumbnail_url);
+        if (response) {
+          setAvatar(response);
+        }
+      })();
+    }, []);
+  
+    const userCell = () => {
+      return (
+        <View
+          style={{
+            flexDirection: 'row',
+            marginHorizontal: 24,
+            marginBottom: 24,
+          }}>
+          <Image
+            defaultSource={defaultUserProfile()}
+            source={{uri: avatar}}
+            style={{width: 42, height: 42, borderRadius: 21}}
+          />
+          <View
+            style={{
+              marginLeft: 30,
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+            }}>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {username}
+            </Text>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {first_name + ' ' + last_name}
+            </Text>
+          </View>
+        </View>
+      );
+    };
+  
+    const categoryCell = () => {
+      return (
+        <View
+          style={{
+            flexDirection: 'row',
+            marginHorizontal: 24,
+            marginBottom: 24,
+          }}>
+          <Image
+            defaultSource={defaultUserProfile()}
+            source={{uri: avatar}}
+            style={{width: 42, height: 42, borderRadius: 21}}
+          />
+          <View
+            style={{
+              marginLeft: 30,
+              flexDirection: 'column',
+              justifyContent: 'center',
+            }}>
+            <Text
+              style={{
+                fontWeight: '500',
+                fontSize: normalize(14),
+              }}>
+              {name}
+            </Text>
+          </View>
+        </View>
+      );
+    };
+  
+    return (
+      <>
+        {name !== undefined && categoryCell()}
+        {name === undefined && userCell()}
+      </>
+    );
+  };
+
+  export default SearchResultsCell
\ No newline at end of file
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
new file mode 100644
index 00000000..702ce7c8
--- /dev/null
+++ b/src/components/search/SearchResultList.tsx
@@ -0,0 +1,49 @@
+import React, {useEffect, useState} from 'react';
+import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import ProfilePreview from '../profile/ProfilePreview';
+import {Image, SectionList, StyleSheet, View, Text} from 'react-native';
+import {normalize} from '../../utils';
+import {defaultUserProfile} from '../../utils/users';
+import {loadImageFromURL} from '../../services';
+import SearchResultsCell from './SearchResultCell';
+
+interface SearchResultsProps {
+  results: [];
+  previewType: PreviewType;
+  screenType: ScreenType;
+}
+
+const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
+  return (
+    <View style={styles.container}>
+      <SectionList
+        showsVerticalScrollIndicator={false}
+        sections={results}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({item}) => <SearchResultsCell item={item} />}
+        renderSectionHeader={({section: {title}}) => {
+          if (title === 'categories') {
+            return <View />;
+          }
+          return (
+            <View
+              style={{
+                width: '100%',
+                height: 0.5,
+                marginBottom: 24,
+                backgroundColor: '#C4C4C4',
+              }}
+            />
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerSearch: {flexDirection: 'column', flexWrap: 'wrap'},
+  container: {flex: 1, marginTop: 24},
+});
+
+export default SearchResultList;
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index 77b1821d..fa4e18ca 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -34,7 +34,6 @@ const styles = StyleSheet.create({
     flex: 1,
     height: SCREEN_HEIGHT,
     width: SCREEN_WIDTH,
-    padding: 20,
     position: 'absolute',
     backgroundColor: '#fff',
     zIndex: 0,
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
index 08052f77..7418f0ba 100644
--- a/src/components/search/index.ts
+++ b/src/components/search/index.ts
@@ -3,5 +3,6 @@ export {default as SearchHeader} from './SearchHeader';
 export {default as SearchBar} from './SearchBar';
 export {default as Explore} from './Explore';
 export {default as SearchResultsBackground} from './SearchResultsBackground';
+export {default as SearchResultList} from './SearchResultList';
 export {default as SearchResults} from './SearchResults';
 export {default as DiscoverUsers} from './DiscoverUsers';