aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/search/DiscoverUsers.tsx86
-rw-r--r--src/screens/search/SearchScreen.tsx139
-rw-r--r--src/screens/search/index.ts1
3 files changed, 152 insertions, 74 deletions
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';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 02:44:46 +0000