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 + 7 files changed, 168 insertions(+), 37 deletions(-) create mode 100644 src/components/search/DiscoverUsers.tsx (limited to 'src/components') 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'; -- cgit v1.2.3-70-g09d2