updated formatting, minor changes and integration testing

2 files changed, 150 insertions, 122 deletions

diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 46d5ee44..cdeed922 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -1,100 +1,128 @@
-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 React, { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { loadImageFromURL } from '../../services';
+import { ProfilePreviewType } from '../../types';
+import { normalize, SCREEN_WIDTH } from '../../utils';
+import { defaultUserProfile } from '../../utils/users';
 
+interface SearchResults {
+  profileData: ProfilePreviewType;
+}
 
-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 SearchResultsCell: React.FC<SearchResults> = ({
+  profileData: {
+    id,
+    name,
+    username,
+    first_name,
+    last_name,
+    thumbnail_url,
+    category,
+  },
+}) => {
+  const [avatar, setAvatar] = useState('');
+  useEffect(() => {
+    (async () => {
+      if (thumbnail_url !== undefined) {
+        try {
+          const response = await loadImageFromURL(thumbnail_url);
+          if (response) {
+            setAvatar(response);
+          }
+        } catch (error) {
+          console.log('Error while downloading ', error);
+          throw error;
         }
-      })();
-    }, []);
-  
-    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>
+      }
+    })();
+  }, [thumbnail_url]);
+
+  const userCell = () => {
+    return (
+      <View style={styles.cellContainer}>
+        <Image
+          defaultSource={defaultUserProfile()}
+          source={{uri: avatar}}
+          style={styles.imageContainer}
+        />
+        <View style={[styles.initialTextContainer, styles.multiText]}>
+          <Text style={styles.initialTextStyle}>{`@${username}`}</Text>
+          <Text style={styles.secondaryTextStyle}>
+            {first_name + ' ' + last_name}
+          </Text>
         </View>
-      );
-    };
-  
-    const categoryCell = () => {
-      return (
-        <View
-          style={{
-            flexDirection: 'row',
-            marginHorizontal: 24,
-            marginBottom: 24,
-          }}>
+      </View>
+    );
+  };
+
+  const searchIcon = () => {
+    return require('../../assets/images/search.png');
+  };
+
+  const universityIcon = () => {
+    return require('../../assets/images/bwbadges.png');
+  };
+
+  const categoryCell = () => {
+    return (
+      <View style={styles.cellContainer}>
+        <View style={[styles.imageContainer, styles.categoryBackground]}>
           <Image
-            defaultSource={defaultUserProfile()}
-            source={{uri: avatar}}
-            style={{width: 42, height: 42, borderRadius: 21}}
+            resizeMode="contain"
+            source={category === 'Brown' ? universityIcon() : searchIcon()}
+            style={styles.categoryImage}
           />
-          <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()}
-      </>
+        <View style={styles.initialTextContainer}>
+          <Text style={styles.initialTextStyle}>{name}</Text>
+        </View>
+      </View>
     );
   };
 
-  export default SearchResultsCell
\ No newline at end of file
+  return (
+    <>
+      {name !== undefined && categoryCell()}
+      {name === undefined && userCell()}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  cellContainer: {
+    flexDirection: 'row',
+    marginHorizontal: SCREEN_WIDTH * 0.08,
+    marginBottom: SCREEN_WIDTH * 0.08,
+  },
+  imageContainer: {
+    width: SCREEN_WIDTH * 0.112,
+    height: SCREEN_WIDTH * 0.112,
+    borderRadius: (SCREEN_WIDTH * 0.112) / 2,
+  },
+  categoryBackground: {
+    backgroundColor: 'rgba(196, 196, 196, 0.45)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  categoryImage: {
+    width: '40%',
+    height: '40%',
+  },
+  initialTextContainer: {
+    marginLeft: SCREEN_WIDTH * 0.08,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  initialTextStyle: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+  },
+  secondaryTextStyle: {
+    fontWeight: '500',
+    fontSize: normalize(12),
+    color: '#828282',
+  },
+  multiText: {justifyContent: 'space-between'},
+});
+
+export default SearchResultsCell;
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
index 702ce7c8..c464e7b1 100644
--- a/src/components/search/SearchResultList.tsx
+++ b/src/components/search/SearchResultList.tsx
@@ -1,10 +1,11 @@
-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 React from 'react';
+import {
+  SectionList,
+  StyleSheet,
+  View
+} from 'react-native';
+import { PreviewType, ScreenType } from '../../types';
+import { normalize, SCREEN_HEIGHT } from '../../utils';
 import SearchResultsCell from './SearchResultCell';
 
 interface SearchResultsProps {
@@ -13,37 +14,36 @@ interface SearchResultsProps {
   screenType: ScreenType;
 }
 
+const sectionHeader: React.FC<Boolean> = (showBorder: Boolean) => {
+  if (showBorder) {
+    return <View style={styles.sectionHeaderStyle} />;
+  }
+  return null;
+};
+
 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>
+    <SectionList
+      contentContainerStyle={styles.container}
+      showsVerticalScrollIndicator={false}
+      sections={results}
+      keyExtractor={(item, index) => item + index}
+      renderItem={({item}) => <SearchResultsCell profileData={item} />}
+      renderSectionHeader={({section: {title}}) =>
+        sectionHeader(title !== 'categories')
+      }
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  containerSearch: {flexDirection: 'column', flexWrap: 'wrap'},
-  container: {flex: 1, marginTop: 24},
+  container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02},
+  sectionHeaderStyle: {
+    width: '100%',
+    height: 0.5,
+    marginBottom: normalize(24),
+    backgroundColor: '#C4C4C4',
+  },
 });
 
 export default SearchResultList;