aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/search/DiscoverUsers.tsx124
-rw-r--r--src/screens/search/SearchScreen.tsx72
2 files changed, 149 insertions, 47 deletions
diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx
index ce7507fc..b87bfc37 100644
--- a/src/screens/search/DiscoverUsers.tsx
+++ b/src/screens/search/DiscoverUsers.tsx
@@ -1,15 +1,26 @@
+import {RouteProp, useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {FlatList, StatusBar, StyleSheet} from 'react-native';
-import {Text} from 'react-native-animatable';
+import {Image, Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
-import {HeaderHeight, SCREEN_HEIGHT, 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 {
+ SearchBackground,
+ SearchCategories,
+ TabsGradient,
+ TaggLoadingIndicator,
+} from '../../components';
import ExploreSectionUser from '../../components/search/ExploreSectionUser';
+import {headerBarOptions, MainStackParams} from '../../routes';
import {getDiscoverUsers} from '../../services/ExploreService';
+import {ProfilePreviewType} from '../../types';
+import {
+ HeaderHeight,
+ normalize,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+ shuffle,
+} from '../../utils';
type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
@@ -18,16 +29,81 @@ interface DiscoverUsersProps {
}
const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
- const {type: category_type} = route.params;
- const {id, name} = route.params.searchCategory;
- const [users, setUsers] = useState<ProfilePreviewType[]>();
+ const {name} = route.params.searchCategory;
+ const [categoryName, setCategoryName] = useState<string | undefined>();
+ const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+ const [shouldRefresh, setShouldRefresh] = useState(false);
+ const [showIcon1, setShowIcon1] = useState(true);
+ const mtUser = (key: number) => ({
+ id: key,
+ username: '...',
+ first_name: '',
+ last_name: '',
+ thumbnail_url: '',
+ });
+ const dummyUsers = [
+ mtUser(-1),
+ mtUser(-2),
+ mtUser(-3),
+ mtUser(-4),
+ mtUser(-5),
+ mtUser(-6),
+ mtUser(-7),
+ mtUser(-8),
+ mtUser(-9),
+ ];
+ const [loading, setLoading] = useState(true);
+ const navigation = useNavigation();
+
+ navigation.setOptions({
+ ...headerBarOptions('white', name),
+ headerRight: () => (
+ <TouchableOpacity
+ onPress={() => {
+ setShowIcon1(!showIcon1);
+ setShouldRefresh(true);
+ }}>
+ <Image
+ source={
+ showIcon1
+ ? require('../../assets/images/shuffle-1.png')
+ : require('../../assets/images/shuffle-2.png')
+ }
+ style={styles.shuffleIcon}
+ />
+ </TouchableOpacity>
+ ),
+ });
+
+ useEffect(() => {
+ setCategoryName(name);
+ }, []);
+
+ useEffect(() => {
+ if (shouldRefresh) {
+ setLoading(true);
+ setTimeout(() => {
+ setUsers(shuffle(users));
+ setShouldRefresh(false);
+ setLoading(false);
+ }, 500);
+ }
+ }, [shouldRefresh, users]);
useEffect(() => {
const loadData = async () => {
- setUsers(await getDiscoverUsers(id, category_type));
+ setLoading(true);
+ if (!categoryName) {
+ return;
+ }
+ const fetched_users = await getDiscoverUsers(categoryName);
+ if (fetched_users) {
+ setUsers(fetched_users);
+ }
+ setLoading(false);
};
loadData();
- }, []);
+ }, [categoryName]);
const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
<ExploreSectionUser key={user.id} user={user} style={styles.user} />
@@ -37,9 +113,9 @@ const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
<SearchBackground>
<StatusBar barStyle="light-content" />
<SafeAreaView>
- <Text style={styles.headerText}>{name}</Text>
+ {loading && <TaggLoadingIndicator fullscreen={true} />}
<FlatList
- data={users}
+ data={loading ? dummyUsers : users.slice(0, 9)}
style={styles.scrollView}
contentContainerStyle={styles.contentContainerStyle}
columnWrapperStyle={styles.columnWrapperStyle}
@@ -47,6 +123,12 @@ const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
keyExtractor={(item) => item.id}
renderItem={_renderItem}
showsVerticalScrollIndicator={false}
+ ListFooterComponent={() => (
+ <>
+ <Text style={styles.otherGroups}>Other Groups</Text>
+ <SearchCategories darkStyle={true} />
+ </>
+ )}
/>
<TabsGradient />
</SafeAreaView>
@@ -67,6 +149,7 @@ const styles = StyleSheet.create({
},
scrollView: {
top: HeaderHeight,
+ marginTop: '10%',
width: SCREEN_WIDTH * 0.95,
height: SCREEN_HEIGHT - HeaderHeight,
alignSelf: 'center',
@@ -83,6 +166,19 @@ const styles = StyleSheet.create({
width: SCREEN_WIDTH * 0.95,
paddingBottom: SCREEN_HEIGHT * 0.2,
},
+ otherGroups: {
+ color: 'white',
+ fontSize: normalize(18),
+ fontWeight: '600',
+ lineHeight: normalize(35),
+ alignSelf: 'center',
+ marginTop: 20,
+ },
+ shuffleIcon: {
+ width: 40,
+ height: 40,
+ marginRight: 20,
+ },
});
export default DiscoverUsers;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 728510c5..65ec3934 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -17,8 +17,19 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
import {loadSearchResults} from '../../services';
import {resetScreenType} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+ CategoryPreviewType,
+ ProfilePreviewType,
+ ScreenType,
+ SearchCategoryType,
+} from '../../types';
+import {
+ getRecentlySearchedCategories,
+ getRecentlySearchedUsers,
+ normalize,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
/**
* Search Screen for user recommendations and a search
@@ -37,6 +48,11 @@ const SearchScreen: React.FC = () => {
>([]);
const [searching, setSearching] = useState(false);
const top = Animated.useValue(-SCREEN_HEIGHT);
+ const defaultButtons: SearchCategoryType[] = [21, 22, 23, 24].map((year) => ({
+ id: -1,
+ name: `Brown '${year}`,
+ category: 'Brown',
+ }));
const [keyboardVisible, setKeyboardVisible] = React.useState(
'keyboardVisible',
);
@@ -57,10 +73,11 @@ const SearchScreen: React.FC = () => {
* Main handler for changes in query.
*/
useEffect(() => {
- if (!searching) return;
- if (!query.length) loadRecentSearches();
+ if (!searching) {
+ return;
+ }
if (query.length < 3) {
- setResults(undefined);
+ loadRecentlySearched().then(() => setResults(undefined));
return;
}
(async () => {
@@ -101,7 +118,9 @@ const SearchScreen: React.FC = () => {
// when searching state changes, run animation and reset query accordingly
useEffect(() => {
if (searching) {
- timing(top, topInConfig).start();
+ loadRecentlySearched().then(() => {
+ timing(top, topInConfig).start();
+ });
} else {
setQuery('');
handleBlur();
@@ -109,36 +128,23 @@ const SearchScreen: React.FC = () => {
}
}, [searching]);
- const loadRecentlySearchedUsers = async () => {
- try {
- const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
- asyncCache != null ? setRecents(JSON.parse(asyncCache)) : setRecents([]);
- } catch (e) {
- console.log(e);
- }
- };
- const loadRecentlySearchedCategories = async () => {
- try {
- const recentCategoriesJSON = await AsyncStorage.getItem(
- '@recently_searched_categories',
- );
- setRecentCategories(
- recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [],
- );
- } catch (e) {
- console.log(e);
- }
- };
- const loadRecentSearches = () => {
- loadRecentlySearchedUsers();
- loadRecentlySearchedCategories();
+ // loads recent searches (users & categories) from AsyncStorage
+ const loadRecentlySearched = async () => {
+ return Promise.all([
+ getRecentlySearchedUsers(),
+ getRecentlySearchedCategories(),
+ ]).then(
+ ([users, categories]: [ProfilePreviewType[], CategoryPreviewType[]]) => {
+ setRecents(users);
+ setRecentCategories(categories);
+ },
+ );
};
const clearRecentlySearched = async () => {
try {
AsyncStorage.removeItem('@recently_searched_users');
AsyncStorage.removeItem('@recently_searched_categories');
- loadRecentlySearchedUsers();
- loadRecentlySearchedCategories();
+ loadRecentlySearched();
} catch (e) {
console.log(e);
}
@@ -173,7 +179,7 @@ const SearchScreen: React.FC = () => {
onBlur={handleBlur}
onFocus={handleFocus}
value={query}
- {...{top}}
+ {...{top, searching}}
/>
<ScrollView
scrollEnabled={!searching}
@@ -181,7 +187,7 @@ const SearchScreen: React.FC = () => {
stickyHeaderIndices={[4]}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}>
- <SearchCategories />
+ <SearchCategories defaultButtons={defaultButtons} />
<SearchResultsBackground {...{top}}>
{results === undefined &&
recents.length + recentCategories.length !== 0 ? (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-07 06:54:33 +0000