From b568f553c4ee2f0452f6bb7ab7b03c84d77c15ab Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 11 Mar 2021 18:22:24 -0500 Subject: new discover users screen --- src/screens/search/DiscoverUsers.tsx | 117 +++++++++++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 11 deletions(-) (limited to 'src/screens') diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index ce7507fc..a9856909 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; @@ -20,14 +31,74 @@ interface DiscoverUsersProps { const DiscoverUsers: React.FC = ({route}) => { const {type: category_type} = route.params; const {id, name} = route.params.searchCategory; - const [users, setUsers] = useState(); + const [categoryName, setCategoryName] = useState(); + const [users, setUsers] = useState([]); + 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: () => ( + { + setShowIcon1(!showIcon1); + setShouldRefresh(true); + }}> + + + ), + }); + + useEffect(() => { + setCategoryName(name); + }, []); + + useEffect(() => { + if (shouldRefresh) { + setLoading(true); + setTimeout(() => { + setUsers(shuffle(users)); + setShouldRefresh(false); + setLoading(false); + }, 500); + } + }, [shouldRefresh, users]); useEffect(() => { const loadData = async () => { + setLoading(true); setUsers(await getDiscoverUsers(id, category_type)); + setLoading(false); }; loadData(); - }, []); + }, [categoryName]); const _renderItem = ({item: user}: {item: ProfilePreviewType}) => ( @@ -37,16 +108,26 @@ const DiscoverUsers: React.FC = ({route}) => { - {name} + {loading && } item.id} renderItem={_renderItem} showsVerticalScrollIndicator={false} + ListFooterComponent={() => ( + <> + Other Groups + setCategoryName(category)} + /> + + )} /> @@ -67,6 +148,7 @@ const styles = StyleSheet.create({ }, scrollView: { top: HeaderHeight, + marginTop: '10%', width: SCREEN_WIDTH * 0.95, height: SCREEN_HEIGHT - HeaderHeight, alignSelf: 'center', @@ -83,6 +165,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; -- cgit v1.2.3-70-g09d2 From 4a05b26c5c32980ac18c832cc4dd74c6c93922a8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 12 Mar 2021 14:17:55 -0500 Subject: using discover/get_users, updated route params, cleaned up code --- src/components/common/GradientBorderButton.tsx | 10 +++--- src/components/search/SearchCategories.tsx | 25 +++++++++----- src/components/search/SearchResultCell.tsx | 3 -- src/components/search/SearchResultList.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 1 - src/routes/main/MainStackScreen.tsx | 3 +- src/screens/search/DiscoverUsers.tsx | 34 ++++++++++--------- src/screens/search/SearchScreen.tsx | 22 +++++++++--- src/services/ExploreService.ts | 46 ++++++++++++++------------ 9 files changed, 83 insertions(+), 62 deletions(-) (limited to 'src/screens') diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx index 0402c44b..00ea7175 100644 --- a/src/components/common/GradientBorderButton.tsx +++ b/src/components/common/GradientBorderButton.tsx @@ -45,20 +45,20 @@ const styles = StyleSheet.create({ marginVertical: 15, }, gradientContainer: { - width: 159, - height: 38, + width: 175, + height: 40, }, label: { fontWeight: '500', - fontSize: normalize(15), + fontSize: normalize(14), }, maskBorder: { borderRadius: 20, }, textContainer: { position: 'absolute', - width: 159, - height: 38, + width: 175, + height: 40, justifyContent: 'center', alignItems: 'center', }, diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index f00debb5..a71befe6 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -2,16 +2,18 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import {GradientBorderButton} from '..'; -import {getButtons} from '../../services/ExploreService'; +import {getSuggestedSearchBubbleSuggestions} from '../../services/ExploreService'; import {SearchCategoryType} from '../../types'; import {SCREEN_WIDTH} from '../../utils'; interface SearchCategoriesProps { darkStyle?: boolean; + defaultButtons?: SearchCategoryType[]; } const SearchCategories: React.FC = ({ darkStyle = false, + defaultButtons, }) => { const navigation = useNavigation(); const mtSearchCategory: (key: number) => SearchCategoryType = (key) => ({ @@ -20,18 +22,25 @@ const SearchCategories: React.FC = ({ category: '...', }); const [buttons, setButtons] = useState([ - mtSearchCategory(1), - mtSearchCategory(2), - mtSearchCategory(3), - mtSearchCategory(4), + mtSearchCategory(-1), + mtSearchCategory(-2), + mtSearchCategory(-3), + mtSearchCategory(-4), ]); + useEffect(() => { const loadButtons = async () => { - const localButtons = await getButtons(); + const localButtons = await getSuggestedSearchBubbleSuggestions(); setButtons([]); - setButtons(localButtons); + if (localButtons) { + setButtons(localButtons); + } }; - loadButtons(); + if (!defaultButtons) { + loadButtons(); + } else { + setButtons(defaultButtons); + } }, []); return ( diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 5cba6d2f..e0351d96 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -23,13 +23,11 @@ import { } from '../../utils/users'; interface SearchResults { - type: 'badges' | 'categories' | 'users'; profileData: ProfilePreviewType; loggedInUser: UserType; } const SearchResultsCell: React.FC = ({ - type, profileData: { id, name, @@ -114,7 +112,6 @@ const SearchResultsCell: React.FC = ({ const categoryObj: CategoryPreviewType = {name, category}; addCategoryToRecentlySearched(categoryObj); navigation.navigate('DiscoverUsers', { - type, searchCategory: {id, name}, }); }; diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index d8cf02d9..704e4192 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -57,7 +57,6 @@ const SearchResultList: React.FC = ({ renderItem={({section, item}) => { return ( diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 10b8ec3d..8953cfe0 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -22,7 +22,6 @@ export type MainStackParams = { screenType: ScreenType; }; DiscoverUsers: { - type: 'badges' | 'categories' | 'users'; searchCategory: SearchCategoryType; }; Profile: { diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 91f41fe4..cb232297 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -4,11 +4,9 @@ import {StackNavigationOptions} from '@react-navigation/stack'; import React, {useState} from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; -import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AnimatedTutorial, - BadgeSelection, CaptionScreen, CategorySelection, CreateCustomCategory, @@ -26,6 +24,7 @@ import { SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, } from '../../screens'; +import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index a9856909..d67e5448 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -29,8 +29,7 @@ interface DiscoverUsersProps { } const DiscoverUsers: React.FC = ({route}) => { - const {type: category_type} = route.params; - const {id, name} = route.params.searchCategory; + const {name} = route.params.searchCategory; const [categoryName, setCategoryName] = useState(); const [users, setUsers] = useState([]); const [shouldRefresh, setShouldRefresh] = useState(false); @@ -43,15 +42,15 @@ const DiscoverUsers: React.FC = ({route}) => { thumbnail_url: '', }); const dummyUsers = [ - mtUser(1), - mtUser(2), - mtUser(3), - mtUser(4), - mtUser(5), - mtUser(6), - mtUser(7), - mtUser(8), - mtUser(9), + 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(); @@ -94,7 +93,13 @@ const DiscoverUsers: React.FC = ({route}) => { useEffect(() => { const loadData = async () => { setLoading(true); - setUsers(await getDiscoverUsers(id, category_type)); + if (!categoryName) { + return; + } + const fetched_users = await getDiscoverUsers(categoryName); + if (fetched_users) { + setUsers(fetched_users); + } setLoading(false); }; loadData(); @@ -122,10 +127,7 @@ const DiscoverUsers: React.FC = ({route}) => { ListFooterComponent={() => ( <> Other Groups - setCategoryName(category)} - /> + )} /> diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 728510c5..f9a42d86 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -17,7 +17,12 @@ 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 { + ProfilePreviewType, + ScreenType, + CategoryPreviewType, + SearchCategoryType, +} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** @@ -37,6 +42,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,8 +67,12 @@ const SearchScreen: React.FC = () => { * Main handler for changes in query. */ useEffect(() => { - if (!searching) return; - if (!query.length) loadRecentSearches(); + if (!searching) { + return; + } + if (!query.length) { + loadRecentSearches(); + } if (query.length < 3) { setResults(undefined); return; @@ -181,7 +195,7 @@ const SearchScreen: React.FC = () => { stickyHeaderIndices={[4]} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}> - + {results === undefined && recents.length + recentCategories.length !== 0 ? ( diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index 9b0b4f71..07af91ad 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -68,13 +68,10 @@ export const getAllExploreSections = async () => { } }; -export const getDiscoverUsers = async (id: number, category_type: string) => { +export const getDiscoverUsers = async (categoryName: string) => { try { const token = await AsyncStorage.getItem('token'); - let url = DISCOVER_ENDPOINT + `${id}/`; - if (category_type === 'badges') { - url += '?type=badge'; - } + const url = `${DISCOVER_ENDPOINT}get_users/?category=${categoryName}`; const response = await fetch(url, { method: 'GET', headers: { @@ -82,31 +79,36 @@ export const getDiscoverUsers = async (id: number, category_type: string) => { }, }); if (response.status !== 200) { - return EMPTY_PROFILE_PREVIEW_LIST; + return undefined; } - const data = await response.json(); - const users: ProfilePreviewType[] = data.users; + const users: ProfilePreviewType[] = await response.json(); return users; } catch (error) { console.log('Error fetching SP user data'); console.log(error); - return []; + return undefined; } }; -export const getButtons = async () => { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(SEARCH_BUTTONS_ENDPOPINT, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); +export const getSuggestedSearchBubbleSuggestions = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(SEARCH_BUTTONS_ENDPOPINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + + if (response.status !== 200) { + return undefined; + } - if (response.status !== 200) { - return []; + const data: SearchCategoryType[] = await response.json(); + return data; + } catch (error) { + console.log('Error fetching suggested search bubble suggestions'); + console.log(error); + return undefined; } - - const data: SearchCategoryType[] = await response.json(); - return data; }; -- cgit v1.2.3-70-g09d2 From 2c9b2cf69d6e2fba44bcecb2636f51c94b8a64dd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 12 Mar 2021 14:57:12 -0500 Subject: fixed layout issue on smaller screens --- src/components/common/GradientBorderButton.tsx | 6 +++--- src/screens/search/DiscoverUsers.tsx | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'src/screens') diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx index 00ea7175..00f46a96 100644 --- a/src/components/common/GradientBorderButton.tsx +++ b/src/components/common/GradientBorderButton.tsx @@ -4,7 +4,7 @@ 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 {normalize} from '../../utils'; +import {normalize, SCREEN_WIDTH} from '../../utils'; interface GradientBorderButtonProps { text: string; @@ -45,7 +45,7 @@ const styles = StyleSheet.create({ marginVertical: 15, }, gradientContainer: { - width: 175, + width: SCREEN_WIDTH / 2 - 40, height: 40, }, label: { @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ }, textContainer: { position: 'absolute', - width: 175, + width: SCREEN_WIDTH / 2 - 40, height: 40, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index d67e5448..b87bfc37 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -117,7 +117,6 @@ const DiscoverUsers: React.FC = ({route}) => {