aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/CommentTile.tsx2
-rw-r--r--src/components/profile/Followers.tsx2
-rw-r--r--src/components/profile/ProfilePreview.tsx140
-rw-r--r--src/components/search/DiscoverUsers.tsx46
-rw-r--r--src/components/search/RecentSearches.tsx2
-rw-r--r--src/components/search/SearchResults.tsx12
-rw-r--r--src/components/search/index.ts1
7 files changed, 168 insertions, 37 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';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-28 19:49:43 +0000