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/constants/constants.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/constants') 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, -- 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/constants') 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 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/constants') 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/constants') 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 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/constants') 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 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/constants') 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 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/constants') 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