From f8d251d30ef5aff0ee1cef50e2a2e3e1f367efd1 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 24 Feb 2021 12:14:11 -0800 Subject: Resetting old commit --- src/assets/images/badges/alpha_chi_omega.png | Bin 0 -> 1039 bytes src/assets/images/badges/alpha_phi_alpha.png | Bin 0 -> 1107 bytes src/assets/images/badges/baseball.png | Bin 0 -> 1305 bytes src/assets/images/badges/basketball.png | Bin 0 -> 1484 bytes src/assets/images/badges/beta_omega_chi.png | Bin 0 -> 1187 bytes src/assets/images/badges/brown_badge.png | Bin 0 -> 843 bytes src/assets/images/badges/delta_gamma.png | Bin 0 -> 643 bytes src/assets/images/badges/delta_phi.png | Bin 0 -> 857 bytes src/assets/images/badges/field_hockey.png | Bin 0 -> 970 bytes src/assets/images/badges/football.png | Bin 0 -> 5374 bytes src/assets/images/badges/gymnastics.png | Bin 0 -> 1643 bytes src/assets/images/badges/hockey.png | Bin 0 -> 1077 bytes src/assets/images/badges/kappa_alpha_psi.png | Bin 0 -> 1018 bytes src/assets/images/badges/kappa_delta.png | Bin 0 -> 758 bytes src/assets/images/badges/lax.png | Bin 0 -> 1091 bytes src/assets/images/badges/sigma.png | Bin 0 -> 685 bytes src/assets/images/badges/theta_alpha.png | Bin 0 -> 852 bytes src/assets/images/badges/track.png | Bin 0 -> 1162 bytes src/assets/images/badges/volleyball.png | Bin 0 -> 1674 bytes src/assets/images/dummy_badge.png | Bin 843 -> 0 bytes src/assets/images/football.png | Bin 5374 -> 0 bytes src/constants/api.ts | 1 + src/routes/main/MainStackScreen.tsx | 2 +- src/screens/badge/BadgeItem.tsx | 67 +++++-- src/screens/badge/BadgeList.tsx | 25 ++- src/screens/badge/BadgeListHeader.tsx | 3 +- src/screens/badge/BadgeScreenHeader.tsx | 2 +- src/screens/badge/BadgeSelection.tsx | 259 ++++++++++++++++++++++----- 28 files changed, 287 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/badges/alpha_chi_omega.png create mode 100644 src/assets/images/badges/alpha_phi_alpha.png create mode 100644 src/assets/images/badges/baseball.png create mode 100644 src/assets/images/badges/basketball.png create mode 100644 src/assets/images/badges/beta_omega_chi.png create mode 100644 src/assets/images/badges/brown_badge.png create mode 100644 src/assets/images/badges/delta_gamma.png create mode 100644 src/assets/images/badges/delta_phi.png create mode 100644 src/assets/images/badges/field_hockey.png create mode 100644 src/assets/images/badges/football.png create mode 100644 src/assets/images/badges/gymnastics.png create mode 100644 src/assets/images/badges/hockey.png create mode 100644 src/assets/images/badges/kappa_alpha_psi.png create mode 100644 src/assets/images/badges/kappa_delta.png create mode 100644 src/assets/images/badges/lax.png create mode 100644 src/assets/images/badges/sigma.png create mode 100644 src/assets/images/badges/theta_alpha.png create mode 100644 src/assets/images/badges/track.png create mode 100644 src/assets/images/badges/volleyball.png delete mode 100644 src/assets/images/dummy_badge.png delete mode 100644 src/assets/images/football.png (limited to 'src') diff --git a/src/assets/images/badges/alpha_chi_omega.png b/src/assets/images/badges/alpha_chi_omega.png new file mode 100644 index 00000000..473894cc Binary files /dev/null and b/src/assets/images/badges/alpha_chi_omega.png differ diff --git a/src/assets/images/badges/alpha_phi_alpha.png b/src/assets/images/badges/alpha_phi_alpha.png new file mode 100644 index 00000000..275e0eb3 Binary files /dev/null and b/src/assets/images/badges/alpha_phi_alpha.png differ diff --git a/src/assets/images/badges/baseball.png b/src/assets/images/badges/baseball.png new file mode 100644 index 00000000..7b470dbe Binary files /dev/null and b/src/assets/images/badges/baseball.png differ diff --git a/src/assets/images/badges/basketball.png b/src/assets/images/badges/basketball.png new file mode 100644 index 00000000..45d1139b Binary files /dev/null and b/src/assets/images/badges/basketball.png differ diff --git a/src/assets/images/badges/beta_omega_chi.png b/src/assets/images/badges/beta_omega_chi.png new file mode 100644 index 00000000..f2a85996 Binary files /dev/null and b/src/assets/images/badges/beta_omega_chi.png differ diff --git a/src/assets/images/badges/brown_badge.png b/src/assets/images/badges/brown_badge.png new file mode 100644 index 00000000..bcffb6e3 Binary files /dev/null and b/src/assets/images/badges/brown_badge.png differ diff --git a/src/assets/images/badges/delta_gamma.png b/src/assets/images/badges/delta_gamma.png new file mode 100644 index 00000000..84182eca Binary files /dev/null and b/src/assets/images/badges/delta_gamma.png differ diff --git a/src/assets/images/badges/delta_phi.png b/src/assets/images/badges/delta_phi.png new file mode 100644 index 00000000..074317d1 Binary files /dev/null and b/src/assets/images/badges/delta_phi.png differ diff --git a/src/assets/images/badges/field_hockey.png b/src/assets/images/badges/field_hockey.png new file mode 100644 index 00000000..766f0f60 Binary files /dev/null and b/src/assets/images/badges/field_hockey.png differ diff --git a/src/assets/images/badges/football.png b/src/assets/images/badges/football.png new file mode 100644 index 00000000..2e8214b7 Binary files /dev/null and b/src/assets/images/badges/football.png differ diff --git a/src/assets/images/badges/gymnastics.png b/src/assets/images/badges/gymnastics.png new file mode 100644 index 00000000..5d500f26 Binary files /dev/null and b/src/assets/images/badges/gymnastics.png differ diff --git a/src/assets/images/badges/hockey.png b/src/assets/images/badges/hockey.png new file mode 100644 index 00000000..7e269665 Binary files /dev/null and b/src/assets/images/badges/hockey.png differ diff --git a/src/assets/images/badges/kappa_alpha_psi.png b/src/assets/images/badges/kappa_alpha_psi.png new file mode 100644 index 00000000..1b7d7aff Binary files /dev/null and b/src/assets/images/badges/kappa_alpha_psi.png differ diff --git a/src/assets/images/badges/kappa_delta.png b/src/assets/images/badges/kappa_delta.png new file mode 100644 index 00000000..642ddb5b Binary files /dev/null and b/src/assets/images/badges/kappa_delta.png differ diff --git a/src/assets/images/badges/lax.png b/src/assets/images/badges/lax.png new file mode 100644 index 00000000..3810589b Binary files /dev/null and b/src/assets/images/badges/lax.png differ diff --git a/src/assets/images/badges/sigma.png b/src/assets/images/badges/sigma.png new file mode 100644 index 00000000..7e6c9d22 Binary files /dev/null and b/src/assets/images/badges/sigma.png differ diff --git a/src/assets/images/badges/theta_alpha.png b/src/assets/images/badges/theta_alpha.png new file mode 100644 index 00000000..607720f5 Binary files /dev/null and b/src/assets/images/badges/theta_alpha.png differ diff --git a/src/assets/images/badges/track.png b/src/assets/images/badges/track.png new file mode 100644 index 00000000..a531f641 Binary files /dev/null and b/src/assets/images/badges/track.png differ diff --git a/src/assets/images/badges/volleyball.png b/src/assets/images/badges/volleyball.png new file mode 100644 index 00000000..a9bb9c88 Binary files /dev/null and b/src/assets/images/badges/volleyball.png differ diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/dummy_badge.png deleted file mode 100644 index bcffb6e3..00000000 Binary files a/src/assets/images/dummy_badge.png and /dev/null differ diff --git a/src/assets/images/football.png b/src/assets/images/football.png deleted file mode 100644 index 2e8214b7..00000000 Binary files a/src/assets/images/football.png and /dev/null differ 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 = ({route}) => { name="Badge" component={BadgeSelection} options={{ - ...headerBarOptions('white', 'Badge'), + ...headerBarOptions('white', ''), }} /> 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 = ({title, index}) => { +const BadgeItem: React.FC = ({ + title, + resourcePath, + selected, + index, + onSelection, + itemKey, +}) => { return ( - - - - - {title} + onSelection(itemKey)}> + + + + + {title} + - - + + ); }; @@ -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 = ({data}) => { +const BadgeList: React.FC = ({data, selectedBadges, selectKey}) => { + return ( @@ -16,9 +19,21 @@ const BadgeList: React.FC = ({data}) => { contentContainerStyle={styles.listContainer} sections={data} keyExtractor={(item, index) => item + index} - renderItem={({item, index}) => ( - - )} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + + ); + }} renderSectionHeader={({section: {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 ( - + Brown University Badges 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 = ({navigation}) => { + const [canSubmit, setCanSubmit] = useState(false); + navigation.setOptions({ + headerRight: () => ( + { + if (canSubmit) { + uploadUserSelection(); + } + }}> + + {canSubmit ? 'Done' : 'Skip'} + + + ), + headerLeft: () => ( + + + Cancel + + + ), + }); + + const [selectedBadges, setSelectedBadges] = useState(Array()); + 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 ( { top={Animated.useValue(0)} /> - + -- cgit v1.2.3-70-g09d2