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/assets/images/shuffle-1.png | Bin 0 -> 157612 bytes src/assets/images/shuffle-2.png | Bin 0 -> 149495 bytes src/components/common/GradientBorderButton.tsx | 66 ++++++++++++++ src/components/common/index.ts | 1 + src/components/search/SearchCategories.tsx | 82 +++++++++-------- src/screens/search/DiscoverUsers.tsx | 117 ++++++++++++++++++++++--- src/utils/common.ts | 21 +++++ 7 files changed, 233 insertions(+), 54 deletions(-) create mode 100644 src/assets/images/shuffle-1.png create mode 100644 src/assets/images/shuffle-2.png create mode 100644 src/components/common/GradientBorderButton.tsx (limited to 'src') diff --git a/src/assets/images/shuffle-1.png b/src/assets/images/shuffle-1.png new file mode 100644 index 00000000..d28ddc21 Binary files /dev/null and b/src/assets/images/shuffle-1.png differ diff --git a/src/assets/images/shuffle-2.png b/src/assets/images/shuffle-2.png new file mode 100644 index 00000000..a6a701b0 Binary files /dev/null and b/src/assets/images/shuffle-2.png differ diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx new file mode 100644 index 00000000..0402c44b --- /dev/null +++ b/src/components/common/GradientBorderButton.tsx @@ -0,0 +1,66 @@ +import MaskedView from '@react-native-community/masked-view'; +import React from 'react'; +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'; + +interface GradientBorderButtonProps { + text: string; + darkStyle: boolean; + onPress: () => void; +} + +const GradientBorderButton: React.FC = ({ + text, + darkStyle, + onPress, +}) => { + const labelColor = darkStyle ? 'white' : '#828282'; + const borderWidth = darkStyle ? 2 : 1; + return ( + + + }> + + + + {text} + + + ); +}; +const styles = StyleSheet.create({ + container: { + marginVertical: 15, + }, + gradientContainer: { + width: 159, + height: 38, + }, + label: { + fontWeight: '500', + fontSize: normalize(15), + }, + maskBorder: { + borderRadius: 20, + }, + textContainer: { + position: 'absolute', + width: 159, + height: 38, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default GradientBorderButton; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index e1543cd8..8499dbfa 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -22,3 +22,4 @@ export {default as TaggPrompt} from './TaggPrompt'; export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; export {default as FriendsButton} from './FriendsButton'; export {default as TaggSquareButton} from './TaggSquareButton'; +export {default as GradientBorderButton} from './GradientBorderButton'; diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index c3c4c518..f00debb5 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -1,47 +1,55 @@ 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 {StyleSheet, View} from 'react-native'; +import {GradientBorderButton} from '..'; import {getButtons} from '../../services/ExploreService'; import {SearchCategoryType} from '../../types'; -import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; -const SearchCategories: React.FC = () => { - const [buttons, setButtons] = useState([]); +interface SearchCategoriesProps { + darkStyle?: boolean; +} + +const SearchCategories: React.FC = ({ + darkStyle = false, +}) => { + const navigation = useNavigation(); + const mtSearchCategory: (key: number) => SearchCategoryType = (key) => ({ + id: key, + name: '...', + category: '...', + }); + const [buttons, setButtons] = useState([ + mtSearchCategory(1), + mtSearchCategory(2), + mtSearchCategory(3), + mtSearchCategory(4), + ]); useEffect(() => { const loadButtons = async () => { const localButtons = await getButtons(); - console.log('localButtons: ', localButtons); - await setButtons(localButtons); + setButtons([]); + setButtons(localButtons); }; loadButtons(); }, []); - const navigation = useNavigation(); return ( - {buttons && - buttons.map((searchCategory) => ( - - { - navigation.navigate('DiscoverUsers', { - searchCategory, - }); - }}> - {searchCategory.name} - - - ))} + {buttons.map((searchCategory) => ( + { + if (searchCategory.name !== '...') { + navigation.push('DiscoverUsers', { + searchCategory, + }); + } + }} + /> + ))} ); }; @@ -56,20 +64,8 @@ const styles = StyleSheet.create({ 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', + backgroundColor: 'transparent', width: 158, height: 37, borderRadius: 20, @@ -84,7 +80,7 @@ const styles = StyleSheet.create({ fontSize: 15, lineHeight: 17.9, alignSelf: 'center', - color: '#828282', + color: 'white', }, }); export default SearchCategories; 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; diff --git a/src/utils/common.ts b/src/utils/common.ts index 30122e79..c1049c42 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -94,3 +94,24 @@ export const haveUnreadNotifications = async ( } return false; }; + +// https://stackoverflow.com/a/2450976 +export const shuffle = (array: any[]) => { + var currentIndex = array.length, + temporaryValue, + randomIndex; + + // While there remain elements to shuffle... + while (currentIndex !== 0) { + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +}; -- cgit v1.2.3-70-g09d2