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/profile/Followers.tsx | 2 +- src/components/profile/ProfilePreview.tsx | 140 +++++++++++++++++++++++------- 2 files changed, 112 insertions(+), 30 deletions(-) (limited to 'src/components/profile') 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; -- cgit v1.2.3-70-g09d2