aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/search/RecentSearches.tsx51
-rw-r--r--src/components/search/SearchResultCell.tsx33
-rw-r--r--src/components/search/SearchResultList.tsx1
-rw-r--r--src/components/search/SearchResults.tsx52
-rw-r--r--src/components/search/SearchResultsBackground.tsx13
5 files changed, 92 insertions, 58 deletions
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 6fb9fca9..b4cc5483 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,37 +7,45 @@ import {
TouchableOpacityProps,
ScrollView,
} from 'react-native';
-import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
+import {
+ PreviewType,
+ ProfilePreviewType,
+ ScreenType,
+ CategoryPreviewType,
+} from '../../types';
import {TAGG_LIGHT_BLUE} from '../../constants';
import SearchResults from './SearchResults';
import {SCREEN_HEIGHT} from '../../utils';
interface RecentSearchesProps extends TouchableOpacityProps {
sectionTitle: PreviewType;
- sectionButtonTitle: string;
recents: Array<ProfilePreviewType>;
+ recentCategories: CategoryPreviewType[];
screenType: ScreenType;
}
-/**
- * An image component that returns the <Image> of the icon for a specific social media platform.
- */
+
const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+ const {
+ sectionTitle,
+ recents,
+ recentCategories,
+ screenType,
+ } = props;
return (
<ScrollView
style={styles.mainContainer}
- contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
- <View style={styles.container}>
- <Text style={styles.title}>{props.sectionTitle}</Text>
- {props.sectionButtonTitle && (
- <TouchableOpacity {...props}>
- <Text style={styles.clear}>Clear all</Text>
- </TouchableOpacity>
- )}
+ contentContainerStyle={styles.contentContainer}>
+ <View style={styles.header}>
+ <Text style={styles.title}>{sectionTitle}</Text>
+ <TouchableOpacity {...props}>
+ <Text style={styles.clear}>Clear all</Text>
+ </TouchableOpacity>
</View>
<SearchResults
- results={props.recents}
- previewType={props.sectionTitle}
- screenType={props.screenType}
+ results={recents}
+ categories={recentCategories}
+ previewType={sectionTitle}
+ screenType={screenType}
/>
</ScrollView>
);
@@ -45,17 +53,20 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
const styles = StyleSheet.create({
mainContainer: {
- marginLeft: '3%',
- padding: 20,
+ flexGrow: 1,
+ },
+ contentContainer: {
+ paddingBottom: SCREEN_HEIGHT * 0.1,
},
- container: {
+ header: {
+ paddingHorizontal: 25,
+ paddingVertical: 5,
flexDirection: 'row',
},
title: {
fontSize: 18,
fontWeight: '600',
flexGrow: 1,
- marginBottom: '5%',
},
clear: {
fontSize: 18,
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 0f6f5b7d..e0351d96 100644
--- a/src/components/search/SearchResultCell.tsx
+++ b/src/components/search/SearchResultCell.tsx
@@ -6,7 +6,12 @@ import {useDispatch, useStore} from 'react-redux';
import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
import {loadImageFromURL} from '../../services';
import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {
+ ProfilePreviewType,
+ ScreenType,
+ UserType,
+ CategoryPreviewType,
+} from '../../types';
import {normalize, SCREEN_WIDTH} from '../../utils';
import {
addUserToRecentlyViewed,
@@ -14,6 +19,7 @@ import {
defaultUserProfile,
fetchUserX,
userXInStore,
+ addCategoryToRecentlySearched,
} from '../../utils/users';
interface SearchResults {
@@ -66,7 +72,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
return;
}
- await addUserToRecentlyViewed({
+ addUserToRecentlyViewed({
id,
first_name,
last_name,
@@ -99,6 +105,17 @@ const SearchResultsCell: React.FC<SearchResults> = ({
}
};
+ /*
+ * Save selected category in recently-searched categories and navigate to its Discover screen.
+ */
+ const onPressCategory = async () => {
+ const categoryObj: CategoryPreviewType = {name, category};
+ addCategoryToRecentlySearched(categoryObj);
+ navigation.navigate('DiscoverUsers', {
+ searchCategory: {id, name},
+ });
+ };
+
const userCell = () => {
return (
<TouchableOpacity
@@ -129,13 +146,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({
const categoryCell = () => {
return (
- <TouchableOpacity
- style={styles.cellContainer}
- onPress={() =>
- navigation.navigate('DiscoverUsers', {
- searchCategory: {id, name},
- })
- }>
+ <TouchableOpacity style={styles.cellContainer} onPress={onPressCategory}>
<View style={[styles.imageContainer, styles.categoryBackground]}>
<Image
resizeMode="contain"
@@ -156,8 +167,8 @@ const SearchResultsCell: React.FC<SearchResults> = ({
const styles = StyleSheet.create({
cellContainer: {
flexDirection: 'row',
- marginHorizontal: SCREEN_WIDTH * 0.08,
- marginBottom: SCREEN_WIDTH * 0.08,
+ paddingHorizontal: 25,
+ paddingVertical: 15,
},
imageContainer: {
width: SCREEN_WIDTH * 0.112,
diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx
index 14d5de6d..41c8c8b2 100644
--- a/src/components/search/SearchResultList.tsx
+++ b/src/components/search/SearchResultList.tsx
@@ -70,7 +70,6 @@ const SearchResultList: React.FC<SearchResultsProps> = ({
const styles = StyleSheet.create({
container: {
- marginTop: SCREEN_HEIGHT * 0.02,
height: SCREEN_HEIGHT,
},
sectionHeaderStyle: {
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index bf355220..798d3251 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,22 +1,33 @@
import React from 'react';
-import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import {
+ ProfilePreviewType,
+ PreviewType,
+ ScreenType,
+ CategoryPreviewType,
+} from '../../types';
import ProfilePreview from '../profile/ProfilePreview';
import {StyleSheet, View} from 'react-native';
+import SearchResultsCell from './SearchResultCell';
+import {useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
interface SearchResultsProps {
- results: Array<ProfilePreviewType>;
+ results: ProfilePreviewType[];
previewType: PreviewType;
screenType: ScreenType;
+ categories: CategoryPreviewType[];
}
const SearchResults: React.FC<SearchResultsProps> = ({
results,
previewType,
screenType,
+ categories,
}) => {
/**
* Added the following swicth case to make Results on Search and Recents screen a list
* Flex is love
*/
- var containerStyle;
+ const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+ let containerStyle;
switch (previewType) {
case 'Search':
containerStyle = styles.containerSearch;
@@ -29,25 +40,32 @@ const SearchResults: React.FC<SearchResultsProps> = ({
}
return (
<View style={containerStyle}>
- {results &&
- results.map((profilePreview) => (
- <ProfilePreview
- style={styles.result}
- key={profilePreview.id}
- {...{profilePreview}}
- previewType={previewType}
- screenType={screenType}
- />
- ))}
+ {categories.map((category: CategoryPreviewType) => (
+ <SearchResultsCell
+ key={category.name}
+ profileData={category}
+ {...{loggedInUser}}
+ />
+ ))}
+ {results.map((profile: ProfilePreviewType) => (
+ <SearchResultsCell
+ key={profile.id}
+ profileData={profile}
+ {...{loggedInUser}}
+ />
+ ))}
</View>
);
};
const styles = StyleSheet.create({
- containerSearch: {flexDirection: 'column', flexWrap: 'wrap'},
- container: {flexDirection: 'row', flexWrap: 'wrap'},
- result: {
- marginVertical: 10,
+ containerSearch: {
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ },
+ container: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
},
});
diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
index f6f40f52..25dcf781 100644
--- a/src/components/search/SearchResultsBackground.tsx
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -21,7 +21,7 @@ const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
return (
<Animated.View
style={[styles.container, {opacity: opacityBackground, top}]}>
- <Animated.View style={[styles.results, {opacity: opacityContent}]}>
+ <Animated.View style={{opacity: opacityContent}}>
{children}
</Animated.View>
</Animated.View>
@@ -33,15 +33,10 @@ const styles = StyleSheet.create({
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH,
position: 'absolute',
- backgroundColor: '#fff',
+ backgroundColor: 'white',
+ paddingTop: 60,
+ paddingBottom: 10,
zIndex: 0,
},
- contentContainer: {
- flexGrow: 1,
- paddingBottom: SCREEN_HEIGHT / 15,
- },
- results: {
- marginTop: StatusBarHeight,
- },
});
export default SearchResultsBackground;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 15:05:27 +0000