From c01a9f1e864560e631147bfe3bf8ab60384dcd33 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 16 Feb 2021 15:37:56 -0800 Subject: Badge Screen UI Changes --- src/assets/images/dummy_badge.png | Bin 0 -> 843 bytes src/assets/images/football.png | Bin 0 -> 5374 bytes src/constants/constants.ts | 2 + src/routes/main/MainStackNavigator.tsx | 3 + src/routes/main/MainStackScreen.tsx | 8 +++ src/screens/badge/BadgeItem.tsx | 58 ++++++++++++++++++ src/screens/badge/BadgeList.tsx | 43 +++++++++++++ src/screens/badge/BadgeListHeader.tsx | 32 ++++++++++ src/screens/badge/BadgeScreenHeader.tsx | 39 ++++++++++++ src/screens/badge/BadgeSelection.tsx | 105 ++++++++++++++++++++++++++++++++ src/screens/badge/index.ts | 9 +++ src/screens/index.ts | 1 + 12 files changed, 300 insertions(+) create mode 100644 src/assets/images/dummy_badge.png create mode 100644 src/assets/images/football.png create mode 100644 src/screens/badge/BadgeItem.tsx create mode 100644 src/screens/badge/BadgeList.tsx create mode 100644 src/screens/badge/BadgeListHeader.tsx create mode 100644 src/screens/badge/BadgeScreenHeader.tsx create mode 100644 src/screens/badge/BadgeSelection.tsx create mode 100644 src/screens/badge/index.ts (limited to 'src') diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/dummy_badge.png new file mode 100644 index 00000000..bcffb6e3 Binary files /dev/null and b/src/assets/images/dummy_badge.png differ diff --git a/src/assets/images/football.png b/src/assets/images/football.png new file mode 100644 index 00000000..2e8214b7 Binary files /dev/null and b/src/assets/images/football.png differ diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 6e2c9e1c..99526474 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -79,6 +79,8 @@ export const NOTIFICATION_GRADIENT = [ 'rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)', ]; +export const BADGE_GRADIENT_FIRST = ['rgba(86, 63, 51, 1)', 'rgba(236, 32, 39, 1)'] +export const BADGE_GRADIENT_REST = ['rgba(78, 54, 41, 1)', 'rgba(236, 32, 39, 1)'] export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 901dd993..3a8ade4f 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -71,6 +71,9 @@ export type MainStackParams = { }; UpdateSPPicture: { goTo: string; + }, + Badge: { + screenType: ScreenType; }; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index aec860f2..b99e2e3a 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -7,6 +7,7 @@ import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AnimatedTutorial, + BadgeSelection, CaptionScreen, CategorySelection, CreateCustomCategory, @@ -231,6 +232,13 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('white', ''), }} /> + ); }; diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx new file mode 100644 index 00000000..6d2a2f2e --- /dev/null +++ b/src/screens/badge/BadgeItem.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import {View, Text, StyleSheet, Image} 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'; + +interface BadgeItemProps { + title: String; + resourcePath: String; + index: Number; +} + +const BadgeItem: React.FC = ({title, index}) => { + return ( + + + + + {title} + + + + ); +}; + +const styles = StyleSheet.create({ + item: { + width: SCREEN_WIDTH / 3 - 20, + height: SCREEN_WIDTH / 3 - 20, + marginLeft: 15, + marginBottom: 12, + borderRadius: 8, + }, + detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'}, + imageStyles: { + width: '31%', + height: '31%', + marginTop: '11%', + }, + textContainer: {marginTop: '16%'}, + title: { + fontSize: normalize(15), + fontWeight: '500', + lineHeight: normalize(17.9), + textAlign: 'center', + color: 'white', + }, +}); + +export default BadgeItem; diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx new file mode 100644 index 00000000..aa95b464 --- /dev/null +++ b/src/screens/badge/BadgeList.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {StyleSheet, SectionList, ScrollView, View} from 'react-native'; +import BadgeItem from './BadgeItem'; +import BadgeHeader from './BadgeListHeader'; +import {SCREEN_HEIGHT} from '../../utils'; + +interface BadgeListProps { + data: any[]; +} + +const BadgeList: React.FC = ({data}) => { + return ( + + + item + index} + renderItem={({item, index}) => ( + + )} + renderSectionHeader={({section: {title}}) => ( + + )} + /> + + + ); +}; + +const styles = StyleSheet.create({ + listContainer: { + flex: 1, + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + }, + scrollViewStyles: { + paddingBottom: SCREEN_HEIGHT * 0.6, + }, +}); + +export default BadgeList; diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx new file mode 100644 index 00000000..57364d22 --- /dev/null +++ b/src/screens/badge/BadgeListHeader.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; +import {SCREEN_WIDTH, normalize} from '../../utils'; + +interface BadgeHeaderProps { + title: String; +} + +const BadgeListHeader: React.FC = ({title}) => { + return ( + + {title} + + ); +}; + +const styles = StyleSheet.create({ + headerContainer: { + width: SCREEN_WIDTH * 0.75, + marginHorizontal: SCREEN_WIDTH * 0.125, + marginBottom: 17, + }, + header: { + fontSize: normalize(20), + fontWeight: '700', + lineHeight: normalize(23.87), + color: '#fff', + textAlign: 'center', + }, +}); + +export default BadgeListHeader; diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx new file mode 100644 index 00000000..6cc576a8 --- /dev/null +++ b/src/screens/badge/BadgeScreenHeader.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils'; + +const BadgeScreenHeader: React.FC = () => { + return ( + + + + Brown University Badges + + + + Search for organizations you are a part of! + + + + ); +}; + +const styles = StyleSheet.create({ + container: {alignItems: 'center'}, + universityTextContainer: {marginTop: 12}, + universityText: { + fontSize: normalize(20), + fontWeight: '700', + lineHeight: normalize(23.87), + color: 'white', + }, + searchTextContainer: {marginTop: 6}, + searchText: { + fontSize: normalize(15), + fontWeight: '500', + lineHeight: normalize(17.9), + color: 'white', + }, +}); + +export default BadgeScreenHeader; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx new file mode 100644 index 00000000..924eefc3 --- /dev/null +++ b/src/screens/badge/BadgeSelection.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { + StatusBar, + SafeAreaView, + View, + StyleSheet, + ScrollView, +} from 'react-native'; +import {BackgroundGradientType} from '../../types'; +import {Background} from '../../components'; +import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; +import LinearGradient from 'react-native-linear-gradient'; +import {BACKGROUND_GRADIENT_MAP} from '../../constants'; +import BadgeList from './BadgeList'; +import BadgeScreenHeader from './BadgeScreenHeader'; + +import Animated from 'react-native-reanimated'; + +import {SearchBar} from '../../components'; +/** + * Home Screen for displaying Tagg post suggestions + * for users to discover and browse + */ + +const DATA = [ + { + title: 'Historically Black Fraternities', + data: ['Pizza', 'Burger', 'Risotto'], + }, + { + title: 'Sides', + 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', + ], + }, + { + title: 'Drinks', + data: ['Water', 'Coke', 'Beer'], + }, + { + title: 'Desserts', + data: ['Cheese Cake', 'Ice Cream'], + }, +]; + +const BadgeSelection: React.FC = () => { + return ( + + + + + + {}} + top={Animated.useValue(0)} + /> + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + searchBarStyle: { + width: '95%', + alignSelf: 'center', + marginTop: SCREEN_HEIGHT * 0.05, + }, + viewContainer: {marginTop: StatusBarHeight}, + listContainer: {marginTop: SCREEN_HEIGHT * 0.05}, +}); + +export default BadgeSelection; diff --git a/src/screens/badge/index.ts b/src/screens/badge/index.ts new file mode 100644 index 00000000..f6b20b83 --- /dev/null +++ b/src/screens/badge/index.ts @@ -0,0 +1,9 @@ +export {default as BadgeSelection} from './BadgeSelection'; +export {default as BadgeItem} from './BadgeItem'; +export {default as BadgeListHeader} from './BadgeListHeader'; +export {default as BadgeList} from './BadgeList'; +export {default as BadgeScreenHeader} from './BadgeScreenHeader'; + + + + diff --git a/src/screens/index.ts b/src/screens/index.ts index faf3d0b7..50ada3d1 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -4,3 +4,4 @@ export * from './profile'; export * from './search'; export * from './suggestedPeople'; export * from './suggestedPeopleOnboarding'; +export * from './badge'; -- cgit v1.2.3-70-g09d2 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 From 47053e42a60151f04cb8a18ea86e4a96d03103b8 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 25 Feb 2021 12:28:48 -0800 Subject: UI update --- src/screens/badge/BadgeItem.tsx | 8 ++--- src/screens/badge/BadgeList.tsx | 61 ++++++++++++++++++------------------ src/screens/badge/BadgeSelection.tsx | 18 +++++------ 3 files changed, 42 insertions(+), 45 deletions(-) (limited to 'src') diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx index 790fea0a..ec47d7b5 100644 --- a/src/screens/badge/BadgeItem.tsx +++ b/src/screens/badge/BadgeItem.tsx @@ -12,7 +12,6 @@ interface BadgeItemProps { index: Number; selected: boolean; onSelection: (ikey: string) => void; - itemKey: string; } const BadgeItem: React.FC = ({ @@ -21,10 +20,9 @@ const BadgeItem: React.FC = ({ selected, index, onSelection, - itemKey, }) => { return ( - onSelection(itemKey)}> + onSelection(title)}> void; } -const BadgeList: React.FC = ({data, selectedBadges, selectKey}) => { - +const BadgeList: React.FC = ({ + data, + selectedBadges, + selectKey, +}) => { return ( - - - item + index} - extraData={selectedBadges} - renderItem={({item: {badgeName, badgeImage}, index}) => { - return ( - - ); - }} - renderSectionHeader={({section: {title}}) => ( - - )} - /> - - + + item + index} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + + ); + }} + renderSectionHeader={({section: {title}}) => ( + + )} + /> + ); }; const styles = StyleSheet.create({ listContainer: { - flex: 1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', + flexGrow: 1, }, scrollViewStyles: { paddingBottom: SCREEN_HEIGHT * 0.6, diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 3c718202..fa709832 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -2,7 +2,7 @@ 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'; +import {StatusBarHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import LinearGradient from 'react-native-linear-gradient'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import BadgeList from './BadgeList'; @@ -216,6 +216,8 @@ const BadgeSelection: React.FC = ({navigation}) => { const reqBody = JSON.stringify({ badges: selectedBadges, }); + console.log(ADD_USER_BADGES); + console.log(reqBody); const response = await fetch(ADD_USER_BADGES, { method: 'POST', headers: { @@ -226,7 +228,7 @@ const BadgeSelection: React.FC = ({navigation}) => { }); const status = response.status; const data = await response.json(); - console.log(response); + console.log(data); } catch (error) { console.log(error); } @@ -245,13 +247,11 @@ const BadgeSelection: React.FC = ({navigation}) => { onCancel={() => {}} top={Animated.useValue(0)} /> - - - + -- cgit v1.2.3-70-g09d2 From 2360e774d94e271d1d9db0d5b92b801b9325535e Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 25 Feb 2021 12:39:31 -0800 Subject: TMA-634-indentation and unused variables removed --- src/components/index.ts | 1 - src/components/taggs/SocialMediaInfo.tsx | 2 +- src/constants/constants.ts | 10 ++++-- src/routes/main/MainStackNavigator.tsx | 2 +- src/routes/tabs/NavigationBar.tsx | 7 ++-- src/screens/badge/BadgeItem.tsx | 1 - src/screens/badge/BadgeList.tsx | 6 ++-- src/screens/badge/BadgeScreenHeader.tsx | 2 +- src/screens/badge/BadgeSelection.tsx | 41 ++++++++++------------ src/screens/badge/index.ts | 4 --- .../onboarding/InvitationCodeVerification.tsx | 5 ++- src/screens/profile/SocialMediaTaggs.tsx | 7 +++- src/services/FCMService.ts | 2 +- src/services/ReportingService.ts | 5 +-- src/store/reducers/userBlockReducer.ts | 5 +-- src/utils/common.ts | 4 ++- 16 files changed, 55 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/components/index.ts b/src/components/index.ts index 0a7c189b..d5649323 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,4 +6,3 @@ export * from './taggs'; export * from './comments'; export * from './moments'; export * from './suggestedPeople'; - diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx index 46e651f9..f05ad503 100644 --- a/src/components/taggs/SocialMediaInfo.tsx +++ b/src/components/taggs/SocialMediaInfo.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {StyleSheet, Text, View} from 'react-native'; -import { ScreenType } from '../../types'; +import {ScreenType} from '../../types'; import {SocialIcon} from '..'; import {handleOpenSocialUrlOnBrowser} from '../../utils'; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 99526474..84106df0 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -79,8 +79,14 @@ export const NOTIFICATION_GRADIENT = [ 'rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)', ]; -export const BADGE_GRADIENT_FIRST = ['rgba(86, 63, 51, 1)', 'rgba(236, 32, 39, 1)'] -export const BADGE_GRADIENT_REST = ['rgba(78, 54, 41, 1)', 'rgba(236, 32, 39, 1)'] +export const BADGE_GRADIENT_FIRST = [ + 'rgba(86, 63, 51, 1)', + 'rgba(236, 32, 39, 1)', +]; +export const BADGE_GRADIENT_REST = [ + 'rgba(78, 54, 41, 1)', + 'rgba(236, 32, 39, 1)', +]; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 3a8ade4f..4230f4a6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -71,7 +71,7 @@ export type MainStackParams = { }; UpdateSPPicture: { goTo: string; - }, + }; Badge: { screenType: ScreenType; }; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 49713d66..5d4f7cf2 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -19,9 +19,10 @@ const NavigationBar: React.FC = () => { (state: RootState) => state, ); - const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState< - boolean - >(false); + const [ + unreadNotificationsPresent, + setUnreadNotificationsPresent, + ] = useState(false); useEffect(() => { const determine = async () => { diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx index ec47d7b5..d7c0b74a 100644 --- a/src/screens/badge/BadgeItem.tsx +++ b/src/screens/badge/BadgeItem.tsx @@ -1,6 +1,5 @@ import React from 'react'; 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'; diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx index 39d0a948..93932123 100644 --- a/src/screens/badge/BadgeList.tsx +++ b/src/screens/badge/BadgeList.tsx @@ -1,5 +1,5 @@ -import React, {useState} from 'react'; -import {StyleSheet, SectionList, ScrollView, View} from 'react-native'; +import React from 'react'; +import {StyleSheet, SectionList, ScrollView} from 'react-native'; import BadgeItem from './BadgeItem'; import BadgeHeader from './BadgeListHeader'; import {SCREEN_HEIGHT} from '../../utils'; @@ -18,7 +18,7 @@ const BadgeList: React.FC = ({ return ( item + index} diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx index 7f722e28..8996282a 100644 --- a/src/screens/badge/BadgeScreenHeader.tsx +++ b/src/screens/badge/BadgeScreenHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; -import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils'; +import {normalize} from '../../utils'; const BadgeScreenHeader: React.FC = () => { return ( diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index fa709832..9ed1b08f 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,8 +1,7 @@ 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, SCREEN_WIDTH} from '../../utils'; +import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; import LinearGradient from 'react-native-linear-gradient'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import BadgeList from './BadgeList'; @@ -159,34 +158,18 @@ const BadgeSelection: React.FC = ({navigation}) => { navigation.setOptions({ headerRight: () => ( { if (canSubmit) { uploadUserSelection(); } }}> - - {canSubmit ? 'Done' : 'Skip'} - + {canSubmit ? 'Done' : 'Skip'} ), headerLeft: () => ( - - - Cancel - + + Cancel ), }); @@ -269,6 +252,20 @@ const styles = StyleSheet.create({ }, viewContainer: {marginTop: StatusBarHeight}, listContainer: {marginTop: SCREEN_HEIGHT * 0.05}, + rightButtonContainer: {marginRight: 24}, + rightButton: { + color: '#FFFFFF', + fontWeight: 'bold', + fontSize: 15, + lineHeight: 18, + }, + leftButtonContainer: {marginLeft: 24}, + leftButton: { + color: '#FFFFFF', + fontWeight: '500', + fontSize: 15, + lineHeight: 18, + }, }); export default BadgeSelection; diff --git a/src/screens/badge/index.ts b/src/screens/badge/index.ts index f6b20b83..217aa7e8 100644 --- a/src/screens/badge/index.ts +++ b/src/screens/badge/index.ts @@ -3,7 +3,3 @@ export {default as BadgeItem} from './BadgeItem'; export {default as BadgeListHeader} from './BadgeListHeader'; export {default as BadgeList} from './BadgeList'; export {default as BadgeScreenHeader} from './BadgeScreenHeader'; - - - - diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx index 903a9912..a0213530 100644 --- a/src/screens/onboarding/InvitationCodeVerification.tsx +++ b/src/screens/onboarding/InvitationCodeVerification.tsx @@ -78,7 +78,10 @@ const InvitationCodeVerification: React.FC = ({ Alert.alert(ERROR_INVALID_INVITATION_CODE); } } catch (error) { - Alert.alert(ERROR_VERIFICATION_FAILED_SHORT, ERROR_DOUBLE_CHECK_CONNECTION); + Alert.alert( + ERROR_VERIFICATION_FAILED_SHORT, + ERROR_DOUBLE_CHECK_CONNECTION, + ); return { name: 'Verification error', description: error, diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index 45d417a6..466ba509 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -12,7 +12,12 @@ import { } from '../../components'; import {AVATAR_GRADIENT} from '../../constants'; import {ProfileStackParams} from '../../routes'; -import {SimplePostType, TwitterPostType, SocialAccountType, ScreenType} from '../../types'; +import { + SimplePostType, + TwitterPostType, + SocialAccountType, + ScreenType, +} from '../../types'; import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils'; import {useSelector} from 'react-redux'; import {RootState} from '../../store/rootReducer'; diff --git a/src/services/FCMService.ts b/src/services/FCMService.ts index b6cd18af..84f30f09 100644 --- a/src/services/FCMService.ts +++ b/src/services/FCMService.ts @@ -134,7 +134,7 @@ class FCMService { // TODO: Get {name, params} of screen when user must be redirected to // Redirected to Notification Screen for now const redirectTo = 'Notifications'; - /* TODO: Check login status and redirect user/store screen to async as + /* TODO: Check login status and redirect user/store screen to async as initialRoute for NavigationBar Stack */ RootNavigation.navigate(redirectTo); } diff --git a/src/services/ReportingService.ts b/src/services/ReportingService.ts index 8c0a4bfb..76883e81 100644 --- a/src/services/ReportingService.ts +++ b/src/services/ReportingService.ts @@ -3,10 +3,7 @@ import {REPORT_ISSUE_ENDPOINT} from '../constants'; import {Alert} from 'react-native'; import AsyncStorage from '@react-native-community/async-storage'; -import { - ERROR_SOMETHING_WENT_WRONG, - MARKED_AS_MSG, -} from '../constants/strings'; +import {ERROR_SOMETHING_WENT_WRONG, MARKED_AS_MSG} from '../constants/strings'; export const sendReport = async ( moment_id: string, diff --git a/src/store/reducers/userBlockReducer.ts b/src/store/reducers/userBlockReducer.ts index 90e4a04a..64bdda30 100644 --- a/src/store/reducers/userBlockReducer.ts +++ b/src/store/reducers/userBlockReducer.ts @@ -11,8 +11,9 @@ const userBlockSlice = createSlice({ updateBlockedList: (state, action) => { const {isBlocked, data} = action.payload; - if (!isBlocked) state.blockedUsers.push(data); - else { + if (!isBlocked) { + state.blockedUsers.push(data); + } else { state.blockedUsers = state.blockedUsers.filter( (user) => user.username != data.username, ); diff --git a/src/utils/common.ts b/src/utils/common.ts index 8efe1f6a..6a8b66d3 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -88,7 +88,9 @@ export const haveUnreadNotifications = async ( continue; } const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false; - if (unread) return true; + if (unread) { + return true; + } } return false; }; -- cgit v1.2.3-70-g09d2 From 10aa8805038f07b1affdcfa1b924810a2c89bee1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Mar 2021 17:20:46 -0500 Subject: commented out search bar, added screen to onboarding flow, fixed some layout issues --- src/constants/strings.ts | 12 +++-- src/routes/main/MainStackNavigator.tsx | 3 -- src/routes/main/MainStackScreen.tsx | 7 --- .../SuggestedPeopleOnboardingStackNavigator.tsx | 1 + .../SuggestedPeopleOnboardingStackScreen.tsx | 8 +++ src/screens/badge/BadgeList.tsx | 52 +++++++++--------- src/screens/badge/BadgeScreenHeader.tsx | 5 +- src/screens/badge/BadgeSelection.tsx | 63 ++++++++++------------ .../SuggestedPeopleUploadPictureScreen.tsx | 1 + src/store/actions/user.ts | 12 +++++ 10 files changed, 88 insertions(+), 76 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 7652fccd..93da6e59 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -14,7 +14,6 @@ export const ERROR_DELETED_OBJECT = 'Oh sad! Looks like the comment / moment was export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network connection and retry'; export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password'; export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one'; -export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one'; export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information'; export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!'; export const ERROR_FAILED_TO_DELETE_COMMENT = 'Unable to delete comment, refresh and try again!'; @@ -28,20 +27,24 @@ export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please c export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again'; export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and password, and try again'; export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page πŸ˜“, try again in a couple minutes'; +export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one'; +export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one'; export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed πŸ˜“'; export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`; export const ERROR_REGISTRATION = (str: string) => `Registration failed πŸ˜”, ${str}`; -export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year'; export const ERROR_SELECT_BIRTHDAY = 'Please select your birthday'; +export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year'; export const ERROR_SELECT_GENDER = 'Please select your gender'; export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins'; -export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins'; export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app'; export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; +export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins'; export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again'; export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile'; export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!'; +export const ERROR_UPLOAD_BADGES = 'Unable to upload your badges. Please retry'; +export const ERROR_BADGES_EXCEED_LIMIT = 'You can\'t have more than 5 badges!'; export const ERROR_UPLOAD_LARGE_PROFILE_PIC = "Can't have the first image seen on the profile be blank, please upload a large picture"; export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry'; export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture"; @@ -51,12 +54,11 @@ export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; export const NO_RESULTS_FOUND = 'No Results Found!'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; +export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} πŸŽ‰`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; -export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!'; -export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one'; export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 4230f4a6..901dd993 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -72,9 +72,6 @@ export type MainStackParams = { UpdateSPPicture: { goTo: string; }; - Badge: { - screenType: ScreenType; - }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 42b096f1..91ed2f70 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -226,13 +226,6 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('white', ''), }} /> - ); }; diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx index 85249034..737c503c 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -5,6 +5,7 @@ export type SuggestedPeopleOnboardingStackParams = { UploadPicture: { goTo: string; }; + BadgeSelection: undefined; }; export const SuggestedPeopleOnboardingStack = createStackNavigator(); diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx index 61cc694c..d1a6e5e1 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -3,6 +3,7 @@ import {SuggestedPeopleOnboardingStack} from './SuggestedPeopleOnboardingStackNa import { SuggestedPeopleWelcomeScreen, SuggestedPeopleUploadPictureScreen, + BadgeSelection, } from '../../screens'; import {SCREEN_WIDTH} from '../../utils'; import {headerBarOptions} from '../main'; @@ -30,6 +31,13 @@ const SuggestedPeopleOnboardingStackScreen: React.FC = () => { ...headerBarOptions('white', ''), }} /> + ); }; diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx index 93932123..f3e96d60 100644 --- a/src/screens/badge/BadgeList.tsx +++ b/src/screens/badge/BadgeList.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import {StyleSheet, SectionList, ScrollView} from 'react-native'; +import {SectionList, StyleSheet} from 'react-native'; +import {SCREEN_HEIGHT} from '../../utils'; import BadgeItem from './BadgeItem'; import BadgeHeader from './BadgeListHeader'; -import {SCREEN_HEIGHT} from '../../utils'; interface BadgeListProps { data: any[]; @@ -16,29 +16,28 @@ const BadgeList: React.FC = ({ selectKey, }) => { return ( - - item + index} - extraData={selectedBadges} - renderItem={({item: {badgeName, badgeImage}, index}) => { - return ( - - ); - }} - renderSectionHeader={({section: {title}}) => ( - - )} - /> - + item + index} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + + ); + }} + renderSectionHeader={({section: {title}}) => ( + + )} + /> ); }; @@ -48,9 +47,10 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', alignItems: 'center', flexGrow: 1, + paddingBottom: SCREEN_HEIGHT * 0.1, }, scrollViewStyles: { - paddingBottom: SCREEN_HEIGHT * 0.6, + paddingBottom: SCREEN_HEIGHT * 0.5, }, }); diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx index 8996282a..fd250585 100644 --- a/src/screens/badge/BadgeScreenHeader.tsx +++ b/src/screens/badge/BadgeScreenHeader.tsx @@ -19,7 +19,10 @@ const BadgeScreenHeader: React.FC = () => { }; const styles = StyleSheet.create({ - container: {alignItems: 'center'}, + container: { + alignItems: 'center', + marginBottom: '1%', + }, universityTextContainer: {marginTop: 12}, universityText: { fontSize: normalize(20), diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 9ed1b08f..4754960b 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,18 +1,21 @@ +import AsyncStorage from '@react-native-community/async-storage'; +import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; -import {StatusBar, SafeAreaView, View, StyleSheet} from 'react-native'; -import {BackgroundGradientType} from '../../types'; -import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; +import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; -import {BACKGROUND_GRADIENT_MAP} from '../../constants'; +import {useDispatch} from 'react-redux'; +import {ADD_USER_BADGES, BACKGROUND_GRADIENT_MAP} from '../../constants'; +import { + ERROR_BADGES_EXCEED_LIMIT, + ERROR_UPLOAD_BADGES, +} from '../../constants/strings'; +import {suggestedPeopleBadgesFinished} from '../../store/actions'; +import {BackgroundGradientType} from '../../types'; +import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; 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 Badge Selections @@ -136,10 +139,6 @@ const DATA = [ }, ]; -import {TouchableOpacity} from 'react-native-gesture-handler'; -import {Text} from 'react-native-animatable'; -import {useDispatch} from 'react-redux'; - type BadgeSelectionParamList = { BadgeList: any[]; }; @@ -167,14 +166,9 @@ const BadgeSelection: React.FC = ({navigation}) => { {canSubmit ? 'Done' : 'Skip'} ), - headerLeft: () => ( - - Cancel - - ), }); - const [selectedBadges, setSelectedBadges] = useState(Array()); + const [selectedBadges, setSelectedBadges] = useState([]); const selectKey = (key: string) => { if (selectedBadges.includes(key)) { const selectedBadgesArray = [...selectedBadges]; @@ -195,25 +189,25 @@ const BadgeSelection: React.FC = ({navigation}) => { const uploadUserSelection = async () => { try { - const token = await getTokenOrLogout(dispatch); - const reqBody = JSON.stringify({ - badges: selectedBadges, - }); - console.log(ADD_USER_BADGES); - console.log(reqBody); + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('badges', JSON.stringify(selectedBadges)); const response = await fetch(ADD_USER_BADGES, { method: 'POST', headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'multipart/form-data', Authorization: 'Token ' + token, }, - body: reqBody, + body: form, }); - const status = response.status; - const data = await response.json(); - console.log(data); + if (response.status === 400) { + Alert.alert(ERROR_BADGES_EXCEED_LIMIT); + return; + } + dispatch(suggestedPeopleBadgesFinished()); } catch (error) { console.log(error); + Alert.alert(ERROR_UPLOAD_BADGES); } }; @@ -225,11 +219,12 @@ const BadgeSelection: React.FC = ({navigation}) => { - {}} top={Animated.useValue(0)} - /> + /> */} { const success = await sendSuggestedPeoplePhoto(image); if (success) { dispatch(uploadedSuggestedPeoplePhoto(image)); + navigation.push('BadgeSelection'); } else { Alert.alert(ERROR_UPLOAD); } diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index a9f9d945..4f1da47c 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -174,6 +174,18 @@ export const uploadedSuggestedPeoplePhoto = ( type: setSuggestedPeopleImage.type, payload: {suggestedPeopleImage: imageUri}, }); + } catch (error) { + console.log(error); + } +}; + +export const suggestedPeopleBadgesFinished = (): ThunkAction< + Promise, + RootState, + unknown, + Action +> => async (dispatch) => { + try { dispatch({ type: setSuggestedPeopleLinked.type, payload: {suggested_people_linked: 1}, -- cgit v1.2.3-70-g09d2