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 f14a3582e6b8dc19573b48b035fe31c560dac77a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 2 Mar 2021 16:25:49 -0500 Subject: renamed and changed logic to check for multiple versions --- src/constants/api.ts | 2 +- src/routes/Routes.tsx | 6 +++--- src/services/CommonService.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..380dd061 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -4,7 +4,7 @@ const BASE_URL: string = 'http://127.0.0.1:8000/'; // local server const API_URL: string = BASE_URL + 'api/'; export const LOGIN_ENDPOINT: string = API_URL + 'login/'; -export const VERSION_ENDPOINT: string = API_URL + 'version/'; +export const VERSION_ENDPOINT: string = API_URL + 'version/v2/'; export const REGISTER_ENDPOINT: string = API_URL + 'register/'; export const EDIT_PROFILE_ENDPOINT: string = API_URL + 'edit-profile/'; export const SEND_OTP_ENDPOINT: string = API_URL + 'send-otp/'; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 1cbc9bc5..01ffacab 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react'; import DeviceInfo from 'react-native-device-info'; import SplashScreen from 'react-native-splash-screen'; import {useDispatch, useSelector} from 'react-redux'; -import {fcmService, getLiveVersion} from '../services'; +import {fcmService, getCurrentLiveVersions} from '../services'; import { updateNewNotificationReceived, updateNewVersionAvailable, @@ -54,8 +54,8 @@ const Routes: React.FC = () => { useEffect(() => { const checkVersion = async () => { - const liveVersion = await getLiveVersion(); - if (liveVersion && liveVersion !== DeviceInfo.getVersion()) { + const liveVersions = await getCurrentLiveVersions(); + if (liveVersions.includes(DeviceInfo.getVersion())) { setNewVersionAvailable(true); dispatch(updateNewVersionAvailable(true)); } diff --git a/src/services/CommonService.ts b/src/services/CommonService.ts index 9fa7417f..5bc1174d 100644 --- a/src/services/CommonService.ts +++ b/src/services/CommonService.ts @@ -22,7 +22,7 @@ export const loadImageFromURL = async (url: string) => { } }; -export const getLiveVersion = async () => { +export const getCurrentLiveVersions = async () => { try { const response = await fetch(VERSION_ENDPOINT, {method: 'GET'}); return response.status === 200 ? await response.json() : undefined; -- cgit v1.2.3-70-g09d2 From 7a5ae728ee96acdf6b52fefa6ebaf7640a8724a1 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 2 Mar 2021 13:04:27 -0800 Subject: TMA-663-Updated Search init --- src/components/search/RecentSearches.tsx | 2 + src/components/search/SearchResultCell.tsx | 100 +++++++++++++++++++ src/components/search/SearchResultList.tsx | 49 ++++++++++ src/components/search/SearchResultsBackground.tsx | 1 - src/components/search/index.ts | 1 + src/screens/search/SearchScreen.tsx | 58 ++++++----- src/screens/search/mock.ts | 114 ++++++++++++++++++++++ src/utils/users.ts | 5 + 8 files changed, 307 insertions(+), 23 deletions(-) create mode 100644 src/components/search/SearchResultCell.tsx create mode 100644 src/components/search/SearchResultList.tsx create mode 100644 src/screens/search/mock.ts (limited to 'src') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index bebf6bcf..43a26514 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -42,6 +42,7 @@ const RecentSearches: React.FC = (props) => { const styles = StyleSheet.create({ mainContainer: { marginLeft: '3%', + padding : 20, }, container: { flexDirection: 'row', @@ -53,6 +54,7 @@ const styles = StyleSheet.create({ marginBottom: '5%', }, clear: { + fontSize: 18, fontWeight: 'bold', color: TAGG_LIGHT_BLUE, diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx new file mode 100644 index 00000000..46d5ee44 --- /dev/null +++ b/src/components/search/SearchResultCell.tsx @@ -0,0 +1,100 @@ +import React, {useEffect, useState} from 'react'; +import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; +import ProfilePreview from '../profile/ProfilePreview'; +import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; +import {normalize} from '../../utils'; +import {defaultUserProfile} from '../../utils/users'; +import {loadImageFromURL} from '../../services'; + + +const SearchResultsCell: React.FC = ({ + item: {id, name, username, first_name, last_name, thumbnail_url}, + }) => { + const [avatar, setAvatar] = useState(''); + useEffect(() => { + (async () => { + const response = await loadImageFromURL(thumbnail_url); + if (response) { + setAvatar(response); + } + })(); + }, []); + + const userCell = () => { + return ( + + + + + {username} + + + {first_name + ' ' + last_name} + + + + ); + }; + + const categoryCell = () => { + return ( + + + + + {name} + + + + ); + }; + + return ( + <> + {name !== undefined && categoryCell()} + {name === undefined && userCell()} + + ); + }; + + export default SearchResultsCell \ No newline at end of file diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx new file mode 100644 index 00000000..702ce7c8 --- /dev/null +++ b/src/components/search/SearchResultList.tsx @@ -0,0 +1,49 @@ +import React, {useEffect, useState} from 'react'; +import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; +import ProfilePreview from '../profile/ProfilePreview'; +import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; +import {normalize} from '../../utils'; +import {defaultUserProfile} from '../../utils/users'; +import {loadImageFromURL} from '../../services'; +import SearchResultsCell from './SearchResultCell'; + +interface SearchResultsProps { + results: []; + previewType: PreviewType; + screenType: ScreenType; +} + +const SearchResultList: React.FC = ({results}) => { + return ( + + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title}}) => { + if (title === 'categories') { + return ; + } + return ( + + ); + }} + /> + + ); +}; + +const styles = StyleSheet.create({ + containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, + container: {flex: 1, marginTop: 24}, +}); + +export default SearchResultList; diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 77b1821d..fa4e18ca 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -34,7 +34,6 @@ const styles = StyleSheet.create({ flex: 1, height: SCREEN_HEIGHT, width: SCREEN_WIDTH, - padding: 20, position: 'absolute', backgroundColor: '#fff', zIndex: 0, diff --git a/src/components/search/index.ts b/src/components/search/index.ts index 08052f77..7418f0ba 100644 --- a/src/components/search/index.ts +++ b/src/components/search/index.ts @@ -3,5 +3,6 @@ export {default as SearchHeader} from './SearchHeader'; export {default as SearchBar} from './SearchBar'; export {default as Explore} from './Explore'; export {default as SearchResultsBackground} from './SearchResultsBackground'; +export {default as SearchResultList} from './SearchResultList'; export {default as SearchResults} from './SearchResults'; export {default as DiscoverUsers} from './DiscoverUsers'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 84efa931..c3bd9fec 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -18,6 +18,7 @@ import { SearchHeader, SearchResults, SearchResultsBackground, + SearchResultList, TabsGradient, } from '../../components'; import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; @@ -25,6 +26,7 @@ import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import MockResults from './mock'; const NO_USER: UserType = { userId: '', username: '', @@ -38,7 +40,7 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState>([]); + const [results, setResults] = useState([]); const [recents, setRecents] = useState>( recentSearches ?? [], ); @@ -64,25 +66,37 @@ const SearchScreen: React.FC = () => { return; } const loadResults = async (q: string) => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - const status = response.status; - if (status === 200) { - let searchResults = await response.json(); - setResults(searchResults); - return; - } - setResults([]); - } catch (error) { - console.log(error); - setResults([]); - } + // try { + // const token = await AsyncStorage.getItem('token'); + // const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, { + // method: 'GET', + // headers: { + // Authorization: 'Token ' + token, + // }, + // }); + // const status = response.status; + // if (status === 200) { + // let searchResults = await response.json(); + // setResults(searchResults); + // return; + // } + // setResults([]); + // } catch (error) { + // console.log(error); + // setResults([]); + // } + const searchResults = MockResults(); + const sanitizedResult = [ + { + title: 'categories', + data: searchResults.categories, + }, + { + title: 'users', + data: searchResults.users, + }, + ]; + setResults(sanitizedResult); }; loadResults(query); }, [query]); @@ -161,7 +175,7 @@ const SearchScreen: React.FC = () => { /> - {results.length === 0 && recents.length !== 0 ? ( + {results && Object.keys(results).length === 0 ? ( { screenType={ScreenType.Search} /> ) : ( - { + return { + categories: [ + { + id: 11, + name: "Brown '21", + }, + { + id: 12, + name: "Brown '22", + }, + { + id: 13, + name: "Brown '23", + }, + { + id: 14, + name: "Brown '24", + }, + ], + users: [ + { + id: 'd5295557-59ce-49fc-aa8a-442874dbffc3', + username: 'foobar', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-d5295557-59ce-49fc-aa8a-442874dbffc3-thumbnail.jpg', + }, + { + id: '31e93eb5-ccc9-4743-b053-eff368e23fa8', + username: 'foobar2', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-31e93eb5-ccc9-4743-b053-eff368e23fa8-thumbnail.jpg', + }, + { + id: 'b1b68df9-97ac-48de-b00d-eab10a6a644a', + username: 'foobar3', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b1b68df9-97ac-48de-b00d-eab10a6a644a-thumbnail.jpg', + }, + { + id: 'b89c88b3-6b2f-4b6c-85d9-a03ff5396113', + username: 'foobar4', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b89c88b3-6b2f-4b6c-85d9-a03ff5396113-thumbnail.jpg', + }, + { + id: '73b4496a-0aa8-4115-98da-2070bf326134', + username: 'foobar5', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-73b4496a-0aa8-4115-98da-2070bf326134-thumbnail.jpg', + }, + { + id: '329763b8-931e-4d4d-8a07-003374d38497', + username: 'foobar6', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-329763b8-931e-4d4d-8a07-003374d38497-thumbnail.jpg', + }, + { + id: '9e82fea2-cddc-41e1-be05-6873f58138ca', + username: 'foobar7', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-9e82fea2-cddc-41e1-be05-6873f58138ca-thumbnail.jpg', + }, + { + id: '6e5b8892-4384-45a1-bc0a-8f2c9d614fbc', + username: 'foobar8', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-6e5b8892-4384-45a1-bc0a-8f2c9d614fbc-thumbnail.jpg', + }, + { + id: 'c49b01c6-9151-4654-8fae-834adfa15727', + username: 'foobar9', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-c49b01c6-9151-4654-8fae-834adfa15727-thumbnail.jpg', + }, + { + id: '5b394d5b-62e3-405e-8ecd-7433517ef688', + username: 'foobar10', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-5b394d5b-62e3-405e-8ecd-7433517ef688-thumbnail.jpg', + }, + { + id: '698e38f0-24ed-404c-9f0c-6a24e43af576', + username: 'fooo', + first_name: 'wefwef', + last_name: 'wefwef', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-698e38f0-24ed-404c-9f0c-6a24e43af576-thumbnail.jpg', + }, + ], + }; +}; + +export default MockResults; diff --git a/src/utils/users.ts b/src/utils/users.ts index ca917ae4..b8faf206 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -159,3 +159,8 @@ export const checkIfUserIsBlocked = async ( } return await isUserBlocked(userId, loggedInUser.userId, token); }; + +export const defaultUserProfile = () => { + const defaultImage = require('../assets/images/avatar-placeholder.png'); + return defaultImage; +}; -- cgit v1.2.3-70-g09d2 From af349a745bb00b5260f84909320d511ae9d0af2b Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 2 Mar 2021 17:28:02 -0800 Subject: updated formatting, minor changes and integration testing --- src/assets/images/bwbadges.png | Bin 0 -> 528 bytes src/assets/images/bwbadges@2x.png | Bin 0 -> 991 bytes src/assets/images/bwbadges@3x.png | Bin 0 -> 1438 bytes src/assets/images/search.png | Bin 0 -> 354 bytes src/assets/images/search@2x.png | Bin 0 -> 643 bytes src/assets/images/search@3x.png | Bin 0 -> 901 bytes src/components/search/SearchResultCell.tsx | 208 ++++++++++++++++------------- src/components/search/SearchResultList.tsx | 64 ++++----- src/constants/api.ts | 1 + src/screens/search/SearchScreen.tsx | 100 +++++++++----- src/screens/search/mock.ts | 4 + 11 files changed, 218 insertions(+), 159 deletions(-) create mode 100644 src/assets/images/bwbadges.png create mode 100644 src/assets/images/bwbadges@2x.png create mode 100644 src/assets/images/bwbadges@3x.png create mode 100644 src/assets/images/search.png create mode 100644 src/assets/images/search@2x.png create mode 100644 src/assets/images/search@3x.png (limited to 'src') diff --git a/src/assets/images/bwbadges.png b/src/assets/images/bwbadges.png new file mode 100644 index 00000000..3a337775 Binary files /dev/null and b/src/assets/images/bwbadges.png differ diff --git a/src/assets/images/bwbadges@2x.png b/src/assets/images/bwbadges@2x.png new file mode 100644 index 00000000..60c2f995 Binary files /dev/null and b/src/assets/images/bwbadges@2x.png differ diff --git a/src/assets/images/bwbadges@3x.png b/src/assets/images/bwbadges@3x.png new file mode 100644 index 00000000..874c0c4d Binary files /dev/null and b/src/assets/images/bwbadges@3x.png differ diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 00000000..ba9906ba Binary files /dev/null and b/src/assets/images/search.png differ diff --git a/src/assets/images/search@2x.png b/src/assets/images/search@2x.png new file mode 100644 index 00000000..fa133ae1 Binary files /dev/null and b/src/assets/images/search@2x.png differ diff --git a/src/assets/images/search@3x.png b/src/assets/images/search@3x.png new file mode 100644 index 00000000..3ea4ce15 Binary files /dev/null and b/src/assets/images/search@3x.png differ diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 46d5ee44..cdeed922 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -1,100 +1,128 @@ -import React, {useEffect, useState} from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; -import ProfilePreview from '../profile/ProfilePreview'; -import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; -import {normalize} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; -import {loadImageFromURL} from '../../services'; +import React, { useEffect, useState } from 'react'; +import { Image, StyleSheet, Text, View } from 'react-native'; +import { loadImageFromURL } from '../../services'; +import { ProfilePreviewType } from '../../types'; +import { normalize, SCREEN_WIDTH } from '../../utils'; +import { defaultUserProfile } from '../../utils/users'; +interface SearchResults { + profileData: ProfilePreviewType; +} -const SearchResultsCell: React.FC = ({ - item: {id, name, username, first_name, last_name, thumbnail_url}, - }) => { - const [avatar, setAvatar] = useState(''); - useEffect(() => { - (async () => { - const response = await loadImageFromURL(thumbnail_url); - if (response) { - setAvatar(response); +const SearchResultsCell: React.FC = ({ + profileData: { + id, + name, + username, + first_name, + last_name, + thumbnail_url, + category, + }, +}) => { + const [avatar, setAvatar] = useState(''); + useEffect(() => { + (async () => { + if (thumbnail_url !== undefined) { + try { + const response = await loadImageFromURL(thumbnail_url); + if (response) { + setAvatar(response); + } + } catch (error) { + console.log('Error while downloading ', error); + throw error; } - })(); - }, []); - - const userCell = () => { - return ( - - - - - {username} - - - {first_name + ' ' + last_name} - - + } + })(); + }, [thumbnail_url]); + + const userCell = () => { + return ( + + + + {`@${username}`} + + {first_name + ' ' + last_name} + - ); - }; - - const categoryCell = () => { - return ( - + + ); + }; + + const searchIcon = () => { + return require('../../assets/images/search.png'); + }; + + const universityIcon = () => { + return require('../../assets/images/bwbadges.png'); + }; + + const categoryCell = () => { + return ( + + - - - {name} - - - ); - }; - - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - + + {name} + + ); }; - export default SearchResultsCell \ No newline at end of file + return ( + <> + {name !== undefined && categoryCell()} + {name === undefined && userCell()} + + ); +}; + +const styles = StyleSheet.create({ + cellContainer: { + flexDirection: 'row', + marginHorizontal: SCREEN_WIDTH * 0.08, + marginBottom: SCREEN_WIDTH * 0.08, + }, + imageContainer: { + width: SCREEN_WIDTH * 0.112, + height: SCREEN_WIDTH * 0.112, + borderRadius: (SCREEN_WIDTH * 0.112) / 2, + }, + categoryBackground: { + backgroundColor: 'rgba(196, 196, 196, 0.45)', + justifyContent: 'center', + alignItems: 'center', + }, + categoryImage: { + width: '40%', + height: '40%', + }, + initialTextContainer: { + marginLeft: SCREEN_WIDTH * 0.08, + flexDirection: 'column', + justifyContent: 'center', + }, + initialTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, + secondaryTextStyle: { + fontWeight: '500', + fontSize: normalize(12), + color: '#828282', + }, + multiText: {justifyContent: 'space-between'}, +}); + +export default SearchResultsCell; diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 702ce7c8..c464e7b1 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,10 +1,11 @@ -import React, {useEffect, useState} from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; -import ProfilePreview from '../profile/ProfilePreview'; -import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; -import {normalize} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; -import {loadImageFromURL} from '../../services'; +import React from 'react'; +import { + SectionList, + StyleSheet, + View +} from 'react-native'; +import { PreviewType, ScreenType } from '../../types'; +import { normalize, SCREEN_HEIGHT } from '../../utils'; import SearchResultsCell from './SearchResultCell'; interface SearchResultsProps { @@ -13,37 +14,36 @@ interface SearchResultsProps { screenType: ScreenType; } +const sectionHeader: React.FC = (showBorder: Boolean) => { + if (showBorder) { + return ; + } + return null; +}; + const SearchResultList: React.FC = ({results}) => { return ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title}}) => { - if (title === 'categories') { - return ; - } - return ( - - ); - }} - /> - + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title}}) => + sectionHeader(title !== 'categories') + } + /> ); }; const styles = StyleSheet.create({ - containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, - container: {flex: 1, marginTop: 24}, + container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02}, + sectionHeaderStyle: { + width: '100%', + height: 0.5, + marginBottom: normalize(24), + backgroundColor: '#C4C4C4', + }, }); export default SearchResultList; diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..5e23ac7e 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -18,6 +18,7 @@ export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; export const SEARCH_ENDPOINT: string = API_URL + 'search/'; +export const SEARCH_V2_ENDPOINT: string = API_URL + 'search/v2/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index c3bd9fec..39b0425d 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -21,7 +21,11 @@ import { SearchResultList, TabsGradient, } from '../../components'; -import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import { + SEARCH_ENDPOINT, + SEARCH_V2_ENDPOINT, + TAGG_LIGHT_BLUE, +} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; @@ -40,7 +44,7 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState([]); + const [results, setResults] = useState(Array()); const [recents, setRecents] = useState>( recentSearches ?? [], ); @@ -65,40 +69,62 @@ const SearchScreen: React.FC = () => { setResults([]); return; } - const loadResults = async (q: string) => { - // try { - // const token = await AsyncStorage.getItem('token'); - // const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, { - // method: 'GET', - // headers: { - // Authorization: 'Token ' + token, - // }, - // }); - // const status = response.status; - // if (status === 200) { - // let searchResults = await response.json(); - // setResults(searchResults); - // return; - // } - // setResults([]); - // } catch (error) { - // console.log(error); - // setResults([]); - // } - const searchResults = MockResults(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - setResults(sanitizedResult); - }; - loadResults(query); + // const loadResults = async (q: string) => { + // try { + // const token = await AsyncStorage.getItem('token'); + // const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { + // method: 'GET', + // headers: { + // Authorization: 'Token ' + token, + // }, + // }); + // const {status} = response; + // if (status === 200) { + // const searchResults = await response.json(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } else { + // const searchResults = MockResults(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } + // setResults([]); + // } catch (error) { + // console.log(error); + // setResults([]); + // } + // }; + const searchResults = MockResults(); + const sanitizedResult = [ + { + title: 'categories', + data: searchResults.categories, + }, + { + title: 'users', + data: searchResults.users, + }, + ]; + setResults(sanitizedResult); + // loadResults(query); }, [query]); /** @@ -175,7 +201,7 @@ const SearchScreen: React.FC = () => { /> - {results && Object.keys(results).length === 0 ? ( + {results && results.length === 0 ? ( { { id: 11, name: "Brown '21", + category: 'Brown', }, { id: 12, name: "Brown '22", + category: 'Brown', }, { id: 13, name: "Brown '23", + category: null, }, { id: 14, name: "Brown '24", + category: null, }, ], users: [ -- cgit v1.2.3-70-g09d2 From 95bc850b9db986b9f462f19d7801218027307d58 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 3 Mar 2021 12:34:33 -0800 Subject: TMA-663-Search Integration --- src/components/search/ExploreSection.tsx | 2 +- src/components/search/SearchResultCell.tsx | 12 ++-- src/components/search/SearchResultList.tsx | 32 +++++---- src/screens/search/SearchScreen.tsx | 107 ++++++++++++----------------- 4 files changed, 70 insertions(+), 83 deletions(-) (limited to 'src') diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx index 025c8c3c..e888370e 100644 --- a/src/components/search/ExploreSection.tsx +++ b/src/components/search/ExploreSection.tsx @@ -14,7 +14,7 @@ interface ExploreSectionProps { users: ProfilePreviewType[]; } const ExploreSection: React.FC = ({title, users}) => { - return users.length !== 0 ? ( + return users && users.length !== 0 ? ( {title} = (showBorder: Boolean) => { }; const SearchResultList: React.FC = ({results}) => { + const [showSection, setShowSection] = useState(true); return ( - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title}}) => - sectionHeader(title !== 'categories') - } - /> + + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + + ); }; const styles = StyleSheet.create({ - container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02}, + container: {marginTop: SCREEN_HEIGHT * 0.02}, sectionHeaderStyle: { width: '100%', height: 0.5, diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 39b0425d..a66a2cbc 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -16,21 +16,15 @@ import { SearchBackground, SearchBar, SearchHeader, - SearchResults, - SearchResultsBackground, SearchResultList, + SearchResultsBackground, TabsGradient, } from '../../components'; -import { - SEARCH_ENDPOINT, - SEARCH_V2_ENDPOINT, - TAGG_LIGHT_BLUE, -} from '../../constants'; +import {SEARCH_V2_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; -import MockResults from './mock'; const NO_USER: UserType = { userId: '', username: '', @@ -69,62 +63,45 @@ const SearchScreen: React.FC = () => { setResults([]); return; } - // const loadResults = async (q: string) => { - // try { - // const token = await AsyncStorage.getItem('token'); - // const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { - // method: 'GET', - // headers: { - // Authorization: 'Token ' + token, - // }, - // }); - // const {status} = response; - // if (status === 200) { - // const searchResults = await response.json(); - // const sanitizedResult = [ - // { - // title: 'categories', - // data: searchResults.categories, - // }, - // { - // title: 'users', - // data: searchResults.users, - // }, - // ]; - // setResults(sanitizedResult); - // } else { - // const searchResults = MockResults(); - // const sanitizedResult = [ - // { - // title: 'categories', - // data: searchResults.categories, - // }, - // { - // title: 'users', - // data: searchResults.users, - // }, - // ]; - // setResults(sanitizedResult); - // } - // setResults([]); - // } catch (error) { - // console.log(error); - // setResults([]); - // } - // }; - const searchResults = MockResults(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - setResults(sanitizedResult); - // loadResults(query); + const loadResults = async (q: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const {status} = response; + if (status === 200) { + const searchResults = await response.json(); + const sanitizedResult = [ + { + title: 'categories', + data: searchResults.categories, + }, + { + title: 'users', + data: searchResults.users, + }, + ]; + + if ( + searchResults.categories.length !== 0 || + searchResults.users.length !== 0 + ) { + if (query.length > 3) { + setResults(sanitizedResult); + return; + } + } + } + } catch (error) { + console.log(error); + } + setResults([]); + }; + loadResults(query); }, [query]); /** @@ -200,6 +177,7 @@ const SearchScreen: React.FC = () => { {...{top, searching}} /> + {results && results.length === 0 ? ( { )} + ); -- cgit v1.2.3-70-g09d2 From c9155214b20608e97fc29fe7ef0b660698d6b4fd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 3 Mar 2021 17:03:39 -0500 Subject: fixed boolean --- src/routes/Routes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 01ffacab..c7b9aeee 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -55,7 +55,7 @@ const Routes: React.FC = () => { useEffect(() => { const checkVersion = async () => { const liveVersions = await getCurrentLiveVersions(); - if (liveVersions.includes(DeviceInfo.getVersion())) { + if (liveVersions && !liveVersions.includes(DeviceInfo.getVersion())) { setNewVersionAvailable(true); dispatch(updateNewVersionAvailable(true)); } -- cgit v1.2.3-70-g09d2 From 1e96f2cdf6b3753b526b41e3d4468bb0032c0483 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:44:45 -0500 Subject: updated tagg prompt component to be more generic --- src/components/common/TaggPrompt.tsx | 62 +++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx index 5cd3ac3f..75f3009b 100644 --- a/src/components/common/TaggPrompt.tsx +++ b/src/components/common/TaggPrompt.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native'; +import {StyleSheet, Text, TouchableOpacity} from 'react-native'; import {Image, View} from 'react-native-animatable'; -import {SCREEN_HEIGHT} from '../../utils'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {normalize, SCREEN_HEIGHT} from '../../utils'; type TaggPromptProps = { messageHeader: string; - messageBody: string; - logoType: string; + messageBody: string | Element; + logoType: 'plus' | 'tagg'; + hideCloseButton?: boolean; + noPadding?: boolean; onClose: () => void; }; @@ -15,27 +17,43 @@ const TaggPrompt: React.FC = ({ messageHeader, messageBody, logoType, + hideCloseButton, + noPadding, onClose, }) => { /** * Generic prompt for Tagg */ + const logo = () => { + switch (logoType) { + case 'plus': + return require('../../assets/icons/plus-logo.png'); + case 'tagg': + default: + return require('../../assets/images/logo-purple.png'); + } + }; + return ( - - + + {messageHeader} {messageBody} - { - onClose(); - }}> - - + {!hideCloseButton && ( + { + onClose(); + }}> + + + )} ); }; @@ -47,8 +65,6 @@ const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: 'white', height: SCREEN_HEIGHT / 4.5, - paddingTop: SCREEN_HEIGHT / 10, - paddingBottom: SCREEN_HEIGHT / 50, }, closeButton: { position: 'relative', @@ -58,22 +74,24 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, icon: { - width: 40, - height: 40, + width: normalize(40), + height: normalize(40), }, header: { color: 'black', - fontSize: 16, + fontSize: normalize(16), fontWeight: '600', textAlign: 'center', marginTop: '2%', }, subtext: { color: 'gray', - fontSize: 12, + fontSize: normalize(12), fontWeight: '500', + lineHeight: normalize(20), textAlign: 'center', marginTop: '2%', + width: '95%', }, }); export default TaggPrompt; -- cgit v1.2.3-70-g09d2 From 9ba6dd9a4ac15a92590743f5ee3e32796cc85454 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:45:35 -0500 Subject: changed background to white, cleaned up code, show SP notification --- src/screens/main/NotificationsScreen.tsx | 115 ++++++++++++++++++++++--------- 1 file changed, 81 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index aa53c4a9..7a88c5be 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -1,8 +1,15 @@ import AsyncStorage from '@react-native-community/async-storage'; import {useFocusEffect} from '@react-navigation/native'; import moment from 'moment'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, { + Fragment, + ReactElement, + useCallback, + useEffect, + useState, +} from 'react'; import { + Image, RefreshControl, SectionList, StatusBar, @@ -12,26 +19,22 @@ import { } from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; +import {TaggPrompt} from '../../components'; import {Notification} from '../../components/notifications'; -import EmptyNotificationView from './notification/EmptyNotificationView'; import { loadUserNotifications, updateNewNotificationReceived, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; -import {getDateAge, SCREEN_HEIGHT} from '../../utils'; -import {normalize} from '../../utils'; +import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import EmptyNotificationView from './notification/EmptyNotificationView'; const NotificationsScreen: React.FC = () => { - const {moments: loggedInUserMoments} = useSelector( - (state: RootState) => state.moments, - ); const {newNotificationReceived} = useSelector( (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); - const [noNotification, setNoNotification] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( undefined, @@ -39,13 +42,14 @@ const NotificationsScreen: React.FC = () => { const {notifications} = useSelector( (state: RootState) => state.notifications, ); - + const {suggested_people_linked} = useSelector( + (state: RootState) => state.user.profile, + ); + const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false); const {user: loggedInUser} = useSelector((state: RootState) => state.user); - const [sectionedNotifications, setSectionedNotifications] = useState< {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[] >([]); - const dispatch = useDispatch(); const refreshNotifications = () => { @@ -62,6 +66,10 @@ const NotificationsScreen: React.FC = () => { refreshNotifications(); }, [refreshNotifications]); + useEffect(() => { + setShowSPNotifyPopUp(suggested_people_linked !== 2); + }, [suggested_people_linked]); + useFocusEffect( useCallback(() => { const resetNewNotificationFlag = () => { @@ -126,15 +134,20 @@ const NotificationsScreen: React.FC = () => { continue; } } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); - setNoNotification( - todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + setSectionedNotifications( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0 + ? [] + : [ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ], ); - }, [lastViewed, notifications]); + }, [lastViewed, notifications, showSPNotifyPopUp]); + + useEffect(() => { + console.log(sectionedNotifications); + }, [sectionedNotifications]); const renderNotification = ({item}: {item: NotificationType}) => ( { ); + const SPPromptNotification: ReactElement = showSPNotifyPopUp ? ( + + + A new page where you can discover new profiles. Just press the new{' '} + + + button on the tab bar to check it out! + + } + logoType={'tagg'} + hideCloseButton={true} + noPadding={true} + onClose={() => {}} + /> + ) : ( + + ); + return ( - - - - Notifications - - {noNotification && ( - - + + + + + Notifications - )} - - {!noNotification && ( index.toString()} renderItem={renderNotification} renderSectionHeader={renderSectionHeader} + ListHeaderComponent={SPPromptNotification} refreshControl={ } + ListEmptyComponent={ + + + + } /> - )} - + + ); }; const styles = StyleSheet.create({ + background: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: 'white', + }, header: { marginLeft: '8%', marginTop: '5%', @@ -197,7 +239,6 @@ const styles = StyleSheet.create({ }, sectionHeaderContainer: { width: '100%', - backgroundColor: '#f3f2f2', }, sectionHeader: { marginLeft: '8%', @@ -209,7 +250,13 @@ const styles = StyleSheet.create({ color: '#828282', }, emptyViewContainer: { - marginTop: '22%', + flex: 1, + justifyContent: 'center', + }, + icon: { + width: 20, + height: 20, + tintColor: 'grey', }, }); -- cgit v1.2.3-70-g09d2 From 1132d3399939803ea25f435dd85974432494ebdd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Mar 2021 17:57:20 -0500 Subject: added tabs bar gradient that was missing for a long long time --- src/screens/main/NotificationsScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 7a88c5be..74bcf906 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -19,7 +19,7 @@ import { } from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; -import {TaggPrompt} from '../../components'; +import {TabsGradient, TaggPrompt} from '../../components'; import {Notification} from '../../components/notifications'; import { loadUserNotifications, @@ -212,6 +212,7 @@ const NotificationsScreen: React.FC = () => { } /> + ); }; -- cgit v1.2.3-70-g09d2 From 79396f899fe25f611d790d918e8ae4275a61e43c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 4 Mar 2021 16:06:21 -0800 Subject: TMA-663-Changes for empty view --- src/components/profile/ProfilePreview.tsx | 35 +-------- src/components/search/RecentSearches.tsx | 1 - src/components/search/SearchResultCell.tsx | 87 ++++++++++++++++++---- src/components/search/SearchResultList.tsx | 82 +++++++++++++++------ src/constants/api.ts | 3 +- src/constants/strings.ts | 1 + src/screens/search/SearchScreen.tsx | 114 +++++++++++++++-------------- src/services/SearchService.ts | 22 ++++++ src/services/index.ts | 1 + src/utils/users.ts | 32 ++++++++ 10 files changed, 249 insertions(+), 129 deletions(-) create mode 100644 src/services/SearchService.ts (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 0021b1c6..f08335a1 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -16,6 +16,7 @@ import {loadImageFromURL} from '../../services'; import {RootState} from '../../store/rootreducer'; import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import { + addUserToRecentlyViewed, checkIfUserIsBlocked, fetchUserX, isIPhoneX, @@ -89,39 +90,7 @@ const ProfilePreview: React.FC = ({ return; } if (previewType !== 'Comment') { - const jsonValue = await AsyncStorage.getItem( - '@recently_searched_users', - ); - let recentlySearchedList = - jsonValue != null ? JSON.parse(jsonValue) : null; - if (recentlySearchedList) { - if (recentlySearchedList.length > 0) { - if ( - recentlySearchedList.some( - (saved_user: ProfilePreviewType) => saved_user.id === id, - ) - ) { - console.log('User already in recently searched.'); - } else { - if (recentlySearchedList.length >= 10) { - recentlySearchedList.pop(); - } - recentlySearchedList.unshift(user); - } - } - } else { - recentlySearchedList = [user]; - } - - try { - let recentlySearchedListString = JSON.stringify(recentlySearchedList); - await AsyncStorage.setItem( - '@recently_searched_users', - recentlySearchedListString, - ); - } catch (e) { - console.log(e); - } + await addUserToRecentlyViewed(user) } const userXId = diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 43a26514..3925d084 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -54,7 +54,6 @@ const styles = StyleSheet.create({ marginBottom: '5%', }, clear: { - fontSize: 18, fontWeight: 'bold', color: TAGG_LIGHT_BLUE, diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 084c6afe..705fb5c9 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -1,12 +1,24 @@ +import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +import {Alert, Image, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useStore} from 'react-redux'; +import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings'; import {loadImageFromURL} from '../../services'; -import {ProfilePreviewType} from '../../types'; +import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; +import { + addUserToRecentlyViewed, + checkIfUserIsBlocked, + defaultUserProfile, + fetchUserX, + userXInStore, +} from '../../utils/users'; interface SearchResults { profileData: ProfilePreviewType; + loggedInUser: UserType; } const SearchResultsCell: React.FC = ({ @@ -19,8 +31,9 @@ const SearchResultsCell: React.FC = ({ thumbnail_url, category, }, + loggedInUser, }) => { - const [avatar, setAvatar] = useState(''); + const [avatar, setAvatar] = useState(undefined); useEffect(() => { (async () => { if (thumbnail_url !== undefined) { @@ -37,9 +50,60 @@ const SearchResultsCell: React.FC = ({ })(); }, [thumbnail_url]); + const dispatch = useDispatch(); + const state: RootState = useStore().getState(); + const navigation = useNavigation(); + const addToRecentlyStoredAndNavigateToProfile = async () => { + try { + //If the logged in user is blocked by the user being viewed, do not proceed. + const isUserBlocked = await checkIfUserIsBlocked( + id, + dispatch, + loggedInUser, + ); + if (isUserBlocked) { + Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE); + return; + } + + await addUserToRecentlyViewed({ + id, + first_name, + last_name, + thumbnail_url, + username, + }); + + const userXId = loggedInUser.username === username ? undefined : id; + + /** + * Dispatch an event to Fetch the user details only if we're navigating to + * a userX's profile. + * If the user is already present in store, do not fetch again. + * Finally, Navigate to profile of the user selected. + */ + if (userXId && !userXInStore(state, ScreenType.Search, id)) { + await fetchUserX( + dispatch, + {userId: id, username: username}, + ScreenType.Search, + ); + } + + navigation.navigate('Profile', { + userXId, + screenType: ScreenType.Search, + }); + } catch (e) { + console.log(e); + } + }; + const userCell = () => { return ( - + = ({ {first_name + ' ' + last_name} - + ); }; @@ -65,7 +129,7 @@ const SearchResultsCell: React.FC = ({ const categoryCell = () => { return ( - + = ({ {name} - + ); }; - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - - ); + return name === undefined ? userCell() : categoryCell(); }; const styles = StyleSheet.create({ diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index bf08e205..7f8073c4 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,16 +1,20 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { + Keyboard, KeyboardAvoidingView, SectionList, StyleSheet, - View + Text, + View, } from 'react-native'; -import { PreviewType, ScreenType } from '../../types'; -import { normalize, SCREEN_HEIGHT } from '../../utils'; +import {useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootreducer'; +import {PreviewType, ScreenType} from '../../types'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import SearchResultsCell from './SearchResultCell'; - +import {NO_RESULTS_FOUND} from '../../constants/strings'; interface SearchResultsProps { - results: []; + results: Array | undefined; previewType: PreviewType; screenType: ScreenType; } @@ -24,34 +28,66 @@ const sectionHeader: React.FC = (showBorder: Boolean) => { const SearchResultList: React.FC = ({results}) => { const [showSection, setShowSection] = useState(true); + const [showEmptyView, setshowEmptyView] = useState(false); + const {user: loggedInUser} = useSelector((state: RootState) => state.user); + + useEffect(() => { + if (results && results.length > 0) { + setshowEmptyView( + results[0].data.length === 0 && results[1].data.length === 0, + ); + } + }, [results]); + return ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title, data}}) => { - if (title === 'categories' && data.length === 0) { - setShowSection(false); - } - return sectionHeader(title !== 'categories' && showSection); - }} - /> - - + + {showEmptyView && ( + + {NO_RESULTS_FOUND} + + )} + {!showEmptyView && ( + item.id + index} + renderItem={({item}) => ( + + )} + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + )} + ); }; const styles = StyleSheet.create({ - container: {marginTop: SCREEN_HEIGHT * 0.02}, + container: { + marginTop: SCREEN_HEIGHT * 0.04, + }, sectionHeaderStyle: { width: '100%', height: 0.5, marginBottom: normalize(24), backgroundColor: '#C4C4C4', }, + keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3}, + keyboardClose: {marginBottom: 20}, + noResultsTextContainer: { + justifyContent: 'center', + flexDirection: 'row', + width: SCREEN_WIDTH, + }, + noResultsTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, }); export default SearchResultList; diff --git a/src/constants/api.ts b/src/constants/api.ts index 5e23ac7e..1463683f 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -17,8 +17,7 @@ export const PROFILE_PHOTO_THUMBNAIL_ENDPOINT: string = export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; -export const SEARCH_ENDPOINT: string = API_URL + 'search/'; -export const SEARCH_V2_ENDPOINT: string = API_URL + 'search/v2/'; +export const SEARCH_ENDPOINT: string = API_URL + 'search/v2/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 104cc198..7652fccd 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -49,6 +49,7 @@ export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed πŸ˜“'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; 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_LINK = (str: string) => `Successfully linked ${str} πŸŽ‰`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index a66a2cbc..b6841480 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -3,10 +3,12 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { Keyboard, + KeyboardAvoidingView, RefreshControl, ScrollView, StatusBar, StyleSheet, + SafeAreaView, } from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; @@ -20,11 +22,12 @@ import { SearchResultsBackground, TabsGradient, } from '../../components'; -import {SEARCH_V2_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {loadSearchResults} from '../../services'; const NO_USER: UserType = { userId: '', username: '', @@ -38,14 +41,27 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState(Array()); + const [results, setResults] = useState | undefined>(undefined); const [recents, setRecents] = useState>( recentSearches ?? [], ); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); const [refreshing, setRefreshing] = useState(false); + const [keyboardVisible, setKeyboardVisible] = React.useState( + 'keyboardVisible', + ); + useEffect(() => { + const showKeyboard = () => setKeyboardVisible('keyboardVisibleTrue'); + Keyboard.addListener('keyboardWillShow', showKeyboard); + return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); + }, []); + useEffect(() => { + const hideKeyboard = () => setKeyboardVisible('keyboardVisibleFalse'); + Keyboard.addListener('keyboardWillHide', hideKeyboard); + return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }, []); const dispatch = useDispatch(); const onRefresh = useCallback(() => { @@ -60,48 +76,31 @@ const SearchScreen: React.FC = () => { useEffect(() => { if (query.length < 3) { - setResults([]); + setResults(undefined); return; } - const loadResults = async (q: string) => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, + (async () => { + const searchResults = await loadSearchResults( + `${SEARCH_ENDPOINT}?query=${query}`, + ); + if (query.length > 2) { + const categories = searchResults?.categories; + const users = searchResults?.users; + const sanitizedResult = [ + { + title: 'categories', + data: categories, }, - }); - const {status} = response; - if (status === 200) { - const searchResults = await response.json(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - - if ( - searchResults.categories.length !== 0 || - searchResults.users.length !== 0 - ) { - if (query.length > 3) { - setResults(sanitizedResult); - return; - } - } - } - } catch (error) { - console.log(error); + { + title: 'users', + data: users, + }, + ]; + setResults(sanitizedResult); + } else { + setResults(undefined); } - setResults([]); - }; - loadResults(query); + })(); }, [query]); /** @@ -179,24 +178,27 @@ const SearchScreen: React.FC = () => { - {results && results.length === 0 ? ( - - ) : ( - - )} + + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} + - ); diff --git a/src/services/SearchService.ts b/src/services/SearchService.ts new file mode 100644 index 00000000..7b97f9a7 --- /dev/null +++ b/src/services/SearchService.ts @@ -0,0 +1,22 @@ +import AsyncStorage from '@react-native-community/async-storage'; + +export const loadSearchResults = async (url: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(url, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const {status} = response; + if (status === 200) { + const searchResults = await response.json(); + return searchResults; + } + } catch (error) { + console.log(error); + throw error; + } + return {}; +}; diff --git a/src/services/index.ts b/src/services/index.ts index ef71233a..28e03e0e 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -12,3 +12,4 @@ export * from './WaitlistUserService'; export * from './CommonService'; export * from './CommentService'; export * from './SuggestedPeopleService'; +export * from './SearchService'; diff --git a/src/utils/users.ts b/src/utils/users.ts index b8faf206..653c941e 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -164,3 +164,35 @@ export const defaultUserProfile = () => { const defaultImage = require('../assets/images/avatar-placeholder.png'); return defaultImage; }; + +export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => { + const jsonValue = await AsyncStorage.getItem('@recently_searched_users'); + let recentlySearchedList = jsonValue != null ? JSON.parse(jsonValue) : null; + if (recentlySearchedList) { + if (recentlySearchedList.length > 0) { + if ( + recentlySearchedList.some( + (saved_user: ProfilePreviewType) => saved_user.id === user.id, + ) + ) { + console.log('User already in recently searched.'); + } else { + if (recentlySearchedList.length >= 10) { + recentlySearchedList.pop(); + } + recentlySearchedList.unshift(user); + } + } + } else { + recentlySearchedList = [user]; + } + try { + let recentlySearchedListString = JSON.stringify(recentlySearchedList); + await AsyncStorage.setItem( + '@recently_searched_users', + recentlySearchedListString, + ); + } catch (e) { + console.log(e); + } +}; -- cgit v1.2.3-70-g09d2 From 7cc6df961f99d5828f6cbe39c7509e17bae7d93c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Mar 2021 16:14:15 -0500 Subject: fixed padding issue --- src/components/search/RecentSearches.tsx | 10 +++-- src/components/search/SearchResultList.tsx | 28 +++++++------- src/components/search/SearchResultsBackground.tsx | 8 ++-- src/screens/search/SearchScreen.tsx | 45 +++++++++-------------- 4 files changed, 42 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 3925d084..6fb9fca9 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -5,10 +5,12 @@ import { TouchableOpacity, StyleSheet, TouchableOpacityProps, + ScrollView, } from 'react-native'; import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import {TAGG_LIGHT_BLUE} from '../../constants'; import SearchResults from './SearchResults'; +import {SCREEN_HEIGHT} from '../../utils'; interface RecentSearchesProps extends TouchableOpacityProps { sectionTitle: PreviewType; @@ -21,7 +23,9 @@ interface RecentSearchesProps extends TouchableOpacityProps { */ const RecentSearches: React.FC = (props) => { return ( - + {props.sectionTitle} {props.sectionButtonTitle && ( @@ -35,14 +39,14 @@ const RecentSearches: React.FC = (props) => { previewType={props.sectionTitle} screenType={props.screenType} /> - + ); }; const styles = StyleSheet.create({ mainContainer: { marginLeft: '3%', - padding : 20, + padding: 20, }, container: { flexDirection: 'row', diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 7f8073c4..a3d9c8c5 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,20 +1,15 @@ import React, {useEffect, useState} from 'react'; -import { - Keyboard, - KeyboardAvoidingView, - SectionList, - StyleSheet, - Text, - View, -} from 'react-native'; +import {SectionList, StyleSheet, Text, View} from 'react-native'; import {useSelector} from 'react-redux'; import {RootState} from 'src/store/rootreducer'; +import {NO_RESULTS_FOUND} from '../../constants/strings'; import {PreviewType, ScreenType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import SearchResultsCell from './SearchResultCell'; -import {NO_RESULTS_FOUND} from '../../constants/strings'; + interface SearchResultsProps { results: Array | undefined; + keyboardVisible: boolean; previewType: PreviewType; screenType: ScreenType; } @@ -26,7 +21,10 @@ const sectionHeader: React.FC = (showBorder: Boolean) => { return null; }; -const SearchResultList: React.FC = ({results}) => { +const SearchResultList: React.FC = ({ + results, + keyboardVisible, +}) => { const [showSection, setShowSection] = useState(true); const [showEmptyView, setshowEmptyView] = useState(false); const {user: loggedInUser} = useSelector((state: RootState) => state.user); @@ -48,8 +46,11 @@ const SearchResultList: React.FC = ({results}) => { )} {!showEmptyView && ( item.id + index} renderItem={({item}) => ( @@ -69,7 +70,7 @@ const SearchResultList: React.FC = ({results}) => { const styles = StyleSheet.create({ container: { - marginTop: SCREEN_HEIGHT * 0.04, + marginTop: SCREEN_HEIGHT * 0.02, }, sectionHeaderStyle: { width: '100%', @@ -78,7 +79,6 @@ const styles = StyleSheet.create({ backgroundColor: '#C4C4C4', }, keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3}, - keyboardClose: {marginBottom: 20}, noResultsTextContainer: { justifyContent: 'center', flexDirection: 'row', diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index fa4e18ca..c5fcc6fb 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Animated, {interpolate} from 'react-native-reanimated'; import {StyleSheet} from 'react-native'; +import Animated, {interpolate} from 'react-native-reanimated'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; interface SearchResultsBackgroundProps { @@ -21,11 +21,9 @@ const SearchResultsBackground: React.FC = ({ return ( - + {children} - + ); }; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index b6841480..70733d7e 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -3,12 +3,10 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { Keyboard, - KeyboardAvoidingView, RefreshControl, ScrollView, StatusBar, StyleSheet, - SafeAreaView, } from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; @@ -23,15 +21,11 @@ import { TabsGradient, } from '../../components'; import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import {loadSearchResults} from '../../services'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType, UserType} from '../../types'; +import {ProfilePreviewType, ScreenType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; -import {loadSearchResults} from '../../services'; -const NO_USER: UserType = { - userId: '', - username: '', -}; /** * Search Screen for user recommendations and a search @@ -178,25 +172,22 @@ const SearchScreen: React.FC = () => { - - {results === undefined && recents.length !== 0 ? ( - - ) : ( - - )} - + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} -- 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