diff options
26 files changed, 287 insertions, 72 deletions
diff --git a/src/assets/images/badges/alpha_chi_omega.png b/src/assets/images/badges/alpha_chi_omega.png Binary files differnew file mode 100644 index 00000000..473894cc --- /dev/null +++ b/src/assets/images/badges/alpha_chi_omega.png diff --git a/src/assets/images/badges/alpha_phi_alpha.png b/src/assets/images/badges/alpha_phi_alpha.png Binary files differnew file mode 100644 index 00000000..275e0eb3 --- /dev/null +++ b/src/assets/images/badges/alpha_phi_alpha.png diff --git a/src/assets/images/badges/baseball.png b/src/assets/images/badges/baseball.png Binary files differnew file mode 100644 index 00000000..7b470dbe --- /dev/null +++ b/src/assets/images/badges/baseball.png diff --git a/src/assets/images/badges/basketball.png b/src/assets/images/badges/basketball.png Binary files differnew file mode 100644 index 00000000..45d1139b --- /dev/null +++ b/src/assets/images/badges/basketball.png diff --git a/src/assets/images/badges/beta_omega_chi.png b/src/assets/images/badges/beta_omega_chi.png Binary files differnew file mode 100644 index 00000000..f2a85996 --- /dev/null +++ b/src/assets/images/badges/beta_omega_chi.png diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/badges/brown_badge.png Binary files differindex bcffb6e3..bcffb6e3 100644 --- a/src/assets/images/dummy_badge.png +++ b/src/assets/images/badges/brown_badge.png diff --git a/src/assets/images/badges/delta_gamma.png b/src/assets/images/badges/delta_gamma.png Binary files differnew file mode 100644 index 00000000..84182eca --- /dev/null +++ b/src/assets/images/badges/delta_gamma.png diff --git a/src/assets/images/badges/delta_phi.png b/src/assets/images/badges/delta_phi.png Binary files differnew file mode 100644 index 00000000..074317d1 --- /dev/null +++ b/src/assets/images/badges/delta_phi.png diff --git a/src/assets/images/badges/field_hockey.png b/src/assets/images/badges/field_hockey.png Binary files differnew file mode 100644 index 00000000..766f0f60 --- /dev/null +++ b/src/assets/images/badges/field_hockey.png diff --git a/src/assets/images/football.png b/src/assets/images/badges/football.png Binary files differindex 2e8214b7..2e8214b7 100644 --- a/src/assets/images/football.png +++ b/src/assets/images/badges/football.png diff --git a/src/assets/images/badges/gymnastics.png b/src/assets/images/badges/gymnastics.png Binary files differnew file mode 100644 index 00000000..5d500f26 --- /dev/null +++ b/src/assets/images/badges/gymnastics.png diff --git a/src/assets/images/badges/hockey.png b/src/assets/images/badges/hockey.png Binary files differnew file mode 100644 index 00000000..7e269665 --- /dev/null +++ b/src/assets/images/badges/hockey.png diff --git a/src/assets/images/badges/kappa_alpha_psi.png b/src/assets/images/badges/kappa_alpha_psi.png Binary files differnew file mode 100644 index 00000000..1b7d7aff --- /dev/null +++ b/src/assets/images/badges/kappa_alpha_psi.png diff --git a/src/assets/images/badges/kappa_delta.png b/src/assets/images/badges/kappa_delta.png Binary files differnew file mode 100644 index 00000000..642ddb5b --- /dev/null +++ b/src/assets/images/badges/kappa_delta.png diff --git a/src/assets/images/badges/lax.png b/src/assets/images/badges/lax.png Binary files differnew file mode 100644 index 00000000..3810589b --- /dev/null +++ b/src/assets/images/badges/lax.png diff --git a/src/assets/images/badges/sigma.png b/src/assets/images/badges/sigma.png Binary files differnew file mode 100644 index 00000000..7e6c9d22 --- /dev/null +++ b/src/assets/images/badges/sigma.png diff --git a/src/assets/images/badges/theta_alpha.png b/src/assets/images/badges/theta_alpha.png Binary files differnew file mode 100644 index 00000000..607720f5 --- /dev/null +++ b/src/assets/images/badges/theta_alpha.png diff --git a/src/assets/images/badges/track.png b/src/assets/images/badges/track.png Binary files differnew file mode 100644 index 00000000..a531f641 --- /dev/null +++ b/src/assets/images/badges/track.png diff --git a/src/assets/images/badges/volleyball.png b/src/assets/images/badges/volleyball.png Binary files differnew file mode 100644 index 00000000..a9bb9c88 --- /dev/null +++ b/src/assets/images/badges/volleyball.png diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..dcc2032d 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -32,6 +32,7 @@ export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/'; export const DISCOVER_ENDPOINT: string = API_URL + 'discover/'; export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/'; export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/'; +export const ADD_USER_BADGES: string = API_URL + 'suggested_people/add_badges/'; // Suggested People export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/'; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index b99e2e3a..7b55d249 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -236,7 +236,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { name="Badge" component={BadgeSelection} options={{ - ...headerBarOptions('white', 'Badge'), + ...headerBarOptions('white', ''), }} /> </MainStack.Navigator> diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx index 6d2a2f2e..790fea0a 100644 --- a/src/screens/badge/BadgeItem.tsx +++ b/src/screens/badge/BadgeItem.tsx @@ -1,33 +1,46 @@ import React from 'react'; -import {View, Text, StyleSheet, Image} from 'react-native'; +import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native'; import {Background} from '../../components'; import {SCREEN_WIDTH, normalize} from '../../utils'; import LinearGradient from 'react-native-linear-gradient'; import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants'; +import {TouchableOpacity} from 'react-native-gesture-handler'; interface BadgeItemProps { - title: String; - resourcePath: String; + title: string; + resourcePath: ImageSourcePropType; index: Number; + selected: boolean; + onSelection: (ikey: string) => void; + itemKey: string; } -const BadgeItem: React.FC<BadgeItemProps> = ({title, index}) => { +const BadgeItem: React.FC<BadgeItemProps> = ({ + title, + resourcePath, + selected, + index, + onSelection, + itemKey, +}) => { return ( - <LinearGradient - colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST} - useAngle={true} - angle={136.69} - style={styles.item}> - <View style={styles.detailContainer}> - <Image - source={require('../../assets/images/football.png')} - style={styles.imageStyles} - /> - <View style={styles.textContainer}> - <Text style={styles.title}>{title}</Text> + <TouchableOpacity onPress={() => onSelection(itemKey)}> + <LinearGradient + colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST} + useAngle={true} + angle={136.69} + style={styles.item}> + <View + style={ + selected ? styles.selectedDetailContainer : styles.detailContainer + }> + <Image source={resourcePath} style={styles.imageStyles} /> + <View style={styles.textContainer}> + <Text style={styles.title}>{title}</Text> + </View> </View> - </View> - </LinearGradient> + </LinearGradient> + </TouchableOpacity> ); }; @@ -39,7 +52,22 @@ const styles = StyleSheet.create({ marginBottom: 12, borderRadius: 8, }, - detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'}, + detailContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + borderWidth: 3, + borderRadius: 8, + borderColor: 'transparent', + }, + selectedDetailContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + borderWidth: 3, + borderColor: 'white', + borderRadius: 8, + }, imageStyles: { width: '31%', height: '31%', @@ -52,6 +80,7 @@ const styles = StyleSheet.create({ lineHeight: normalize(17.9), textAlign: 'center', color: 'white', + marginHorizontal: '2%', }, }); diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx index aa95b464..0f9fa67e 100644 --- a/src/screens/badge/BadgeList.tsx +++ b/src/screens/badge/BadgeList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import {StyleSheet, SectionList, ScrollView, View} from 'react-native'; import BadgeItem from './BadgeItem'; import BadgeHeader from './BadgeListHeader'; @@ -6,9 +6,12 @@ import {SCREEN_HEIGHT} from '../../utils'; interface BadgeListProps { data: any[]; + selectedBadges : any[], + selectKey: (ikey: string) => void; } -const BadgeList: React.FC<BadgeListProps> = ({data}) => { +const BadgeList: React.FC<BadgeListProps> = ({data, selectedBadges, selectKey}) => { + return ( <View> <ScrollView contentContainerStyle={styles.scrollViewStyles}> @@ -16,9 +19,21 @@ const BadgeList: React.FC<BadgeListProps> = ({data}) => { contentContainerStyle={styles.listContainer} sections={data} keyExtractor={(item, index) => item + index} - renderItem={({item, index}) => ( - <BadgeItem title={item} resourcePath={''} index={index} /> - )} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + <BadgeItem + selected={selectedBadges.includes( + badgeName + badgeImage + index, + )} + onSelection={selectKey} + itemKey={badgeName + badgeImage + index} + title={badgeName} + resourcePath={badgeImage} + index={index} + /> + ); + }} renderSectionHeader={({section: {title}}) => ( <BadgeHeader title={title} /> )} diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx index 57364d22..27335dfb 100644 --- a/src/screens/badge/BadgeListHeader.tsx +++ b/src/screens/badge/BadgeListHeader.tsx @@ -18,7 +18,8 @@ const styles = StyleSheet.create({ headerContainer: { width: SCREEN_WIDTH * 0.75, marginHorizontal: SCREEN_WIDTH * 0.125, - marginBottom: 17, + marginBottom: '2%', + marginTop: '4%', }, header: { fontSize: normalize(20), diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx index 6cc576a8..7f722e28 100644 --- a/src/screens/badge/BadgeScreenHeader.tsx +++ b/src/screens/badge/BadgeScreenHeader.tsx @@ -5,7 +5,7 @@ import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils'; const BadgeScreenHeader: React.FC = () => { return ( <View style={styles.container}> - <Image source={require('../../assets/images/dummy_badge.png')} /> + <Image source={require('../../assets/images/badges/brown_badge.png')} /> <View style={styles.universityTextContainer}> <Text style={styles.universityText}>Brown University Badges</Text> </View> diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 924eefc3..3c718202 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,11 +1,5 @@ -import React from 'react'; -import { - StatusBar, - SafeAreaView, - View, - StyleSheet, - ScrollView, -} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {StatusBar, SafeAreaView, View, StyleSheet} from 'react-native'; import {BackgroundGradientType} from '../../types'; import {Background} from '../../components'; import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; @@ -13,60 +7,231 @@ import LinearGradient from 'react-native-linear-gradient'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import BadgeList from './BadgeList'; import BadgeScreenHeader from './BadgeScreenHeader'; - +import {ADD_USER_BADGES} from '../../constants'; +import {getTokenOrLogout} from './../../utils'; import Animated from 'react-native-reanimated'; import {SearchBar} from '../../components'; + +import {StackNavigationProp} from '@react-navigation/stack'; + /** - * Home Screen for displaying Tagg post suggestions - * for users to discover and browse - */ + * Home Screen for displaying Tagg Badge Selections + **/ + +const BadgeImages = { + football: require('../../assets/images/badges/football.png'), + track: require('../../assets/images/badges/track.png'), + volleyball: require('../../assets/images/badges/volleyball.png'), + lax: require('../../assets/images/badges/brown_badge.png'), + fieldHockey: require('../../assets/images/badges/field_hockey.png'), + gymnastics: require('../../assets/images/badges/gymnastics.png'), + hockey: require('../../assets/images/badges/hockey.png'), + baseball: require('../../assets/images/badges/baseball.png'), + basketball: require('../../assets/images/badges/basketball.png'), + kappadelta: require('../../assets/images/badges/kappa_delta.png'), + alphachiomega: require('../../assets/images/badges/alpha_chi_omega.png'), + deltagamma: require('../../assets/images/badges/delta_gamma.png'), + sigma: require('../../assets/images/badges/sigma.png'), + thetaalpha: require('../../assets/images/badges/theta_alpha.png'), + deltaphi: require('../../assets/images/badges/delta_phi.png'), + kappaalphapsi: require('../../assets/images/badges/kappa_alpha_psi.png'), + alphaphialpha: require('../../assets/images/badges/alpha_phi_alpha.png'), + betaomegachi: require('../../assets/images/badges/beta_omega_chi.png'), +}; const DATA = [ { - title: 'Historically Black Fraternities', - data: ['Pizza', 'Burger', 'Risotto'], + title: 'Athletics', + data: [ + { + badgeName: 'Brown Football', + badgeImage: BadgeImages.football, + }, + { + badgeName: 'Brown Track', + badgeImage: BadgeImages.track, + }, + { + badgeName: 'Brown Volleyball', + badgeImage: BadgeImages.volleyball, + }, + { + badgeName: 'Brown LAX', + badgeImage: BadgeImages.lax, + }, + { + badgeName: 'Brown Field Hockey', + badgeImage: BadgeImages.fieldHockey, + }, + { + badgeName: 'Brown Gymnastics', + badgeImage: BadgeImages.gymnastics, + }, + { + badgeName: 'Brown Hockey', + badgeImage: BadgeImages.hockey, + }, + { + badgeName: 'Brown Baseball', + badgeImage: BadgeImages.baseball, + }, + { + badgeName: 'Brown Basketball', + badgeImage: BadgeImages.basketball, + }, + ], }, + { - title: 'Sides', + title: 'Sorority', data: [ - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', - 'French Fries', - 'Onion Rings', - 'Fried Shrimps', + { + badgeName: 'Kappa Delta', + badgeImage: BadgeImages.kappadelta, + }, + { + badgeName: 'Alpha Chi Omega', + badgeImage: BadgeImages.alphachiomega, + }, + { + badgeName: 'Delta Gamma', + badgeImage: BadgeImages.deltagamma, + }, ], }, + { - title: 'Drinks', - data: ['Water', 'Coke', 'Beer'], + title: 'Fraternity', + data: [ + { + badgeName: 'Sigma', + badgeImage: BadgeImages.sigma, + }, + { + badgeName: 'Theta Alpha', + badgeImage: BadgeImages.thetaalpha, + }, + { + badgeName: 'Delta Phi', + badgeImage: BadgeImages.deltaphi, + }, + ], }, { - title: 'Desserts', - data: ['Cheese Cake', 'Ice Cream'], + title: 'Historically Black Fraternities', + data: [ + { + badgeName: 'Kappa Alpha Psi', + badgeImage: BadgeImages.kappadelta, + }, + { + badgeName: 'Alpha Phi Alpha', + badgeImage: BadgeImages.alphaphialpha, + }, + { + badgeName: 'Beta Omega Chi', + badgeImage: BadgeImages.betaomegachi, + }, + ], }, ]; -const BadgeSelection: React.FC = () => { +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {Text} from 'react-native-animatable'; +import {useDispatch} from 'react-redux'; + +type BadgeSelectionParamList = { + BadgeList: any[]; +}; + +type BadgeSelectionScreenNavigationProp = StackNavigationProp< + BadgeSelectionParamList, + 'BadgeList' +>; + +type BadgeSelectionProps = { + navigation: BadgeSelectionScreenNavigationProp; +}; + +const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => { + const [canSubmit, setCanSubmit] = useState(false); + navigation.setOptions({ + headerRight: () => ( + <TouchableOpacity + style={{marginRight: 24}} + onPress={() => { + if (canSubmit) { + uploadUserSelection(); + } + }}> + <Text + style={{ + color: '#FFFFFF', + fontWeight: 'bold', + fontSize: 15, + lineHeight: 18, + }}> + {canSubmit ? 'Done' : 'Skip'} + </Text> + </TouchableOpacity> + ), + headerLeft: () => ( + <TouchableOpacity style={{marginLeft: 24}}> + <Text + style={{ + color: '#FFFFFF', + fontWeight: '500', + fontSize: 15, + lineHeight: 18, + }}> + Cancel + </Text> + </TouchableOpacity> + ), + }); + + const [selectedBadges, setSelectedBadges] = useState(Array<string>()); + const selectKey = (key: string) => { + if (selectedBadges.includes(key)) { + const selectedBadgesArray = [...selectedBadges]; + const itemIndex = selectedBadgesArray.indexOf(key); + if (itemIndex > -1) { + selectedBadgesArray.splice(itemIndex, 1); + } + setSelectedBadges(selectedBadgesArray); + } else { + const selectedBadgesArray = [...selectedBadges, key]; + setSelectedBadges(selectedBadgesArray); + } + }; + const dispatch = useDispatch(); + useEffect(() => { + setCanSubmit(selectedBadges.length !== 0); + }, [selectedBadges]); + + const uploadUserSelection = async () => { + try { + const token = await getTokenOrLogout(dispatch); + const reqBody = JSON.stringify({ + badges: selectedBadges, + }); + const response = await fetch(ADD_USER_BADGES, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Token ' + token, + }, + body: reqBody, + }); + const status = response.status; + const data = await response.json(); + console.log(response); + } catch (error) { + console.log(error); + } + }; + return ( <LinearGradient colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]} @@ -81,7 +246,11 @@ const BadgeSelection: React.FC = () => { top={Animated.useValue(0)} /> <View style={styles.listContainer}> - <BadgeList data={DATA} /> + <BadgeList + data={DATA} + selectedBadges={selectedBadges} + selectKey={selectKey} + /> </View> </View> </SafeAreaView> |
