From 0bb9f241a4e0ec6b9b22cb9b3b2e5b633b5e43c4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 2 Mar 2021 07:45:00 -0800 Subject: Initial --- src/components/search/Explore.tsx | 74 ---------------------------- src/components/search/ExploreSection.tsx | 54 --------------------- src/components/search/SearchCategories.tsx | 78 ++++++++++++++++++++++++++++++ src/components/search/index.ts | 2 +- src/routes/main/MainStackNavigator.tsx | 4 ++ src/routes/main/MainStackScreen.tsx | 8 +++ src/screens/search/DiscoverUsers.tsx | 67 +++++++++++++++++++++++++ src/screens/search/SearchScreen.tsx | 4 +- src/screens/search/index.ts | 1 + 9 files changed, 161 insertions(+), 131 deletions(-) delete mode 100644 src/components/search/Explore.tsx delete mode 100644 src/components/search/ExploreSection.tsx create mode 100644 src/components/search/SearchCategories.tsx create mode 100644 src/screens/search/DiscoverUsers.tsx (limited to 'src') diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx deleted file mode 100644 index 54bbe4b5..00000000 --- a/src/components/search/Explore.tsx +++ /dev/null @@ -1,74 +0,0 @@ -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 = () => { - // Get categories from backend - const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24']; - - return ( - - {categories && - categories.map((category) => ( - - { - console.log('Navigate to Discover Users!'); - }}> - {category} - - - ))} - - ); -}; - -const styles = StyleSheet.create({ - container: { - zIndex: 0, - top: '3%', - alignSelf: 'center', - flexDirection: 'row', - width: SCREEN_WIDTH * 0.9, - flexWrap: 'wrap', - justifyContent: 'space-evenly', - }, - gradientContainer: { - width: 159, - height: 38, - alignItems: 'center', - justifyContent: 'center', - marginVertical: '2.5%', - flexDirection: 'row', - alignContent: 'center', - borderRadius: 20, - borderColor: 'transparent', - borderWidth: 1, - }, - buttonContainer: { - backgroundColor: 'white', - width: 158, - height: 37, - borderRadius: 20, - borderColor: 'transparent', - borderWidth: 1, - flexDirection: 'row', - alignContent: 'center', - justifyContent: 'center', - }, - buttonText: { - fontWeight: '400', - fontSize: 15, - lineHeight: 17.9, - alignSelf: 'center', - color: '#828282', - }, -}); -export default Explore; 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 = ({title, users}) => { - return users && users.length !== 0 ? ( - - {title} - } - renderItem={({item: user}: {item: ProfilePreviewType}) => ( - - )} - showsHorizontalScrollIndicator={false} - horizontal - /> - - ) : ( - - ); -}; - -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/SearchCategories.tsx b/src/components/search/SearchCategories.tsx new file mode 100644 index 00000000..6df06007 --- /dev/null +++ b/src/components/search/SearchCategories.tsx @@ -0,0 +1,78 @@ +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 SearchCategories: React.FC = () => { + // Get categories from backend + const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24']; + const navigation = useNavigation(); + return ( + + {categories && + categories.map((searchCategory) => ( + + { + console.log('Sending: ', searchCategory); + navigation.navigate('DiscoverUsers', { + searchCategory, + }); + }}> + {searchCategory} + + + ))} + + ); +}; + +const styles = StyleSheet.create({ + container: { + zIndex: 0, + top: '3%', + alignSelf: 'center', + flexDirection: 'row', + width: SCREEN_WIDTH * 0.9, + flexWrap: 'wrap', + justifyContent: 'space-evenly', + }, + gradientContainer: { + width: 159, + height: 38, + alignItems: 'center', + justifyContent: 'center', + marginVertical: '2.5%', + flexDirection: 'row', + alignContent: 'center', + borderRadius: 20, + borderColor: 'transparent', + borderWidth: 1, + }, + buttonContainer: { + backgroundColor: 'white', + width: 158, + height: 37, + borderRadius: 20, + borderColor: 'transparent', + borderWidth: 1, + flexDirection: 'row', + alignContent: 'center', + justifyContent: 'center', + }, + buttonText: { + fontWeight: '400', + fontSize: 15, + lineHeight: 17.9, + alignSelf: 'center', + color: '#828282', + }, +}); +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, @@ -139,6 +140,13 @@ const MainStackScreen: React.FC = ({route}) => { initialParams={{screenType}} /> )} + ; +type DiscoverUsersNavigationProps = StackNavigationProp< + MainStackParams, + 'DiscoverUsers' +>; + +interface DiscoverUsersProps { + route: DiscoverUsersRouteProps; +} + +const DiscoverUsers: React.FC = ({route}) => { + const {searchCategory} = route.params; + // Make a function call to server to return users list in this search category + const users: ProfilePreviewType[] = []; + return ( + + + + {searchCategory} + } + renderItem={({item: user}: {item: ProfilePreviewType}) => ( + + )} + /> + + + ); +}; + +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 = () => { Try searching for people, groups, or clubs - + {results === undefined && recents.length !== 0 ? (