From 7657657c2b8a28b96962ac4fa816bb1625a36e4b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 8 Mar 2021 15:48:55 -0500 Subject: added support for badges --- src/components/search/SearchResultCell.tsx | 3 +++ src/components/search/SearchResultList.tsx | 20 ++++++++++++++------ src/routes/main/MainStackNavigator.tsx | 1 + src/screens/search/DiscoverUsers.tsx | 3 ++- src/screens/search/SearchScreen.tsx | 12 +++++++----- src/services/ExploreService.ts | 8 ++++++-- 6 files changed, 33 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 0f6f5b7d..b6ce55d0 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -17,11 +17,13 @@ import { } from '../../utils/users'; interface SearchResults { + type: 'badges' | 'categories' | 'users'; profileData: ProfilePreviewType; loggedInUser: UserType; } const SearchResultsCell: React.FC = ({ + type, profileData: { id, name, @@ -133,6 +135,7 @@ const SearchResultsCell: React.FC = ({ style={styles.cellContainer} onPress={() => navigation.navigate('DiscoverUsers', { + type, searchCategory: {id, name}, }) }> diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 14d5de6d..32caa764 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -53,14 +53,22 @@ const SearchResultList: React.FC = ({ contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}} sections={results} keyExtractor={(item, index) => item.id + index} - renderItem={({item}) => ( - - )} + renderItem={({section, item}) => { + return ( + + ); + }} renderSectionHeader={({section: {title, data}}) => { - if (title === 'categories' && data.length === 0) { + if (['categories', 'badges'].includes(title) && data.length === 0) { setShowSection(false); } - return sectionHeader(title !== 'categories' && showSection); + return sectionHeader( + ['users', 'categories'].includes(title) && showSection, + ); }} /> )} @@ -71,7 +79,7 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { marginTop: SCREEN_HEIGHT * 0.02, - height: SCREEN_HEIGHT, + height: SCREEN_HEIGHT * 0.9, }, sectionHeaderStyle: { width: '100%', diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 8953cfe0..10b8ec3d 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -22,6 +22,7 @@ export type MainStackParams = { screenType: ScreenType; }; DiscoverUsers: { + type: 'badges' | 'categories' | 'users'; searchCategory: SearchCategoryType; }; Profile: { diff --git a/src/screens/search/DiscoverUsers.tsx b/src/screens/search/DiscoverUsers.tsx index e570edce..ce7507fc 100644 --- a/src/screens/search/DiscoverUsers.tsx +++ b/src/screens/search/DiscoverUsers.tsx @@ -18,12 +18,13 @@ interface DiscoverUsersProps { } const DiscoverUsers: React.FC = ({route}) => { + const {type: category_type} = route.params; const {id, name} = route.params.searchCategory; const [users, setUsers] = useState(); useEffect(() => { const loadData = async () => { - setUsers(await getDiscoverUsers(id)); + setUsers(await getDiscoverUsers(id, category_type)); }; loadData(); }, []); diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 223fc2b2..82a4c1ae 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -60,16 +60,18 @@ const SearchScreen: React.FC = () => { `${SEARCH_ENDPOINT}?query=${query}`, ); if (query.length > 2) { - const categories = searchResults?.categories; - const users = searchResults?.users; const sanitizedResult = [ + { + title: 'badges', + data: searchResults?.badges, + }, { title: 'categories', - data: categories, + data: searchResults?.categories, }, { title: 'users', - data: users, + data: searchResults?.users, }, ]; setResults(sanitizedResult); @@ -180,7 +182,7 @@ const styles = StyleSheet.create({ height: SCREEN_HEIGHT, }, contentContainer: { - height: SCREEN_HEIGHT * 0.9, + height: SCREEN_HEIGHT, paddingTop: '2%', paddingBottom: SCREEN_HEIGHT / 3, paddingHorizontal: '3%', diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index 33b79b4a..4f7875dc 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -67,10 +67,14 @@ export const getAllExploreSections = async () => { } }; -export const getDiscoverUsers = async (id: number) => { +export const getDiscoverUsers = async (id: number, category_type: string) => { try { const token = await AsyncStorage.getItem('token'); - const response = await fetch(DISCOVER_ENDPOINT + `${id}/`, { + let url = DISCOVER_ENDPOINT + `${id}/`; + if (category_type === 'badges') { + url += '?type=badge'; + } + const response = await fetch(url, { method: 'GET', headers: { Authorization: 'Token ' + token, -- cgit v1.2.3-70-g09d2 From 8837ea74dbff9cf455cd7cb092767e51de3900f8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 8 Mar 2021 16:11:33 -0500 Subject: fix single category result not showing up --- src/components/search/SearchResultList.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 32caa764..fe32ef65 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -25,14 +25,15 @@ const SearchResultList: React.FC = ({ results, keyboardVisible, }) => { - const [showSection, setShowSection] = useState(true); const [showEmptyView, setshowEmptyView] = useState(false); const {user: loggedInUser} = useSelector((state: RootState) => state.user); useEffect(() => { if (results && results.length > 0) { setshowEmptyView( - results[0].data.length === 0 && results[1].data.length === 0, + results[0].data.length === 0 && + results[1].data.length === 0 && + results[2].data.length === 0, ); } }, [results]); @@ -62,14 +63,9 @@ const SearchResultList: React.FC = ({ /> ); }} - renderSectionHeader={({section: {title, data}}) => { - if (['categories', 'badges'].includes(title) && data.length === 0) { - setShowSection(false); - } - return sectionHeader( - ['users', 'categories'].includes(title) && showSection, - ); - }} + renderSectionHeader={({section: {data}}) => + sectionHeader(data.length !== 0) + } /> )} -- cgit v1.2.3-70-g09d2 From 64a454efe603455f17a401a9d2c75e72f22c1f4f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 8 Mar 2021 20:46:05 -0500 Subject: added padding --- src/components/search/SearchResultList.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 939bfa2b..613ab734 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -75,6 +75,7 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { height: SCREEN_HEIGHT, + paddingBottom: SCREEN_HEIGHT * 0.1, }, sectionHeaderStyle: { width: '100%', -- cgit v1.2.3-70-g09d2