From d1d1e218be52f3a509221f0ce4b5b42e682067cf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 1 Mar 2021 16:40:28 -0800 Subject: Created new search screen --- src/components/search/Explore.tsx | 73 ++++++++++++++----- src/components/search/SearchBar.tsx | 46 ++++-------- src/components/search/SearchHeader.tsx | 8 +-- src/screens/search/SearchScreen.tsx | 125 ++++++++++++++++++++------------- 4 files changed, 150 insertions(+), 102 deletions(-) (limited to 'src') diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx index 2a3bc749..54bbe4b5 100644 --- a/src/components/search/Explore.tsx +++ b/src/components/search/Explore.tsx @@ -1,20 +1,30 @@ import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; -import {useSelector} from 'react-redux'; -import {EXPLORE_SECTION_TITLES} from '../../constants'; -import {RootState} from '../../store/rootReducer'; -import {ExploreSectionType} from '../../types'; -import {normalize} from '../../utils'; -import ExploreSection from './ExploreSection'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; +import {SCREEN_WIDTH} from '../../utils'; const Explore: React.FC = () => { - const {explores} = useSelector((state: RootState) => state.taggUsers); + // Get categories from backend + const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24']; + return ( - Search Profiles - {explores && - EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => ( - + {categories && + categories.map((category) => ( + + { + console.log('Navigate to Discover Users!'); + }}> + {category} + + ))} ); @@ -23,13 +33,42 @@ const Explore: React.FC = () => { 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', }, - header: { - fontWeight: '700', - fontSize: normalize(22), - color: '#fff', - marginBottom: '2%', - margin: '5%', + buttonText: { + fontWeight: '400', + fontSize: 15, + lineHeight: 17.9, + alignSelf: 'center', + color: '#828282', }, }); export default Explore; diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 3f666ef0..dce1b40c 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -10,14 +10,9 @@ import { NativeSyntheticEvent, TextInputSubmitEditingEventData, } from 'react-native'; -import Animated, { - interpolate, - interpolateColors, -} from 'react-native-reanimated'; -import {SCREEN_HEIGHT} from '../../utils'; +import Animated from 'react-native-reanimated'; import Icon from 'react-native-vector-icons/Feather'; - -const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); +import {normalize} from 'react-native-elements'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); @@ -31,21 +26,8 @@ const SearchBar: React.FC = ({ onChangeText, value, onCancel, - top, style, }) => { - const opacity: Animated.Node = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); - const marginRight: Animated.Node = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 57], - }); - const color: Animated.Node = interpolateColors(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputColorRange: ['#fff', '#000'], - }); const handleSubmit = ( e: NativeSyntheticEvent, ) => { @@ -55,17 +37,17 @@ const SearchBar: React.FC = ({ return ( - + - = ({ {...{value, onChangeText, onFocus, onBlur}} /> - + Cancel - + ); }; @@ -86,6 +68,7 @@ const styles = StyleSheet.create({ container: { height: 40, flexDirection: 'row', + justifyContent: 'center', alignItems: 'stretch', zIndex: 2, }, @@ -94,9 +77,8 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, - borderWidth: 1.5, borderRadius: 20, - backgroundColor: '#fff3', + backgroundColor: '#F0F0F0', }, searchIcon: { marginRight: 8, @@ -104,8 +86,10 @@ const styles = StyleSheet.create({ input: { flex: 1, fontSize: 16, - color: '#fff', + color: '#828282', + letterSpacing: normalize(0.5), }, + cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'}, cancelButton: { position: 'absolute', height: '100%', diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx index 2a022f50..0d9f5973 100644 --- a/src/components/search/SearchHeader.tsx +++ b/src/components/search/SearchHeader.tsx @@ -25,17 +25,17 @@ const SearchHeader: React.FC = ({top, style}) => { }); return ( - + {/* Explore - - + */} + {/* Search - + */} ); }; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 70733d7e..e4ac4c9e 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -7,15 +7,16 @@ import { ScrollView, StatusBar, StyleSheet, + Text, + View, } from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; +import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import { Explore, RecentSearches, - SearchBackground, SearchBar, - SearchHeader, SearchResultList, SearchResultsBackground, TabsGradient, @@ -25,7 +26,7 @@ import {loadSearchResults} from '../../services'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Search Screen for user recommendations and a search @@ -148,60 +149,65 @@ const SearchScreen: React.FC = () => { }; return ( - - - - }> - - - - - - {results === undefined && recents.length !== 0 ? ( - - ) : ( - - )} - - - - + + + + + }> + + + Try searching for people, groups, or clubs + + + + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} + + + + + ); }; const styles = StyleSheet.create({ + mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT * 0.9}, contentContainer: { - paddingTop: StatusBarHeight, - paddingBottom: SCREEN_HEIGHT / 15, + paddingTop: '2%', + paddingBottom: SCREEN_HEIGHT / 3, + paddingHorizontal: '3%', }, searchBar: { - paddingHorizontal: '3%', + paddingLeft: '3%', }, header: { marginVertical: 20, @@ -215,6 +221,15 @@ const styles = StyleSheet.create({ fontWeight: 'bold', flexGrow: 1, }, + helperText: { + fontWeight: '400', + fontSize: 14, + lineHeight: normalize(16.71), + color: '#828282', + marginBottom: '2%', + margin: '2.5%', + textAlign: 'center', + }, clear: { fontSize: 17, fontWeight: 'bold', @@ -242,5 +257,15 @@ const styles = StyleSheet.create({ textAlign: 'center', marginHorizontal: '10%', }, + cancelButton: { + position: 'absolute', + height: '100%', + justifyContent: 'center', + paddingHorizontal: 5, + }, + cancelText: { + color: '#818181', + fontWeight: '600', + }, }); export default SearchScreen; -- cgit v1.2.3-70-g09d2 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 ? ( Date: Tue, 2 Mar 2021 07:48:11 -0800 Subject: temporary --- src/types/types.ts | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src') diff --git a/src/types/types.ts b/src/types/types.ts index 7cd11f7a..b8da03af 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -209,6 +209,12 @@ export type NotificationType = { export type TypeOfComment = 'Comment' | 'Thread'; +export type SearchCategoryType = + | "Brown '21" + | "Brown '22" + | "Brown '23" + | "Brown '24"; + export type TypeOfNotification = // notification_object is undefined | 'DFT' -- cgit v1.2.3-70-g09d2 From 42d16102073b0e7fea2377d71bf64cdf342a4999 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Mar 2021 11:31:56 -0800 Subject: removed search category type --- src/types/types.ts | 6 ------ 1 file changed, 6 deletions(-) (limited to 'src') diff --git a/src/types/types.ts b/src/types/types.ts index b8da03af..7cd11f7a 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -209,12 +209,6 @@ export type NotificationType = { export type TypeOfComment = 'Comment' | 'Thread'; -export type SearchCategoryType = - | "Brown '21" - | "Brown '22" - | "Brown '23" - | "Brown '24"; - export type TypeOfNotification = // notification_object is undefined | 'DFT' -- cgit v1.2.3-70-g09d2 From bb7794316b144ad1c6ea6d2e770be058af88ae5c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Mar 2021 11:32:50 -0800 Subject: re aligned helper text --- src/components/search/SearchBar.tsx | 65 +++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index dce1b40c..4dde22f0 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -13,6 +13,7 @@ import { import Animated from 'react-native-reanimated'; import Icon from 'react-native-vector-icons/Feather'; import {normalize} from 'react-native-elements'; +import {SCREEN_WIDTH} from '../../utils'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); @@ -36,31 +37,36 @@ const SearchBar: React.FC = ({ }; return ( - - - - - - - - Cancel - + <> + + + + + + + + Cancel + + - + + Try searching for "trending on tagg" + + ); }; @@ -100,6 +106,17 @@ const styles = StyleSheet.create({ color: '#818181', fontWeight: '600', }, + helperText: { + fontWeight: '400', + fontSize: 14, + lineHeight: normalize(16.71), + color: '#828282', + marginBottom: '2%', + marginHorizontal: '2.5%', + marginTop: '1%', + textAlign: 'center', + width: SCREEN_WIDTH * 0.74, + }, }); export default SearchBar; -- cgit v1.2.3-70-g09d2 From b6bf444dabb105db84eb45b9d77575755d4f3b58 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Mar 2021 11:33:51 -0800 Subject: Added categories to main search page --- src/components/search/SearchCategories.tsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index 6df06007..e905c195 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -6,8 +6,24 @@ 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 categories = [ + { + id: 4, + name: "Brown '21", + }, + { + id: 5, + name: "Brown '22", + }, + { + id: 6, + name: "Brown '23", + }, + { + id: 7, + name: "Brown '24", + }, + ]; const navigation = useNavigation(); return ( @@ -21,12 +37,11 @@ const SearchCategories: React.FC = () => { { - console.log('Sending: ', searchCategory); navigation.navigate('DiscoverUsers', { searchCategory, }); }}> - {searchCategory} + {searchCategory.name} ))} -- cgit v1.2.3-70-g09d2 From 26d70baab29919f999f0369277c7929e44f4d7b0 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Mar 2021 17:18:04 -0800 Subject: styles --- src/screens/search/DiscoverUsers.tsx | 65 ++++++++++++++++++++++++------------ src/screens/search/SearchScreen.tsx | 12 ------- 2 files changed, 44 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index ac5d8887..921c8b79 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import {FlatList, StatusBar, StyleSheet} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {FlatList, StatusBar, StyleSheet, View} 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'; @@ -8,8 +8,9 @@ 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'; +import {ProfilePreviewType} from '../../types'; +import ExploreSectionUser from '../../components/search/ExploreSectionUser'; +import {getDiscoverUsers} from '../../services/ExploreService'; type DiscoverUsersRouteProps = RouteProp; type DiscoverUsersNavigationProps = StackNavigationProp< @@ -22,21 +23,33 @@ interface DiscoverUsersProps { } 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[] = []; + const {id, name} = route.params.searchCategory; + const [users, setUsers] = useState(); + + useEffect(() => { + const loadData = async () => { + setUsers(await getDiscoverUsers(id)); + }; + loadData(); + }, []); + + const _renderItem = ({item: user}: {item: ProfilePreviewType}) => ( + + ); + return ( + {name} {searchCategory} - } - renderItem={({item: user}: {item: ProfilePreviewType}) => ( - - )} + style={styles.scrollView} + contentContainerStyle={styles.contentContainerStyle} + columnWrapperStyle={styles.columnWrapperStyle} + numColumns={3} + keyExtractor={(item) => item.id} + renderItem={_renderItem} /> @@ -44,23 +57,33 @@ const DiscoverUsers: React.FC = ({route}) => { }; const styles = StyleSheet.create({ - header: {width: SCREEN_WIDTH, backgroundColor: 'lightgreen'}, + header: {width: SCREEN_WIDTH}, headerText: { + top: HeaderHeight, + textAlign: 'center', color: '#fff', fontWeight: '600', fontSize: normalize(18), lineHeight: normalize(35), + marginBottom: '5%', }, scrollView: { - width: SCREEN_WIDTH * 0.9, - height: SCREEN_HEIGHT * 0.8, - alignItems: 'center', - marginHorizontal: '5%', - paddingBottom: '10%', + top: HeaderHeight, + width: SCREEN_WIDTH * 0.95, + height: SCREEN_HEIGHT * 0.75, + alignSelf: 'center', + flexDirection: 'column', }, - scrollViewContainer: {marginTop: HeaderHeight}, user: { - marginHorizontal: 5, + margin: '2%', + }, + columnWrapperStyle: { + width: SCREEN_WIDTH * 0.95, + justifyContent: 'space-between', + }, + contentContainerStyle: { + width: SCREEN_WIDTH * 0.95, + paddingBottom: 30, }, }); diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 5c59bc0e..87efc3fd 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -170,9 +170,6 @@ const SearchScreen: React.FC = () => { value={query} {...{top, searching}} /> - - Try searching for people, groups, or clubs - {results === undefined && recents.length !== 0 ? ( @@ -221,15 +218,6 @@ const styles = StyleSheet.create({ fontWeight: 'bold', flexGrow: 1, }, - helperText: { - fontWeight: '400', - fontSize: 14, - lineHeight: normalize(16.71), - color: '#828282', - marginBottom: '2%', - margin: '2.5%', - textAlign: 'center', - }, clear: { fontSize: 17, fontWeight: 'bold', -- cgit v1.2.3-70-g09d2 From 8fcc1b9c2d272bf36f2e9ffa24c7705a5e86b004 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Mar 2021 17:20:09 -0800 Subject: Service to get users for discover page --- src/services/ExploreService.ts | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index dc58bdd0..503782b1 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -1,6 +1,6 @@ import AsyncStorage from '@react-native-community/async-storage'; import {ALL_USERS_ENDPOINT, DISCOVER_ENDPOINT} from '../constants'; -import {EMPTY_EXPLORE_SECTIONS} from '../store/initialStates'; +import {EMPTY_PROFILE_PREVIEW_LIST} from '../store/initialStates'; import {ExploreSectionType, ProfilePreviewType} from '../types'; export const getAllTaggUsers = async (token: string) => { @@ -40,7 +40,7 @@ export const getAllExploreSections = async () => { }, }); if (response.status !== 200) { - return EMPTY_EXPLORE_SECTIONS; + return EMPTY_PROFILE_PREVIEW_LIST; } const data = await response.json(); const exploreSections: Record = { @@ -58,3 +58,26 @@ export const getAllExploreSections = async () => { console.log('Unable to fetch explore data'); } }; + +export const getDiscoverUsers = async (id: number) => { + try { + const token = await AsyncStorage.getItem('token'); + console.log('Auth: ', token); + const response = await fetch(DISCOVER_ENDPOINT + `${id}/`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status !== 200) { + return EMPTY_PROFILE_PREVIEW_LIST; + } + const data = await response.json(); + console.log('USERS: ', data); + return data.users; + } catch (error) { + console.log('Error fetching SP user data'); + console.log(error); + return []; + } +}; -- cgit v1.2.3-70-g09d2 From 39abcae6cc596e15a6c032064d166145f86eba0a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 15:28:29 -0800 Subject: Changed input color to black from 828282 --- src/components/search/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 4dde22f0..be0eecc7 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -92,7 +92,7 @@ const styles = StyleSheet.create({ input: { flex: 1, fontSize: 16, - color: '#828282', + color: '#000', letterSpacing: normalize(0.5), }, cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'}, -- cgit v1.2.3-70-g09d2 From e8f9338132d568be325763bb84bfd836d3ea78bf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 15:33:54 -0800 Subject: Added constant --- src/components/search/SearchCategories.tsx | 3 ++- src/constants/constants.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index e905c195..30de7e2c 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -3,6 +3,7 @@ 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 {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; const SearchCategories: React.FC = () => { @@ -30,7 +31,7 @@ const SearchCategories: React.FC = () => { {categories && categories.map((searchCategory) => ( diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 72eb1b57..6b513f4e 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -63,6 +63,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; export const TAGG_PURPLE = '#8F01FF'; export const TAGG_DARK_BLUE = '#4E699C'; export const TAGG_LIGHT_BLUE: string = '#698DD3'; +export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7'; export const TAGG_LIGHT_PURPLE = '#F4DDFF'; export const TAGGS_GRADIENT = { -- cgit v1.2.3-70-g09d2 From eae3879cc5e77d2860d7ae8742c0d3e79f86d864 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 15:37:05 -0800 Subject: removed unused file: SearchHeader --- src/components/search/SearchHeader.tsx | 60 ---------------------------------- src/components/search/index.ts | 1 - 2 files changed, 61 deletions(-) delete mode 100644 src/components/search/SearchHeader.tsx (limited to 'src') diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx deleted file mode 100644 index 0d9f5973..00000000 --- a/src/components/search/SearchHeader.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import {SCREEN_HEIGHT} from '../../utils'; -import {View, StyleSheet, ViewProps} from 'react-native'; -import Animated, { - Value, - interpolateColors, - interpolate, -} from 'react-native-reanimated'; - -interface SearchHeaderProps extends ViewProps { - top: Value; -} -const SearchHeader: React.FC = ({top, style}) => { - const color: Animated.Node = interpolateColors(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputColorRange: ['#fff', '#000'], - }); - const searchOpacity: Animated.Node = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); - const exploreOpacity: Animated.Node = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [1, 0], - }); - return ( - - {/* - - Explore - - */} - {/* - - Search - - */} - - ); -}; - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'center', - height: 30, - }, - headerContainer: { - position: 'absolute', - left: '50%', - }, - header: { - position: 'relative', - right: '50%%', - fontSize: 24, - fontWeight: 'bold', - }, -}); -export default SearchHeader; diff --git a/src/components/search/index.ts b/src/components/search/index.ts index d30c5c2a..a6289232 100644 --- a/src/components/search/index.ts +++ b/src/components/search/index.ts @@ -1,5 +1,4 @@ export {default as SearchBackground} from './SearchBackground'; -export {default as SearchHeader} from './SearchHeader'; export {default as SearchBar} from './SearchBar'; export {default as SearchCategories} from './SearchCategories'; export {default as SearchResultsBackground} from './SearchResultsBackground'; -- cgit v1.2.3-70-g09d2 From 1c77fc2f3ba8a3d88a5a81cfc9d0bcde2da0033b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 15:41:34 -0800 Subject: removed unnecessary nav prop --- src/screens/search/DiscoverUsers.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'src') diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index 921c8b79..09c00057 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -1,22 +1,17 @@ import React, {useEffect, useState} from 'react'; -import {FlatList, StatusBar, StyleSheet, View} from 'react-native'; +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 '../../types'; import ExploreSectionUser from '../../components/search/ExploreSectionUser'; import {getDiscoverUsers} from '../../services/ExploreService'; type DiscoverUsersRouteProps = RouteProp; -type DiscoverUsersNavigationProps = StackNavigationProp< - MainStackParams, - 'DiscoverUsers' ->; interface DiscoverUsersProps { route: DiscoverUsersRouteProps; -- cgit v1.2.3-70-g09d2 From f6a08ab2486c02c3555e54fff645a04e952d6fd1 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 15:55:52 -0800 Subject: Made view full screen and added tabs gradient --- src/screens/search/DiscoverUsers.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index 09c00057..a1b3322a 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -2,8 +2,8 @@ import React, {useEffect, useState} 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 {HeaderHeight, SCREEN_WIDTH} from '../../utils'; +import {SearchBackground, TabsGradient} from '../../components'; import {RouteProp} from '@react-navigation/native'; import {MainStackParams} from '../../routes'; import {normalize} from '../../utils'; @@ -45,7 +45,9 @@ const DiscoverUsers: React.FC = ({route}) => { numColumns={3} keyExtractor={(item) => item.id} renderItem={_renderItem} + showsVerticalScrollIndicator={false} /> + ); @@ -65,7 +67,6 @@ const styles = StyleSheet.create({ scrollView: { top: HeaderHeight, width: SCREEN_WIDTH * 0.95, - height: SCREEN_HEIGHT * 0.75, alignSelf: 'center', flexDirection: 'column', }, -- cgit v1.2.3-70-g09d2 From 2fd91821fccdf647193f5be1af87c6ef903096a1 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 16:13:23 -0800 Subject: lint --- src/components/profile/Content.tsx | 7 ++-- .../SuggestedPeopleOnboardingStackNavigator.tsx | 4 ++- src/screens/search/SearchScreen.tsx | 37 ++++------------------ 3 files changed, 13 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index ae9f9564..d4c50d5c 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -109,10 +109,9 @@ const Content: React.FC = ({y, userXId, screenType}) => { const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState( false, ); - const [ - isStageThreePromptClosed, - setIsStageThreePromptClosed, - ] = useState(false); + const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState< + boolean + >(false); const onRefresh = useCallback(() => { const refrestState = async () => { diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx index 737c503c..63547acb 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -8,4 +8,6 @@ export type SuggestedPeopleOnboardingStackParams = { BadgeSelection: undefined; }; -export const SuggestedPeopleOnboardingStack = createStackNavigator(); +export const SuggestedPeopleOnboardingStack = createStackNavigator< + SuggestedPeopleOnboardingStackParams +>(); diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 87efc3fd..1f8f88f0 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -1,20 +1,11 @@ import AsyncStorage from '@react-native-community/async-storage'; import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useEffect, useState} from 'react'; -import { - Keyboard, - RefreshControl, - ScrollView, - StatusBar, - StyleSheet, - Text, - View, -} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {Keyboard, ScrollView, StatusBar, StyleSheet, View} from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import { - SearchCategories, RecentSearches, SearchBar, SearchResultList, @@ -23,7 +14,7 @@ import { } from '../../components'; import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadSearchResults} from '../../services'; -import {loadRecentlySearched, resetScreenType} from '../../store/actions'; +import {resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; @@ -42,7 +33,6 @@ const SearchScreen: React.FC = () => { ); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); - const [refreshing, setRefreshing] = useState(false); const [keyboardVisible, setKeyboardVisible] = React.useState( 'keyboardVisible', ); @@ -59,16 +49,6 @@ const SearchScreen: React.FC = () => { }, []); const dispatch = useDispatch(); - const onRefresh = useCallback(() => { - const refrestState = async () => { - dispatch(loadRecentlySearched()); - }; - setRefreshing(true); - refrestState().then(() => { - setRefreshing(false); - }); - }, []); - useEffect(() => { if (query.length < 3) { setResults(undefined); @@ -157,10 +137,7 @@ const SearchScreen: React.FC = () => { keyboardShouldPersistTaps={'always'} stickyHeaderIndices={[4]} contentContainerStyle={styles.contentContainer} - showsVerticalScrollIndicator={false} - refreshControl={ - - }> + showsVerticalScrollIndicator={false}> Date: Fri, 5 Mar 2021 16:14:33 -0800 Subject: tabsgradient --- src/screens/search/SearchScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 1f8f88f0..d986b152 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -174,7 +174,7 @@ const SearchScreen: React.FC = () => { }; const styles = StyleSheet.create({ - mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT * 0.9}, + mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT}, contentContainer: { paddingTop: '2%', paddingBottom: SCREEN_HEIGHT / 3, -- cgit v1.2.3-70-g09d2 From 87e63726f79fd95b678e54247e96292ca1d33483 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com> Date: Fri, 5 Mar 2021 16:19:37 -0800 Subject: Update src/services/ExploreService.ts Co-authored-by: Ivan Chen --- src/services/ExploreService.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index 503782b1..26dccd18 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -62,7 +62,6 @@ export const getAllExploreSections = async () => { export const getDiscoverUsers = async (id: number) => { try { const token = await AsyncStorage.getItem('token'); - console.log('Auth: ', token); const response = await fetch(DISCOVER_ENDPOINT + `${id}/`, { method: 'GET', headers: { -- cgit v1.2.3-70-g09d2 From 241be3c97d5396d051071b04f53fc77e07509ae4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 16:23:45 -0800 Subject: added type --- src/services/ExploreService.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index 26dccd18..43c2a96a 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -72,8 +72,8 @@ export const getDiscoverUsers = async (id: number) => { return EMPTY_PROFILE_PREVIEW_LIST; } const data = await response.json(); - console.log('USERS: ', data); - return data.users; + const users: ProfilePreviewType[] = data.users; + return users; } catch (error) { console.log('Error fetching SP user data'); console.log(error); -- cgit v1.2.3-70-g09d2 From 7e1e9a443a7e38fdbe21129c3d3c853f75bd3162 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 16:58:21 -0800 Subject: getting buttons from backend for search page --- src/components/search/DiscoverUsers.tsx | 8 +------ src/components/search/SearchCategories.tsx | 36 +++++++++++++----------------- src/constants/api.ts | 1 + src/services/ExploreService.ts | 29 ++++++++++++++++++++++-- src/types/types.ts | 6 +++++ 5 files changed, 50 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/components/search/DiscoverUsers.tsx b/src/components/search/DiscoverUsers.tsx index ec0a8daa..93fcb02d 100644 --- a/src/components/search/DiscoverUsers.tsx +++ b/src/components/search/DiscoverUsers.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - View, - Text, - TouchableOpacity, - StyleSheet, - TouchableOpacityProps, -} from 'react-native'; +import {View, Text, StyleSheet, TouchableOpacityProps} from 'react-native'; import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import SearchResults from './SearchResults'; diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index 30de7e2c..b674c963 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -1,35 +1,29 @@ import {useNavigation} from '@react-navigation/native'; -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; +import {getButtons} from '../../services/ExploreService'; +import {SearchCategoryType} from 'src/types'; import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; const SearchCategories: React.FC = () => { - const categories = [ - { - id: 4, - name: "Brown '21", - }, - { - id: 5, - name: "Brown '22", - }, - { - id: 6, - name: "Brown '23", - }, - { - id: 7, - name: "Brown '24", - }, - ]; + const [buttons, setButtons] = useState([]); + useEffect(() => { + const loadButtons = async () => { + const localButtons = await getButtons(); + console.log('localButtons: ', localButtons); + await setButtons(localButtons); + }; + loadButtons(); + }, []); + const navigation = useNavigation(); return ( - {categories && - categories.map((searchCategory) => ( + {buttons && + buttons.map((searchCategory) => ( { try { @@ -80,3 +88,20 @@ export const getDiscoverUsers = async (id: number) => { return []; } }; + +export const getButtons = async () => { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(SEARCH_BUTTONS_ENDPOPINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + + if (response.status !== 200) { + return []; + } + + const data: SearchCategoryType[] = await response.json(); + return data; +}; diff --git a/src/types/types.ts b/src/types/types.ts index 7cd11f7a..8adeb9c1 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -245,3 +245,9 @@ export type FriendshipType = { status: FriendshipStatusType; requester_id: string; }; + +export type SearchCategoryType = { + id: number; + name: string; + category: string; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ab7613230603732251dd64607f2b85b21dcff1b7 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 17:00:38 -0800 Subject: done --- src/types/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/types/types.ts b/src/types/types.ts index 8adeb9c1..186cb4d5 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -250,4 +250,4 @@ export type SearchCategoryType = { id: number; name: string; category: string; -} \ No newline at end of file +}; -- cgit v1.2.3-70-g09d2 From 0f7d20710e8955a670eb46c1aa2ba4ca2208934e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 21:03:32 -0800 Subject: missed an import --- src/components/search/SearchCategories.tsx | 1 + src/screens/search/SearchScreen.tsx | 1 + 2 files changed, 2 insertions(+) (limited to 'src') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index b674c963..3096b343 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -31,6 +31,7 @@ const SearchCategories: React.FC = () => { style={styles.gradientContainer}> { navigation.navigate('DiscoverUsers', { searchCategory, diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index d986b152..3b73229f 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -8,6 +8,7 @@ import {useDispatch, useSelector} from 'react-redux'; import { RecentSearches, SearchBar, + SearchCategories, SearchResultList, SearchResultsBackground, TabsGradient, -- cgit v1.2.3-70-g09d2 From f49b0450482f181217bb11f7ad3018d3bdd067c1 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 21:25:51 -0800 Subject: fix --- src/components/profile/UniversityIcon.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index d4b9a5dd..48cfe3dc 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -14,7 +14,6 @@ export interface UniversityIconProps extends ViewProps { */ const UniversityIcon: React.FC = ({ style, - imageStyle, university, university_class, imageStyle, -- cgit v1.2.3-70-g09d2 From a64d8e1df2d87dc8472f8af6f205419012454d79 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Sat, 6 Mar 2021 00:52:22 -0500 Subject: fix layout --- src/components/search/SearchCategories.tsx | 1 + src/components/search/SearchResultList.tsx | 5 ++++- src/components/search/SearchResultsBackground.tsx | 2 +- src/screens/search/SearchScreen.tsx | 6 +++++- 4 files changed, 11 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index 3096b343..2883a541 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -25,6 +25,7 @@ const SearchCategories: React.FC = () => { {buttons && buttons.map((searchCategory) => ( = ({ const styles = StyleSheet.create({ container: { marginTop: SCREEN_HEIGHT * 0.02, + height: SCREEN_HEIGHT, }, sectionHeaderStyle: { width: '100%', @@ -78,7 +79,9 @@ const styles = StyleSheet.create({ marginBottom: normalize(24), backgroundColor: '#C4C4C4', }, - keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3}, + keyboardOpen: { + marginBottom: SCREEN_HEIGHT * 0.35, + }, noResultsTextContainer: { justifyContent: 'center', flexDirection: 'row', diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index c5fcc6fb..f6f40f52 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -41,7 +41,7 @@ const styles = StyleSheet.create({ paddingBottom: SCREEN_HEIGHT / 15, }, results: { - marginTop: StatusBarHeight + 110, + marginTop: StatusBarHeight, }, }); export default SearchResultsBackground; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 3b73229f..223fc2b2 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -175,8 +175,12 @@ const SearchScreen: React.FC = () => { }; const styles = StyleSheet.create({ - mainContainer: {backgroundColor: '#fff', height: SCREEN_HEIGHT}, + mainContainer: { + backgroundColor: '#fff', + height: SCREEN_HEIGHT, + }, contentContainer: { + height: SCREEN_HEIGHT * 0.9, paddingTop: '2%', paddingBottom: SCREEN_HEIGHT / 3, paddingHorizontal: '3%', -- cgit v1.2.3-70-g09d2 From 51e36759249413a2acd52e1fecf4661f5253cb89 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Mar 2021 22:07:54 -0800 Subject: navigating to discover on click on search res --- src/components/search/SearchResultCell.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 705fb5c9..0f6f5b7d 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -129,7 +129,13 @@ const SearchResultsCell: React.FC = ({ const categoryCell = () => { return ( - + + navigation.navigate('DiscoverUsers', { + searchCategory: {id, name}, + }) + }>