Initial

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';