updated formatting, minor changes and integration testing

11 files changed, 218 insertions, 159 deletions

diff --git a/src/assets/images/bwbadges.png b/src/assets/images/bwbadges.png
new file mode 100644
index 00000000..3a337775
--- /dev/null
+++ b/src/assets/images/bwbadges.png
diff --git a/src/assets/images/bwbadges@2x.png b/src/assets/images/bwbadges@2x.png
new file mode 100644
index 00000000..60c2f995
--- /dev/null
+++ b/src/assets/images/bwbadges@2x.png
diff --git a/src/assets/images/bwbadges@3x.png b/src/assets/images/bwbadges@3x.png
new file mode 100644
index 00000000..874c0c4d
--- /dev/null
+++ b/src/assets/images/bwbadges@3x.png
diff --git a/src/assets/images/search.png b/src/assets/images/search.png
new file mode 100644
index 00000000..ba9906ba
--- /dev/null
+++ b/src/assets/images/search.png
diff --git a/src/assets/images/search@2x.png b/src/assets/images/search@2x.png
new file mode 100644
index 00000000..fa133ae1
--- /dev/null
+++ b/src/assets/images/search@2x.png
diff --git a/src/assets/images/search@3x.png b/src/assets/images/search@3x.png
new file mode 100644
index 00000000..3ea4ce15
--- /dev/null
+++ b/src/assets/images/search@3x.png
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;
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 57c26824..5e23ac7e 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -18,6 +18,7 @@ export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/';
 export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/';
 export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/';
 export const SEARCH_ENDPOINT: string = API_URL + 'search/';
+export const SEARCH_V2_ENDPOINT: string = API_URL + 'search/v2/';
 export const MOMENTS_ENDPOINT: string = API_URL + 'moments/';
 export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index c3bd9fec..39b0425d 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -21,7 +21,11 @@ import {
   SearchResultList,
   TabsGradient,
 } from '../../components';
-import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
+import {
+  SEARCH_ENDPOINT,
+  SEARCH_V2_ENDPOINT,
+  TAGG_LIGHT_BLUE,
+} from '../../constants';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
@@ -40,7 +44,7 @@ const NO_USER: UserType = {
 const SearchScreen: React.FC = () => {
   const {recentSearches} = useSelector((state: RootState) => state.taggUsers);
   const [query, setQuery] = useState<string>('');
-  const [results, setResults] = useState([]);
+  const [results, setResults] = useState(Array<any>());
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches ?? [],
   );
@@ -65,40 +69,62 @@ const SearchScreen: React.FC = () => {
       setResults([]);
       return;
     }
-    const loadResults = async (q: string) => {
-      // try {
-      //   const token = await AsyncStorage.getItem('token');
-      //   const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, {
-      //     method: 'GET',
-      //     headers: {
-      //       Authorization: 'Token ' + token,
-      //     },
-      //   });
-      //   const status = response.status;
-      //   if (status === 200) {
-      //     let searchResults = await response.json();
-      //     setResults(searchResults);
-      //     return;
-      //   }
-      //   setResults([]);
-      // } catch (error) {
-      //   console.log(error);
-      //   setResults([]);
-      // }
-      const searchResults = MockResults();
-      const sanitizedResult = [
-        {
-          title: 'categories',
-          data: searchResults.categories,
-        },
-        {
-          title: 'users',
-          data: searchResults.users,
-        },
-      ];
-      setResults(sanitizedResult);
-    };
-    loadResults(query);
+    // const loadResults = async (q: string) => {
+    //   try {
+    //     const token = await AsyncStorage.getItem('token');
+    //     const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, {
+    //       method: 'GET',
+    //       headers: {
+    //         Authorization: 'Token ' + token,
+    //       },
+    //     });
+    //     const {status} = response;
+    //     if (status === 200) {
+    //       const searchResults = await response.json();
+    //       const sanitizedResult = [
+    //         {
+    //           title: 'categories',
+    //           data: searchResults.categories,
+    //         },
+    //         {
+    //           title: 'users',
+    //           data: searchResults.users,
+    //         },
+    //       ];
+    //       setResults(sanitizedResult);
+    //     } else {
+    //       const searchResults = MockResults();
+    //       const sanitizedResult = [
+    //         {
+    //           title: 'categories',
+    //           data: searchResults.categories,
+    //         },
+    //         {
+    //           title: 'users',
+    //           data: searchResults.users,
+    //         },
+    //       ];
+    //       setResults(sanitizedResult);
+    //     }
+    //     setResults([]);
+    //   } catch (error) {
+    //     console.log(error);
+    //     setResults([]);
+    //   }
+    // };
+    const searchResults = MockResults();
+    const sanitizedResult = [
+      {
+        title: 'categories',
+        data: searchResults.categories,
+      },
+      {
+        title: 'users',
+        data: searchResults.users,
+      },
+    ];
+    setResults(sanitizedResult);
+    // loadResults(query);
   }, [query]);
 
   /**
@@ -175,7 +201,7 @@ const SearchScreen: React.FC = () => {
         />
         <Explore />
         <SearchResultsBackground {...{top}}>
-          {results && Object.keys(results).length === 0 ? (
+          {results && results.length === 0 ? (
             <RecentSearches
               sectionTitle="Recent"
               sectionButtonTitle="Clear all"
diff --git a/src/screens/search/mock.ts b/src/screens/search/mock.ts
index fafa34c9..d9909b22 100644
--- a/src/screens/search/mock.ts
+++ b/src/screens/search/mock.ts
@@ -4,18 +4,22 @@ const MockResults = () => {
       {
         id: 11,
         name: "Brown '21",
+        category: 'Brown',
       },
       {
         id: 12,
         name: "Brown '22",
+        category: 'Brown',
       },
       {
         id: 13,
         name: "Brown '23",
+        category: null,
       },
       {
         id: 14,
         name: "Brown '24",
+        category: null,
       },
     ],
     users: [