diff options
21 files changed, 386 insertions, 239 deletions
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<ContentProps> = ({y, userXId, screenType}) => { const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>( false, ); - const [ - isStageThreePromptClosed, - setIsStageThreePromptClosed, - ] = useState<boolean>(false); + const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState< + boolean + >(false); const onRefresh = useCallback(() => { const refrestState = async () => { 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<UniversityIconProps> = ({ style, - imageStyle, university, university_class, imageStyle, 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/Explore.tsx b/src/components/search/Explore.tsx deleted file mode 100644 index 2a3bc749..00000000 --- a/src/components/search/Explore.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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'; - -const Explore: React.FC = () => { - const {explores} = useSelector((state: RootState) => state.taggUsers); - return ( - <View style={styles.container}> - <Text style={styles.header}>Search Profiles</Text> - {explores && - EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => ( - <ExploreSection key={title} title={title} users={explores[title]} /> - ))} - </View> - ); -}; - -const styles = StyleSheet.create({ - container: { - zIndex: 0, - }, - header: { - fontWeight: '700', - fontSize: normalize(22), - color: '#fff', - marginBottom: '2%', - margin: '5%', - }, -}); -export default Explore; diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 3f666ef0..be0eecc7 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -10,14 +10,10 @@ 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'; +import {SCREEN_WIDTH} from '../../utils'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); @@ -31,21 +27,8 @@ const SearchBar: React.FC<SearchBarProps> = ({ onChangeText, value, onCancel, - top, style, }) => { - const opacity: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); - const marginRight: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 57], - }); - const color: Animated.Node<number> = interpolateColors(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputColorRange: ['#fff', '#000'], - }); const handleSubmit = ( e: NativeSyntheticEvent<TextInputSubmitEditingEventData>, ) => { @@ -54,31 +37,36 @@ const SearchBar: React.FC<SearchBarProps> = ({ }; return ( - <View style={[styles.container, style]}> - <Animated.View style={[styles.inputContainer, {borderColor: color}]}> - <AnimatedIcon - name="search" - color={color} - size={25} - style={styles.searchIcon} - /> - <AnimatedTextInput - style={[styles.input, {color}]} - placeholder={'Search...'} - placeholderTextColor={'#fff'} - onSubmitEditing={handleSubmit} - clearButtonMode="while-editing" - autoCapitalize="none" - autoCorrect={false} - {...{value, onChangeText, onFocus, onBlur}} - /> - </Animated.View> - <Animated.View style={{opacity, marginRight}}> - <TouchableOpacity style={styles.cancelButton} onPress={onCancel}> - <Text style={styles.cancelText}>Cancel</Text> - </TouchableOpacity> - </Animated.View> - </View> + <> + <View style={[styles.container, style]}> + <Animated.View style={[styles.inputContainer]}> + <AnimatedIcon + name="search" + color={'#7E7E7E'} + size={25} + style={styles.searchIcon} + /> + <TextInput + style={[styles.input]} + placeholder={'Search'} + placeholderTextColor={'#828282'} + onSubmitEditing={handleSubmit} + clearButtonMode="while-editing" + autoCapitalize="none" + autoCorrect={false} + {...{value, onChangeText, onFocus, onBlur}} + /> + </Animated.View> + <View style={styles.cancelButtonView}> + <TouchableOpacity style={styles.cancelButton} onPress={onCancel}> + <Text style={styles.cancelText}>Cancel</Text> + </TouchableOpacity> + </View> + </View> + <Text style={styles.helperText}> + Try searching for "trending on tagg" + </Text> + </> ); }; @@ -86,6 +74,7 @@ const styles = StyleSheet.create({ container: { height: 40, flexDirection: 'row', + justifyContent: 'center', alignItems: 'stretch', zIndex: 2, }, @@ -94,9 +83,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 +92,10 @@ const styles = StyleSheet.create({ input: { flex: 1, fontSize: 16, - color: '#fff', + color: '#000', + letterSpacing: normalize(0.5), }, + cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'}, cancelButton: { position: 'absolute', height: '100%', @@ -116,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; diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx new file mode 100644 index 00000000..2883a541 --- /dev/null +++ b/src/components/search/SearchCategories.tsx @@ -0,0 +1,90 @@ +import {useNavigation} from '@react-navigation/native'; +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 [buttons, setButtons] = useState<SearchCategoryType[]>([]); + useEffect(() => { + const loadButtons = async () => { + const localButtons = await getButtons(); + console.log('localButtons: ', localButtons); + await setButtons(localButtons); + }; + loadButtons(); + }, []); + + const navigation = useNavigation(); + return ( + <View style={styles.container}> + {buttons && + buttons.map((searchCategory) => ( + <LinearGradient + key={searchCategory.id} + colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]} + start={{x: 0.0, y: 1.0}} + end={{x: 1.0, y: 1.0}} + style={styles.gradientContainer}> + <TouchableOpacity + style={styles.buttonContainer} + key={searchCategory.id} + onPress={() => { + navigation.navigate('DiscoverUsers', { + searchCategory, + }); + }}> + <Text style={styles.buttonText}>{searchCategory.name}</Text> + </TouchableOpacity> + </LinearGradient> + ))} + </View> + ); +}; + +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/SearchHeader.tsx b/src/components/search/SearchHeader.tsx deleted file mode 100644 index 2a022f50..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<number>; -} -const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => { - const color: Animated.Node<number> = interpolateColors(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputColorRange: ['#fff', '#000'], - }); - const searchOpacity: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [0, 1], - }); - const exploreOpacity: Animated.Node<number> = interpolate(top, { - inputRange: [-SCREEN_HEIGHT, 0], - outputRange: [1, 0], - }); - return ( - <View style={[styles.container, style]}> - <View style={styles.headerContainer}> - <Animated.Text - style={[styles.header, {opacity: exploreOpacity, color}]}> - Explore - </Animated.Text> - </View> - <View style={styles.headerContainer}> - <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}> - Search - </Animated.Text> - </View> - </View> - ); -}; - -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/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<SearchResults> = ({ const categoryCell = () => { return ( - <TouchableOpacity style={styles.cellContainer}> + <TouchableOpacity + style={styles.cellContainer} + onPress={() => + navigation.navigate('DiscoverUsers', { + searchCategory: {id, name}, + }) + }> <View style={[styles.imageContainer, styles.categoryBackground]}> <Image resizeMode="contain" diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index a3d9c8c5..14d5de6d 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -71,6 +71,7 @@ const SearchResultList: React.FC<SearchResultsProps> = ({ 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/components/search/index.ts b/src/components/search/index.ts index 7418f0ba..a6289232 100644 --- a/src/components/search/index.ts +++ b/src/components/search/index.ts @@ -1,7 +1,6 @@ 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/constants/api.ts b/src/constants/api.ts index ab1ace74..127ef432 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -30,6 +30,7 @@ export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/'; export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/'; export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; +export const SEARCH_BUTTONS_ENDPOPINT: string = DISCOVER_ENDPOINT + 'search_buttons/'; export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/'; export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/'; export const ADD_USER_BADGES: string = API_URL + 'suggested_people/add_badges/'; 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 = { diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 5cbe55d6..8953cfe0 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 50802d06..7104b429 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -12,6 +12,7 @@ import { CaptionScreen, CategorySelection, CreateCustomCategory, + DiscoverUsers, EditProfile, FriendsListScreen, IndividualMoment, @@ -141,6 +142,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/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<SuggestedPeopleOnboardingStackParams>(); +export const SuggestedPeopleOnboardingStack = createStackNavigator< + SuggestedPeopleOnboardingStackParams +>(); diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx new file mode 100644 index 00000000..a1b3322a --- /dev/null +++ b/src/screens/search/DiscoverUsers.tsx @@ -0,0 +1,86 @@ +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_WIDTH} from '../../utils'; +import {SearchBackground, TabsGradient} from '../../components'; +import {RouteProp} from '@react-navigation/native'; +import {MainStackParams} from '../../routes'; +import {normalize} from '../../utils'; +import {ProfilePreviewType} from '../../types'; +import ExploreSectionUser from '../../components/search/ExploreSectionUser'; +import {getDiscoverUsers} from '../../services/ExploreService'; + +type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>; + +interface DiscoverUsersProps { + route: DiscoverUsersRouteProps; +} + +const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => { + const {id, name} = route.params.searchCategory; + const [users, setUsers] = useState<ProfilePreviewType[]>(); + + useEffect(() => { + const loadData = async () => { + setUsers(await getDiscoverUsers(id)); + }; + loadData(); + }, []); + + const _renderItem = ({item: user}: {item: ProfilePreviewType}) => ( + <ExploreSectionUser key={user.id} user={user} style={styles.user} /> + ); + + return ( + <SearchBackground> + <StatusBar barStyle="light-content" /> + <SafeAreaView> + <Text style={styles.headerText}>{name}</Text> + <FlatList + data={users} + style={styles.scrollView} + contentContainerStyle={styles.contentContainerStyle} + columnWrapperStyle={styles.columnWrapperStyle} + numColumns={3} + keyExtractor={(item) => item.id} + renderItem={_renderItem} + showsVerticalScrollIndicator={false} + /> + <TabsGradient /> + </SafeAreaView> + </SearchBackground> + ); +}; + +const styles = StyleSheet.create({ + header: {width: SCREEN_WIDTH}, + headerText: { + top: HeaderHeight, + textAlign: 'center', + color: '#fff', + fontWeight: '600', + fontSize: normalize(18), + lineHeight: normalize(35), + marginBottom: '5%', + }, + scrollView: { + top: HeaderHeight, + width: SCREEN_WIDTH * 0.95, + alignSelf: 'center', + flexDirection: 'column', + }, + user: { + margin: '2%', + }, + columnWrapperStyle: { + width: SCREEN_WIDTH * 0.95, + justifyContent: 'space-between', + }, + contentContainerStyle: { + width: SCREEN_WIDTH * 0.95, + paddingBottom: 30, + }, +}); + +export default DiscoverUsers; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 70733d7e..223fc2b2 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -1,31 +1,24 @@ 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, -} 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 { - Explore, RecentSearches, - SearchBackground, SearchBar, - SearchHeader, + SearchCategories, SearchResultList, SearchResultsBackground, TabsGradient, } 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 {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Search Screen for user recommendations and a search @@ -41,7 +34,6 @@ const SearchScreen: React.FC = () => { ); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); - const [refreshing, setRefreshing] = useState<boolean>(false); const [keyboardVisible, setKeyboardVisible] = React.useState( 'keyboardVisible', ); @@ -58,16 +50,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); @@ -148,60 +130,63 @@ const SearchScreen: React.FC = () => { }; return ( - <SearchBackground> - <StatusBar barStyle="dark-content" /> - <ScrollView - scrollEnabled={!searching} - keyboardShouldPersistTaps={'always'} - stickyHeaderIndices={[4]} - contentContainerStyle={styles.contentContainer} - showsVerticalScrollIndicator={false} - refreshControl={ - <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> - }> - <SearchHeader style={styles.header} {...{top}} /> - <SearchBar - style={styles.searchBar} - onCancel={handleBlur} - onChangeText={handleUpdate} - onBlur={Keyboard.dismiss} - onFocus={handleFocus} - value={query} - {...{top, searching}} - /> - <Explore /> - - <SearchResultsBackground {...{top}}> - {results === undefined && recents.length !== 0 ? ( - <RecentSearches - sectionTitle="Recent" - sectionButtonTitle="Clear all" - onPress={clearRecentlySearched} - recents={recents} - screenType={ScreenType.Search} - /> - ) : ( - <SearchResultList - {...{results}} - keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'} - previewType={'Search'} - screenType={ScreenType.Search} - /> - )} - </SearchResultsBackground> - </ScrollView> - <TabsGradient /> - </SearchBackground> + <View style={styles.mainContainer}> + <SafeAreaView> + <StatusBar barStyle="dark-content" /> + <ScrollView + scrollEnabled={!searching} + keyboardShouldPersistTaps={'always'} + stickyHeaderIndices={[4]} + contentContainerStyle={styles.contentContainer} + showsVerticalScrollIndicator={false}> + <SearchBar + style={styles.searchBar} + onCancel={handleBlur} + onChangeText={handleUpdate} + onBlur={Keyboard.dismiss} + onFocus={handleFocus} + value={query} + {...{top, searching}} + /> + <SearchCategories /> + <SearchResultsBackground {...{top}}> + {results === undefined && recents.length !== 0 ? ( + <RecentSearches + sectionTitle="Recent" + sectionButtonTitle="Clear all" + onPress={clearRecentlySearched} + recents={recents} + screenType={ScreenType.Search} + /> + ) : ( + <SearchResultList + {...{results}} + keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'} + previewType={'Search'} + screenType={ScreenType.Search} + /> + )} + </SearchResultsBackground> + </ScrollView> + <TabsGradient /> + </SafeAreaView> + </View> ); }; const styles = StyleSheet.create({ + mainContainer: { + backgroundColor: '#fff', + height: SCREEN_HEIGHT, + }, contentContainer: { - paddingTop: StatusBarHeight, - paddingBottom: SCREEN_HEIGHT / 15, + height: SCREEN_HEIGHT * 0.9, + paddingTop: '2%', + paddingBottom: SCREEN_HEIGHT / 3, + paddingHorizontal: '3%', }, searchBar: { - paddingHorizontal: '3%', + paddingLeft: '3%', }, header: { marginVertical: 20, @@ -216,7 +201,7 @@ const styles = StyleSheet.create({ flexGrow: 1, }, clear: { - fontSize: 17, + fontSize: normalize(17), fontWeight: 'bold', color: TAGG_LIGHT_BLUE, }, @@ -229,7 +214,7 @@ const styles = StyleSheet.create({ }, headerText: { color: '#fff', - fontSize: 32, + fontSize: normalize(32), fontWeight: '600', textAlign: 'center', marginBottom: '4%', @@ -237,10 +222,20 @@ const styles = StyleSheet.create({ }, subtext: { color: '#fff', - fontSize: 16, + fontSize: normalize(16), fontWeight: '600', textAlign: 'center', marginHorizontal: '10%', }, + cancelButton: { + position: 'absolute', + height: '100%', + justifyContent: 'center', + paddingHorizontal: 5, + }, + cancelText: { + color: '#818181', + fontWeight: '600', + }, }); export default SearchScreen; 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'; diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index dc58bdd0..33b79b4a 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -1,7 +1,15 @@ import AsyncStorage from '@react-native-community/async-storage'; -import {ALL_USERS_ENDPOINT, DISCOVER_ENDPOINT} from '../constants'; -import {EMPTY_EXPLORE_SECTIONS} from '../store/initialStates'; -import {ExploreSectionType, ProfilePreviewType} from '../types'; +import { + ALL_USERS_ENDPOINT, + DISCOVER_ENDPOINT, + SEARCH_BUTTONS_ENDPOPINT, +} from '../constants'; +import {EMPTY_PROFILE_PREVIEW_LIST} from '../store/initialStates'; +import { + ExploreSectionType, + ProfilePreviewType, + SearchCategoryType, +} from '../types'; export const getAllTaggUsers = async (token: string) => { try { @@ -40,7 +48,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<ExploreSectionType, ProfilePreviewType[]> = { @@ -58,3 +66,42 @@ export const getAllExploreSections = async () => { console.log('Unable to fetch explore data'); } }; + +export const getDiscoverUsers = async (id: number) => { + try { + const token = await AsyncStorage.getItem('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(); + const users: ProfilePreviewType[] = data.users; + return users; + } catch (error) { + console.log('Error fetching SP user data'); + console.log(error); + 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..186cb4d5 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; +}; |