aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/profile/Content.tsx7
-rw-r--r--src/components/search/DiscoverUsers.tsx8
-rw-r--r--src/components/search/Explore.tsx35
-rw-r--r--src/components/search/SearchBar.tsx97
-rw-r--r--src/components/search/SearchCategories.tsx89
-rw-r--r--src/components/search/SearchHeader.tsx60
-rw-r--r--src/components/search/index.ts3
-rw-r--r--src/constants/api.ts1
-rw-r--r--src/constants/constants.ts1
-rw-r--r--src/routes/main/MainStackNavigator.tsx4
-rw-r--r--src/routes/main/MainStackScreen.tsx8
-rw-r--r--src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx4
-rw-r--r--src/screens/search/DiscoverUsers.tsx86
-rw-r--r--src/screens/search/SearchScreen.tsx139
-rw-r--r--src/screens/search/index.ts1
-rw-r--r--src/services/ExploreService.ts55
-rw-r--r--src/types/types.ts6
17 files changed, 369 insertions, 235 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/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..3096b343
--- /dev/null
+++ b/src/components/search/SearchCategories.tsx
@@ -0,0 +1,89 @@
+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
+ 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/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..3b73229f 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,59 @@ 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,
+ paddingTop: '2%',
+ paddingBottom: SCREEN_HEIGHT / 3,
+ paddingHorizontal: '3%',
},
searchBar: {
- paddingHorizontal: '3%',
+ paddingLeft: '3%',
},
header: {
marginVertical: 20,
@@ -216,7 +197,7 @@ const styles = StyleSheet.create({
flexGrow: 1,
},
clear: {
- fontSize: 17,
+ fontSize: normalize(17),
fontWeight: 'bold',
color: TAGG_LIGHT_BLUE,
},
@@ -229,7 +210,7 @@ const styles = StyleSheet.create({
},
headerText: {
color: '#fff',
- fontSize: 32,
+ fontSize: normalize(32),
fontWeight: '600',
textAlign: 'center',
marginBottom: '4%',
@@ -237,10 +218,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;
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:10:02 +0000