TMA-663-Updated Search init

8 files changed, 307 insertions, 23 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';
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 84efa931..c3bd9fec 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -18,6 +18,7 @@ import {
   SearchHeader,
   SearchResults,
   SearchResultsBackground,
+  SearchResultList,
   TabsGradient,
 } from '../../components';
 import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
@@ -25,6 +26,7 @@ import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import MockResults from './mock';
 const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -38,7 +40,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<Array<ProfilePreviewType>>([]);
+  const [results, setResults] = useState([]);
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches ?? [],
   );
@@ -64,25 +66,37 @@ const SearchScreen: React.FC = () => {
       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([]);
-      }
+      // 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);
   }, [query]);
@@ -161,7 +175,7 @@ const SearchScreen: React.FC = () => {
         />
         <Explore />
         <SearchResultsBackground {...{top}}>
-          {results.length === 0 && recents.length !== 0 ? (
+          {results && Object.keys(results).length === 0 ? (
             <RecentSearches
               sectionTitle="Recent"
               sectionButtonTitle="Clear all"
@@ -170,7 +184,7 @@ const SearchScreen: React.FC = () => {
               screenType={ScreenType.Search}
             />
           ) : (
-            <SearchResults
+            <SearchResultList
               {...{results}}
               previewType={'Search'}
               screenType={ScreenType.Search}
diff --git a/src/screens/search/mock.ts b/src/screens/search/mock.ts
new file mode 100644
index 00000000..fafa34c9
--- /dev/null
+++ b/src/screens/search/mock.ts
@@ -0,0 +1,114 @@
+const MockResults = () => {
+  return {
+    categories: [
+      {
+        id: 11,
+        name: "Brown '21",
+      },
+      {
+        id: 12,
+        name: "Brown '22",
+      },
+      {
+        id: 13,
+        name: "Brown '23",
+      },
+      {
+        id: 14,
+        name: "Brown '24",
+      },
+    ],
+    users: [
+      {
+        id: 'd5295557-59ce-49fc-aa8a-442874dbffc3',
+        username: 'foobar',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-d5295557-59ce-49fc-aa8a-442874dbffc3-thumbnail.jpg',
+      },
+      {
+        id: '31e93eb5-ccc9-4743-b053-eff368e23fa8',
+        username: 'foobar2',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-31e93eb5-ccc9-4743-b053-eff368e23fa8-thumbnail.jpg',
+      },
+      {
+        id: 'b1b68df9-97ac-48de-b00d-eab10a6a644a',
+        username: 'foobar3',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b1b68df9-97ac-48de-b00d-eab10a6a644a-thumbnail.jpg',
+      },
+      {
+        id: 'b89c88b3-6b2f-4b6c-85d9-a03ff5396113',
+        username: 'foobar4',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b89c88b3-6b2f-4b6c-85d9-a03ff5396113-thumbnail.jpg',
+      },
+      {
+        id: '73b4496a-0aa8-4115-98da-2070bf326134',
+        username: 'foobar5',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-73b4496a-0aa8-4115-98da-2070bf326134-thumbnail.jpg',
+      },
+      {
+        id: '329763b8-931e-4d4d-8a07-003374d38497',
+        username: 'foobar6',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-329763b8-931e-4d4d-8a07-003374d38497-thumbnail.jpg',
+      },
+      {
+        id: '9e82fea2-cddc-41e1-be05-6873f58138ca',
+        username: 'foobar7',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-9e82fea2-cddc-41e1-be05-6873f58138ca-thumbnail.jpg',
+      },
+      {
+        id: '6e5b8892-4384-45a1-bc0a-8f2c9d614fbc',
+        username: 'foobar8',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-6e5b8892-4384-45a1-bc0a-8f2c9d614fbc-thumbnail.jpg',
+      },
+      {
+        id: 'c49b01c6-9151-4654-8fae-834adfa15727',
+        username: 'foobar9',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-c49b01c6-9151-4654-8fae-834adfa15727-thumbnail.jpg',
+      },
+      {
+        id: '5b394d5b-62e3-405e-8ecd-7433517ef688',
+        username: 'foobar10',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-5b394d5b-62e3-405e-8ecd-7433517ef688-thumbnail.jpg',
+      },
+      {
+        id: '698e38f0-24ed-404c-9f0c-6a24e43af576',
+        username: 'fooo',
+        first_name: 'wefwef',
+        last_name: 'wefwef',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-698e38f0-24ed-404c-9f0c-6a24e43af576-thumbnail.jpg',
+      },
+    ],
+  };
+};
+
+export default MockResults;
diff --git a/src/utils/users.ts b/src/utils/users.ts
index ca917ae4..b8faf206 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -159,3 +159,8 @@ export const checkIfUserIsBlocked = async (
   }
   return await isUserBlocked(userId, loggedInUser.userId, token);
 };
+
+export const defaultUserProfile = () => {
+  const defaultImage = require('../assets/images/avatar-placeholder.png');
+  return defaultImage;
+};