aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/search/ExploreSection.tsx54
-rw-r--r--src/components/search/SearchCategories.tsx (renamed from src/components/search/Explore.tsx)16
-rw-r--r--src/components/search/index.ts2
-rw-r--r--src/routes/main/MainStackNavigator.tsx4
-rw-r--r--src/routes/main/MainStackScreen.tsx8
-rw-r--r--src/screens/search/DiscoverUsers.tsx67
-rw-r--r--src/screens/search/SearchScreen.tsx4
-rw-r--r--src/screens/search/index.ts1
8 files changed, 93 insertions, 63 deletions
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
deleted file mode 100644
index e888370e..00000000
--- a/src/components/search/ExploreSection.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, {Fragment} from 'react';
-import {FlatList, StyleSheet, Text, View} from 'react-native';
-import {ProfilePreviewType} from '../../types';
-import {normalize} from '../../utils';
-import ExploreSectionUser from './ExploreSectionUser';
-
-/**
- * Search Screen for user recommendations and a search
- * tool to allow user to find other users
- */
-
-interface ExploreSectionProps {
- title: string;
- users: ProfilePreviewType[];
-}
-const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
- return users && users.length !== 0 ? (
- <View style={styles.container}>
- <Text style={styles.header}>{title}</Text>
- <FlatList
- data={users}
- ListHeaderComponent={<View style={styles.padding} />}
- renderItem={({item: user}: {item: ProfilePreviewType}) => (
- <ExploreSectionUser key={user.id} user={user} style={styles.user} />
- )}
- showsHorizontalScrollIndicator={false}
- horizontal
- />
- </View>
- ) : (
- <Fragment />
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- marginVertical: '5%',
- },
- header: {
- fontWeight: '600',
- fontSize: normalize(18),
- color: '#fff',
- marginLeft: '5%',
- marginBottom: '5%',
- },
- user: {
- marginHorizontal: 5,
- },
- padding: {
- width: 10,
- },
-});
-
-export default ExploreSection;
diff --git a/src/components/search/Explore.tsx b/src/components/search/SearchCategories.tsx
index 54bbe4b5..6df06007 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -1,17 +1,18 @@
+import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import {SCREEN_WIDTH} from '../../utils';
-const Explore: React.FC = () => {
+const SearchCategories: React.FC = () => {
// Get categories from backend
const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24'];
-
+ const navigation = useNavigation();
return (
<View style={styles.container}>
{categories &&
- categories.map((category) => (
+ categories.map((searchCategory) => (
<LinearGradient
colors={['#8000FF', '#00FFFF']}
start={{x: 0.0, y: 1.0}}
@@ -20,9 +21,12 @@ const Explore: React.FC = () => {
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => {
- console.log('Navigate to Discover Users!');
+ console.log('Sending: ', searchCategory);
+ navigation.navigate('DiscoverUsers', {
+ searchCategory,
+ });
}}>
- <Text style={styles.buttonText}>{category}</Text>
+ <Text style={styles.buttonText}>{searchCategory}</Text>
</TouchableOpacity>
</LinearGradient>
))}
@@ -71,4 +75,4 @@ const styles = StyleSheet.create({
color: '#828282',
},
});
-export default Explore;
+export default SearchCategories;
diff --git a/src/components/search/index.ts b/src/components/search/index.ts
index 7418f0ba..d30c5c2a 100644
--- a/src/components/search/index.ts
+++ b/src/components/search/index.ts
@@ -1,7 +1,7 @@
export {default as SearchBackground} from './SearchBackground';
export {default as SearchHeader} from './SearchHeader';
export {default as SearchBar} from './SearchBar';
-export {default as Explore} from './Explore';
+export {default as SearchCategories} from './SearchCategories';
export {default as SearchResultsBackground} from './SearchResultsBackground';
export {default as SearchResultList} from './SearchResultList';
export {default as SearchResults} from './SearchResults';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 901dd993..e271837f 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -7,6 +7,7 @@ import {
CategorySelectionScreenType,
MomentType,
ScreenType,
+ SearchCategoryType,
UserType,
} from '../../types';
@@ -20,6 +21,9 @@ export type MainStackParams = {
RequestContactsAccess: {
screenType: ScreenType;
};
+ DiscoverUsers: {
+ searchCategory: SearchCategoryType;
+ };
Profile: {
userXId: string | undefined;
screenType: ScreenType;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 91ed2f70..730ba1c8 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -11,6 +11,7 @@ import {
CaptionScreen,
CategorySelection,
CreateCustomCategory,
+ DiscoverUsers,
EditProfile,
FriendsListScreen,
IndividualMoment,
@@ -140,6 +141,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
/>
)}
<MainStack.Screen
+ name="DiscoverUsers"
+ component={DiscoverUsers}
+ options={{
+ ...headerBarOptions('white', 'Discover Users'),
+ }}
+ />
+ <MainStack.Screen
name="AnimatedTutorial"
component={AnimatedTutorial}
options={{
diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
new file mode 100644
index 00000000..ac5d8887
--- /dev/null
+++ b/src/screens/search/DiscoverUsers.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {FlatList, StatusBar, StyleSheet} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {SearchBackground} from '../../components';
+import {RouteProp} from '@react-navigation/native';
+import {MainStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {normalize} from '../../utils';
+import {ProfilePreviewType} from 'src/types';
+import ExploreSectionUser from 'src/components/search/ExploreSectionUser';
+
+type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
+type DiscoverUsersNavigationProps = StackNavigationProp<
+ MainStackParams,
+ 'DiscoverUsers'
+>;
+
+interface DiscoverUsersProps {
+ route: DiscoverUsersRouteProps;
+}
+
+const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
+ const {searchCategory} = route.params;
+ // Make a function call to server to return users list in this search category
+ const users: ProfilePreviewType[] = [];
+ return (
+ <SearchBackground>
+ <StatusBar barStyle="light-content" />
+ <SafeAreaView>
+ <FlatList
+ data={users}
+ ListHeaderComponent={
+ <Text style={styles.headerText}>{searchCategory}</Text>
+ }
+ renderItem={({item: user}: {item: ProfilePreviewType}) => (
+ <ExploreSectionUser key={user.id} user={user} style={styles.user} />
+ )}
+ />
+ </SafeAreaView>
+ </SearchBackground>
+ );
+};
+
+const styles = StyleSheet.create({
+ header: {width: SCREEN_WIDTH, backgroundColor: 'lightgreen'},
+ headerText: {
+ color: '#fff',
+ fontWeight: '600',
+ fontSize: normalize(18),
+ lineHeight: normalize(35),
+ },
+ scrollView: {
+ width: SCREEN_WIDTH * 0.9,
+ height: SCREEN_HEIGHT * 0.8,
+ alignItems: 'center',
+ marginHorizontal: '5%',
+ paddingBottom: '10%',
+ },
+ scrollViewContainer: {marginTop: HeaderHeight},
+ user: {
+ marginHorizontal: 5,
+ },
+});
+
+export default DiscoverUsers;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index e4ac4c9e..5c59bc0e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -14,7 +14,7 @@ import Animated, {Easing, timing} from 'react-native-reanimated';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import {
- Explore,
+ SearchCategories,
RecentSearches,
SearchBar,
SearchResultList,
@@ -173,7 +173,7 @@ const SearchScreen: React.FC = () => {
<Text style={styles.helperText}>
Try searching for people, groups, or clubs
</Text>
- <Explore />
+ <SearchCategories />
<SearchResultsBackground {...{top}}>
{results === undefined && recents.length !== 0 ? (
<RecentSearches
diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts
index d5eb9c3e..d127db72 100644
--- a/src/screens/search/index.ts
+++ b/src/screens/search/index.ts
@@ -1,2 +1,3 @@
export {default as SearchScreen} from './SearchScreen';
export {default as RequestContactsAccess} from './RequestContactsAccess';
+export {default as DiscoverUsers} from './DiscoverUsers';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:45:11 +0000