[TMA-375] Added discover users to explore (#119)

* Added discover users to explore

* Filtered following users out

* Removed reload button and filtering following users from discover page

* Wrapped contents

* Preview type in types.ts

13 files changed, 229 insertions, 61 deletions

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 02840d47..bee590f5 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -25,7 +25,7 @@ const CommentTile: React.FC<CommentTileProps> = ({comment_object}) => {
           first_name: '',
           last_name: '',
         }}
-        isComment={true}
+        previewType={'Comment'}
       />
       <View style={styles.body}>
         <Text style={styles.comment}>{comment_object.comment}</Text>
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx
index 6f56c03c..e11041d0 100644
--- a/src/components/profile/Followers.tsx
+++ b/src/components/profile/Followers.tsx
@@ -30,7 +30,7 @@ const Followers: React.FC<FollowersListProps> = ({result, sectionTitle}) => {
           style={styles.follower}
           key={profilePreview.id}
           {...{profilePreview}}
-          isComment={true}
+          previewType={'Comment'}
         />
       ))}
     </>
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index abc29422..af116dd3 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -13,7 +13,7 @@ import {useNavigation} from '@react-navigation/native';
 import RNFetchBlob from 'rn-fetch-blob';
 import AsyncStorage from '@react-native-community/async-storage';
 import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
-import {UserType} from '../../types';
+import {UserType, PreviewType} from '../../types';
 import {AuthContext} from '../../routes/';
 import {isUserBlocked} from '../../services';
 const NO_USER: UserType = {
@@ -33,12 +33,11 @@ const NO_USER: UserType = {
 
 interface ProfilePreviewProps extends ViewProps {
   profilePreview: ProfilePreviewType;
-  isComment: boolean;
+  previewType: PreviewType;
 }
 const ProfilePreview: React.FC<ProfilePreviewProps> = ({
   profilePreview: {username, first_name, last_name, id},
-  isComment,
-  style,
+  previewType,
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser, logout} = React.useContext(AuthContext);
@@ -103,13 +102,13 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     };
 
     try {
-      //If the logged in user is blocked by the user being viewed, do not proceed.
-      const isUserBlocked = await checkIfUserIsBlocked(user.id);
-      if (isUserBlocked) {
-        Alert.alert('You cannot view this profile');
-        return;
-      }
-      if (!isComment) {
+      if (previewType !== 'Comment') {
+        //If the logged in user is blocked by the user being viewed, do not proceed.
+        const isUserBlocked = await checkIfUserIsBlocked(user.id);
+        if (isUserBlocked) {
+          Alert.alert('You cannot view this profile');
+          return;
+        }
         const jsonValue = await AsyncStorage.getItem(
           '@recently_searched_users',
         );
@@ -158,18 +157,51 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     }
   };
 
-  //With @ sign if on search screen.
-  const usernameToDisplay = !isComment ? '@' + username : username;
-  const usernameStyle = isComment
-    ? styles.commentUsername
-    : styles.searchUsername;
+  var containerStyle,
+    avatarStyle,
+    nameContainerStyle,
+    usernameToDisplay,
+    usernameStyle,
+    nameStyle;
 
-  const avatarStyle = !isComment ? styles.searchAvatar : styles.commentAvatar;
+  switch (previewType) {
+    case 'Search' || 'Recent':
+      containerStyle = styles.searchResultContainer;
+      avatarStyle = styles.searchResultAvatar;
+      nameContainerStyle = styles.searchResultNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.searchResultUsername;
+      nameStyle = styles.searchResultName;
+      break;
+    case 'Discover Users':
+      containerStyle = styles.discoverUsersContainer;
+      avatarStyle = styles.discoverUsersAvatar;
+      nameContainerStyle = styles.discoverUsersNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.discoverUsersUsername;
+      nameStyle = styles.discoverUsersName;
+      break;
+    case 'Comment':
+      containerStyle = styles.commentContainer;
+      avatarStyle = styles.commentAvatar;
+      nameContainerStyle = styles.commentNameContainer;
+      usernameToDisplay = username;
+      usernameStyle = styles.commentUsername;
+      nameStyle = styles.commentName;
+      break;
+    default:
+      containerStyle = styles.searchResultContainer;
+      avatarStyle = styles.searchResultAvatar;
+      nameContainerStyle = styles.searchResultNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.searchResultUsername;
+      nameStyle = styles.searchResultName;
+  }
 
   return (
     <TouchableOpacity
       onPress={addToRecentlyStoredAndNavigateToProfile}
-      style={[styles.container, style]}>
+      style={containerStyle}>
       <Image
         style={avatarStyle}
         source={
@@ -178,12 +210,21 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-      <View style={styles.nameContainer}>
-        <Text style={usernameStyle}>{usernameToDisplay}</Text>
-        {first_name ? (
-          <Text style={styles.name}>{first_name.concat(' ', last_name)}</Text>
-        ) : (
-          React.Fragment
+      <View style={nameContainerStyle}>
+        {(previewType === 'Search' || previewType === 'Recent') && (
+          <>
+            <Text style={usernameStyle}>{usernameToDisplay}</Text>
+            <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
+          </>
+        )}
+        {previewType === 'Comment' && (
+          <Text style={usernameStyle}>{usernameToDisplay}</Text>
+        )}
+        {previewType === 'Discover Users' && (
+          <>
+            <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
+            <Text style={usernameStyle}>{usernameToDisplay}</Text>
+          </>
         )}
       </View>
     </TouchableOpacity>
@@ -191,11 +232,23 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
+  searchResultContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginVertical: 10,
   },
-  searchAvatar: {
+  commentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  discoverUsersContainer: {
+    alignItems: 'center',
+    textAlign: 'center',
+    margin: '0.5%',
+    width: '32%',
+    marginVertical: 10,
+  },
+  searchResultAvatar: {
     height: 60,
     width: 60,
     borderRadius: 30,
@@ -208,11 +261,24 @@ const styles = StyleSheet.create({
     marginRight: 15,
     marginTop: '2%',
   },
-  nameContainer: {
+  discoverUsersAvatar: {
+    height: 60,
+    width: 60,
+    borderRadius: 30,
+  },
+  searchResultNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  commentNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  discoverUsersNameContainer: {
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
-  searchUsername: {
+  searchResultUsername: {
     fontSize: 18,
     fontWeight: '500',
   },
@@ -220,10 +286,26 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '500',
   },
-  name: {
+  discoverUsersUsername: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: 'white',
+    textAlign: 'center',
+  },
+  searchResultName: {
+    fontSize: 16,
+    color: '#333',
+  },
+  commentName: {
     fontSize: 16,
     color: '#333',
   },
+  discoverUsersName: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: 'white',
+    textAlign: 'center',
+  },
 });
 
 export default ProfilePreview;
diff --git a/src/components/search/DiscoverUsers.tsx b/src/components/search/DiscoverUsers.tsx
new file mode 100644
index 00000000..885c712b
--- /dev/null
+++ b/src/components/search/DiscoverUsers.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TouchableOpacityProps,
+} from 'react-native';
+import {ProfilePreviewType} from '../../types';
+import SearchResults from './SearchResults';
+
+interface DiscoverUsersProps extends TouchableOpacityProps {
+  sectionTitle: string;
+  users: Array<ProfilePreviewType>;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const DiscoverUsers: React.FC<DiscoverUsersProps> = (props) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>{props.sectionTitle}</Text>
+      </View>
+      <SearchResults results={props.users} previewType={props.sectionTitle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: '5%',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    marginBottom: '1%',
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: 'bold',
+    flexGrow: 1,
+    color: 'white',
+  },
+});
+
+export default DiscoverUsers;
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index f47f8879..6a98e49a 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -29,7 +29,7 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
           </TouchableOpacity>
         )}
       </View>
-      <SearchResults results={props.recents} />
+      <SearchResults results={props.recents} previewType={props.sectionTitle} />
     </>
   );
 };
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index 57db4167..2d5c9db8 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
-import {ProfilePreviewType} from '../../types';
+import {ProfilePreviewType, PreviewType} from '../../types';
 import ProfilePreview from '../profile/ProfilePreview';
 import {StyleSheet, View} from 'react-native';
 interface SearchResultsProps {
   results: Array<ProfilePreviewType>;
+  previewType: PreviewType;
 }
-const SearchResults: React.FC<SearchResultsProps> = ({results}) => {
+const SearchResults: React.FC<SearchResultsProps> = (props) => {
   return (
-    <View>
-      {results.map((profilePreview) => (
+    <View style={styles.container}>
+      {props.results.map((profilePreview) => (
         <ProfilePreview
           style={styles.result}
           key={profilePreview.id}
           {...{profilePreview}}
-          isComment={false}
+          previewType={props.previewType}
         />
       ))}
     </View>
@@ -21,6 +22,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({results}) => {
 };
 
 const styles = StyleSheet.create({
+  container: {flexDirection: 'row', flexWrap: 'wrap'},
   result: {
     marginVertical: 10,
   },
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
index 47dccd8b..08052f77 100644
--- a/src/components/search/index.ts
+++ b/src/components/search/index.ts
@@ -4,3 +4,4 @@ export {default as SearchBar} from './SearchBar';
 export {default as Explore} from './Explore';
 export {default as SearchResultsBackground} from './SearchResultsBackground';
 export {default as SearchResults} from './SearchResults';
+export {default as DiscoverUsers} from './DiscoverUsers';
diff --git a/src/constants/api.ts b/src/constants/api.ts
index eac529c4..d3047e55 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -21,6 +21,7 @@ export const FOLLOW_USER_ENDPOINT: string = API_URL + 'follow/';
 export const UNFOLLOW_USER_ENDPOINT: string = API_URL + 'unfollow/';
 export const FOLLOWERS_ENDPOINT: string = API_URL + 'followers/';
 export const FOLLOWING_ENDPOINT: string = API_URL + 'following/';
+export const ALL_USERS_ENDPOINT: string = API_URL + 'users/';
 export const REPORT_ISSUE_ENDPOINT: string = API_URL + 'report/';
 export const BLOCK_USER_ENDPOINT: string = API_URL + 'block/';
 
diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index 7046d04f..46f761e1 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -10,6 +10,7 @@ import {
   loadProfileInfo,
   loadRecentlySearchedUsers,
   loadSocialPosts,
+  getAllTaggUsers,
   loadBlockedUsers,
 } from '../../services';
 import {
@@ -29,6 +30,7 @@ interface AuthContextProps {
   cover: string | null;
   socialAccounts: Record<string, SocialAccountType>;
   recentSearches: Array<ProfilePreviewType>;
+  taggUsers: Array<ProfilePreviewType>;
   newMomentsAvailable: boolean;
   updateMoments: (value: boolean) => void;
   socialsNeedUpdate: (_: string[]) => void;
@@ -71,6 +73,7 @@ export const AuthContext = createContext<AuthContextProps>({
   avatar: null,
   cover: null,
   recentSearches: [],
+  taggUsers: [],
   newMomentsAvailable: true,
   updateMoments: () => {},
   socialAccounts: NO_SOCIAL_ACCOUNTS,
@@ -101,6 +104,7 @@ const AuthProvider: React.FC = ({children}) => {
   const [recentSearches, setRecentSearches] = useState<
     Array<ProfilePreviewType>
   >([]);
+  const [taggUsers, setTaggUsers] = useState<Array<ProfilePreviewType>>([]);
   const [newMomentsAvailable, setNewMomentsAvailable] = useState<boolean>(true);
   // Default update all integrated social lists on start
   const [socialsNeedUpdate, setSocialsNeedUpdate] = useState<string[]>([
@@ -236,6 +240,22 @@ const AuthProvider: React.FC = ({children}) => {
     userId,
     setBlockedUsers,
   ]);
+            
+   useEffect(() => {
+    const loadTaggUsers = async () => {
+      try {
+        const token = await AsyncStorage.getItem('token');
+        if (!token) {
+          setUser(NO_USER);
+          return;
+        }
+        await getAllTaggUsers(token, setTaggUsers);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    loadTaggUsers();
+  }, [userId]);
 
   return (
     <AuthContext.Provider
@@ -270,6 +290,7 @@ const AuthProvider: React.FC = ({children}) => {
           }
         },
         recentSearches,
+        taggUsers,
         updateMoments: (value) => {
           setNewMomentsAvailable(value);
         },
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index aef3d0a8..535b964c 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,16 +1,9 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import React, {useEffect, useState} from 'react';
-import {
-  Image,
-  Keyboard,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {Keyboard, ScrollView, StatusBar, StyleSheet} from 'react-native';
 import Animated, {Easing, timing} from 'react-native-reanimated';
 import {
+  DiscoverUsers,
   RecentSearches,
   SearchBackground,
   SearchBar,
@@ -34,7 +27,7 @@ const NO_USER: UserType = {
  */
 
 const SearchScreen: React.FC = () => {
-  const {recentSearches} = React.useContext(AuthContext);
+  const {recentSearches, taggUsers} = React.useContext(AuthContext);
   const [query, setQuery] = useState<string>('');
   const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
@@ -137,19 +130,7 @@ const SearchScreen: React.FC = () => {
         />
         {/* Removed for Alpha for now */}
         {/* <Explore /> */}
-        {/* <View>
-          <View style={styles.textContainer}>
-            <Text style={styles.headerText}>Coming Soon</Text>
-            <Text style={styles.subtext}>
-              We are working on constructing our explore suggestions. You can
-              still search users for now!
-            </Text>
-          </View>
-          <Image
-            source={require('../../assets/images/coming-soon.png')}
-            style={styles.image}
-          />
-        </View> */}
+        <DiscoverUsers sectionTitle="Discover Users" users={taggUsers} />
         <SearchResultsBackground {...{top}}>
           {results.length === 0 && recents.length !== 0 ? (
             <RecentSearches
@@ -159,7 +140,7 @@ const SearchScreen: React.FC = () => {
               recents={recents}
             />
           ) : (
-            <SearchResults {...{results}} />
+            <SearchResults {...{results}} previewType={'Search'} />
           )}
         </SearchResultsBackground>
       </ScrollView>
diff --git a/src/services/ExploreServices.ts b/src/services/ExploreServices.ts
new file mode 100644
index 00000000..7c242d57
--- /dev/null
+++ b/src/services/ExploreServices.ts
@@ -0,0 +1,31 @@
+import {ALL_USERS_ENDPOINT} from '../constants';
+
+export const getAllTaggUsers = async (
+  token: string,
+  setTaggUsers: Function,
+) => {
+  try {
+    const response = await fetch(ALL_USERS_ENDPOINT, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    const status = response.status;
+    if (status === 200) {
+      const response_data = await response.json();
+      setTaggUsers(response_data);
+    } else {
+      console.log(
+        'Something went wrong! 😭',
+        'Not able to retrieve tagg users list',
+      );
+    }
+  } catch (error) {
+    console.log(
+      'Something went wrong! 😭',
+      'Not able to retrieve tagg users list',
+      error,
+    );
+  }
+};
diff --git a/src/services/index.ts b/src/services/index.ts
index 016511b3..bce3a75a 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,6 +1,7 @@
 export * from './UserProfileService';
 export * from './SocialLinkingService';
 export * from './MomentServices';
+export * from './ExploreServices';
 export * from './UserFollowServices';
 export * from './ReportingService';
 export * from './BlockUserService';
diff --git a/src/types/types.ts b/src/types/types.ts
index 8336919e..7d0cf318 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -85,3 +85,5 @@ export interface CommentType {
   commenter__id: string;
   commenter__username: string;
 }
+
+export type PreviewType = 'Comment' | 'Search' | 'Recent' | 'Discover Users';