From 3214fc765cbce3c6f9092546424249d08622afb1 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:20:49 -0800 Subject: [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 --- src/components/comments/CommentTile.tsx | 2 +- src/components/profile/Followers.tsx | 2 +- src/components/profile/ProfilePreview.tsx | 140 +++++++++++++++++++++++------ src/components/search/DiscoverUsers.tsx | 46 ++++++++++ src/components/search/RecentSearches.tsx | 2 +- src/components/search/SearchResults.tsx | 12 +-- src/components/search/index.ts | 1 + src/constants/api.ts | 1 + src/routes/authentication/AuthProvider.tsx | 21 +++++ src/screens/search/SearchScreen.tsx | 29 ++---- src/services/ExploreServices.ts | 31 +++++++ src/services/index.ts | 1 + src/types/types.ts | 2 + 13 files changed, 229 insertions(+), 61 deletions(-) create mode 100644 src/components/search/DiscoverUsers.tsx create mode 100644 src/services/ExploreServices.ts (limited to 'src') 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 = ({comment_object}) => { first_name: '', last_name: '', }} - isComment={true} + previewType={'Comment'} /> {comment_object.comment} 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 = ({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 = ({ 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 = ({ }; 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 = ({ } }; - //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 ( + style={containerStyle}> = ({ : require('../../assets/images/avatar-placeholder.png') } /> - - {usernameToDisplay} - {first_name ? ( - {first_name.concat(' ', last_name)} - ) : ( - React.Fragment + + {(previewType === 'Search' || previewType === 'Recent') && ( + <> + {usernameToDisplay} + {first_name.concat(' ', last_name)} + + )} + {previewType === 'Comment' && ( + {usernameToDisplay} + )} + {previewType === 'Discover Users' && ( + <> + {first_name.concat(' ', last_name)} + {usernameToDisplay} + )} @@ -191,11 +232,23 @@ const ProfilePreview: React.FC = ({ }; 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; +} +/** + * An image component that returns the of the icon for a specific social media platform. + */ +const DiscoverUsers: React.FC = (props) => { + return ( + + + {props.sectionTitle} + + + + ); +}; + +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 = (props) => { )} - + ); }; 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; + previewType: PreviewType; } -const SearchResults: React.FC = ({results}) => { +const SearchResults: React.FC = (props) => { return ( - - {results.map((profilePreview) => ( + + {props.results.map((profilePreview) => ( ))} @@ -21,6 +22,7 @@ const SearchResults: React.FC = ({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; recentSearches: Array; + taggUsers: Array; newMomentsAvailable: boolean; updateMoments: (value: boolean) => void; socialsNeedUpdate: (_: string[]) => void; @@ -71,6 +73,7 @@ export const AuthContext = createContext({ 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 >([]); + const [taggUsers, setTaggUsers] = useState>([]); const [newMomentsAvailable, setNewMomentsAvailable] = useState(true); // Default update all integrated social lists on start const [socialsNeedUpdate, setSocialsNeedUpdate] = useState([ @@ -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 ( { } }, 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(''); const [results, setResults] = useState>([]); const [recents, setRecents] = useState>( @@ -137,19 +130,7 @@ const SearchScreen: React.FC = () => { /> {/* Removed for Alpha for now */} {/* */} - {/* - - Coming Soon - - We are working on constructing our explore suggestions. You can - still search users for now! - - - - */} + {results.length === 0 && recents.length !== 0 ? ( { recents={recents} /> ) : ( - + )} 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'; -- cgit v1.2.3-70-g09d2