From 016b0464be83227a7d38d44d01c2878378ba5e50 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Mar 2021 08:18:45 -0800 Subject: Added service and changed border color --- src/screens/badge/BadgeSelection.tsx | 86 +++++++++++++++++++++++++++++------- 1 file changed, 71 insertions(+), 15 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index f1cd000c..7088821a 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,4 +1,5 @@ import AsyncStorage from '@react-native-community/async-storage'; +import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; @@ -6,14 +7,19 @@ import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {useDispatch} from 'react-redux'; -import {ADD_USER_BADGES, BACKGROUND_GRADIENT_MAP} from '../../constants'; +import {MainStackParams} from 'src/routes'; +import { + ADD_USER_BADGES, + BACKGROUND_GRADIENT_MAP, + UPDATE_USER_BADGES, +} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; import { ERROR_BADGES_EXCEED_LIMIT, ERROR_UPLOAD_BADGES, } from '../../constants/strings'; import {suggestedPeopleBadgesFinished} from '../../store/actions'; -import {BackgroundGradientType} from '../../types'; +import {BackgroundGradientType, UniversityBadge} from '../../types'; import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; import BadgeList from './BadgeList'; import BadgeScreenHeader from './BadgeScreenHeader'; @@ -31,29 +37,54 @@ type BadgeSelectionScreenNavigationProp = StackNavigationProp< 'BadgeList' >; +type BadgeSelectionRouteProp = RouteProp; + type BadgeSelectionProps = { navigation: BadgeSelectionScreenNavigationProp; + route?: BadgeSelectionRouteProp; }; -const BadgeSelection: React.FC = ({navigation}) => { - const [canSubmit, setCanSubmit] = useState(false); +const BadgeSelection: React.FC = ({navigation, route}) => { + const dispatch = useDispatch(); navigation.setOptions({ headerRight: () => ( { - if (canSubmit) { - uploadUserSelection(); + onPress={async () => { + if (route?.params.editing) { + updateBadgesService(); + navigation.goBack(); } else { - dispatch(suggestedPeopleBadgesFinished()); + if (selectedBadges.length !== 0) { + uploadUserSelection(); + } else { + dispatch(suggestedPeopleBadgesFinished()); + } } }}> - {canSubmit ? 'Done' : 'Skip'} + + {selectedBadges.length !== 0 ? 'Done' : 'Skip'} + ), }); const [selectedBadges, setSelectedBadges] = useState([]); + + // Get list of badges from the backend and display here + useEffect(() => { + const extractBadgeNames = (badges: UniversityBadge[]) => { + let extractedBadgeNames: string[] = []; + badges.forEach((badge) => { + extractedBadgeNames.push(badge.name); + }); + setSelectedBadges(extractedBadgeNames); + }; + if (route && route.params.selectedBadges) { + extractBadgeNames(route.params.selectedBadges); + } + }, []); + const selectKey = (key: string) => { if (selectedBadges.includes(key)) { const selectedBadgesArray = [...selectedBadges]; @@ -63,14 +94,14 @@ const BadgeSelection: React.FC = ({navigation}) => { } setSelectedBadges(selectedBadgesArray); } else { - const selectedBadgesArray = [...selectedBadges, key]; - setSelectedBadges(selectedBadgesArray); + if (selectedBadges.length < 5) { + const selectedBadgesArray = [...selectedBadges, key]; + setSelectedBadges(selectedBadgesArray); + } else { + Alert.alert(ERROR_BADGES_EXCEED_LIMIT); + } } }; - const dispatch = useDispatch(); - useEffect(() => { - setCanSubmit(selectedBadges.length !== 0); - }, [selectedBadges]); const uploadUserSelection = async () => { try { @@ -96,6 +127,31 @@ const BadgeSelection: React.FC = ({navigation}) => { } }; + const updateBadgesService = async () => { + try { + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + console.log('selectedBadges: ', selectedBadges); + form.append('badges', JSON.stringify(selectedBadges)); + const response = await fetch(UPDATE_USER_BADGES, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: form, + }); + if (response.status === 400) { + Alert.alert(ERROR_BADGES_EXCEED_LIMIT); + return; + } + console.log('response: ', response); + } catch (error) { + console.log(error); + Alert.alert(ERROR_UPLOAD_BADGES); + } + }; + return ( Date: Thu, 11 Mar 2021 09:18:16 -0800 Subject: refactoring --- src/constants/api.ts | 4 +- src/screens/badge/BadgeSelection.tsx | 71 +++++----------------------------- src/screens/suggestedPeople/SPBody.tsx | 2 +- src/services/SuggestedPeopleService.ts | 57 ++++++++++++++++++++++++++- 4 files changed, 68 insertions(+), 66 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/constants/api.ts b/src/constants/api.ts index dd3d6e15..34ef9a1c 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -38,8 +38,8 @@ export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/'; export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/'; export const SP_UPDATE_PICTURE_ENDPOINT: string = SP_USERS_ENDPOINT + 'update_picture/'; export const SP_MUTUAL_BADGE_HOLDERS_ENDPOINT: string = SP_USERS_ENDPOINT + 'get_mutual_badge_holders/'; -export const ADD_USER_BADGES: string = SP_USERS_ENDPOINT + 'add_badges/'; -export const UPDATE_USER_BADGES: string = SP_USERS_ENDPOINT + 'update_badges/'; +export const ADD_BADGES_ENDPOINT: string = SP_USERS_ENDPOINT + 'add_badges/'; +export const UPDATE_BADGES_ENDPOINT: string = SP_USERS_ENDPOINT + 'update_badges/'; // Register as FCM device export const FCM_ENDPOINT: string = API_URL + 'fcm/'; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 7088821a..ed3f199d 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,4 +1,3 @@ -import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; @@ -7,17 +6,11 @@ import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; import {useDispatch} from 'react-redux'; -import {MainStackParams} from 'src/routes'; -import { - ADD_USER_BADGES, - BACKGROUND_GRADIENT_MAP, - UPDATE_USER_BADGES, -} from '../../constants'; +import {MainStackParams} from '../../routes'; +import {addBadgesService, updateBadgesService} from '../../services'; +import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; -import { - ERROR_BADGES_EXCEED_LIMIT, - ERROR_UPLOAD_BADGES, -} from '../../constants/strings'; +import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings'; import {suggestedPeopleBadgesFinished} from '../../store/actions'; import {BackgroundGradientType, UniversityBadge} from '../../types'; import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; @@ -52,11 +45,14 @@ const BadgeSelection: React.FC = ({navigation, route}) => { style={styles.rightButtonContainer} onPress={async () => { if (route?.params.editing) { - updateBadgesService(); + updateBadgesService(selectedBadges); navigation.goBack(); } else { if (selectedBadges.length !== 0) { - uploadUserSelection(); + const success = await addBadgesService(selectedBadges); + if (success) { + dispatch(suggestedPeopleBadgesFinished()); + } } else { dispatch(suggestedPeopleBadgesFinished()); } @@ -103,55 +99,6 @@ const BadgeSelection: React.FC = ({navigation, route}) => { } }; - const uploadUserSelection = async () => { - try { - 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': 'multipart/form-data', - Authorization: 'Token ' + token, - }, - body: form, - }); - if (response.status === 400) { - Alert.alert(ERROR_BADGES_EXCEED_LIMIT); - return; - } - dispatch(suggestedPeopleBadgesFinished()); - } catch (error) { - console.log(error); - Alert.alert(ERROR_UPLOAD_BADGES); - } - }; - - const updateBadgesService = async () => { - try { - const token = await AsyncStorage.getItem('token'); - const form = new FormData(); - console.log('selectedBadges: ', selectedBadges); - form.append('badges', JSON.stringify(selectedBadges)); - const response = await fetch(UPDATE_USER_BADGES, { - method: 'POST', - headers: { - 'Content-Type': 'multipart/form-data', - Authorization: 'Token ' + token, - }, - body: form, - }); - if (response.status === 400) { - Alert.alert(ERROR_BADGES_EXCEED_LIMIT); - return; - } - console.log('response: ', response); - } catch (error) { - console.log(error); - Alert.alert(ERROR_UPLOAD_BADGES); - } - }; - return ( = ({ let array = []; useEffect(() => { const findBadgeIcons = (badge: UniversityBadge) => { - DATA.forEach((item) => { + DATA?.forEach((item) => { if (item.title === badge.category) { item.data.forEach((object) => { if (object.badgeName === badge.name) { diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index d0032458..7b0131d8 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -1,11 +1,18 @@ import AsyncStorage from '@react-native-community/async-storage'; import { + ERROR_BADGES_EXCEED_LIMIT, + ERROR_UPLOAD_BADGES, +} from '../constants/strings'; +import { + ADD_BADGES_ENDPOINT, EDIT_PROFILE_ENDPOINT, SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, SP_UPDATE_PICTURE_ENDPOINT, SP_USERS_ENDPOINT, -} from '../constants'; + UPDATE_BADGES_ENDPOINT, +} from '../constants/api'; import {ProfilePreviewType, SuggestedPeopleDataType} from '../types'; +import { Alert } from 'react-native'; export const sendSuggestedPeopleLinked = async ( userId: string, @@ -119,3 +126,51 @@ export const getMutualBadgeHolders = async () => { return undefined; } }; + +export const addBadgesService = async (selectedBadges: string[]) => { + try { + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('badges', JSON.stringify(selectedBadges)); + const response = await fetch(ADD_BADGES_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: form, + }); + if (response.status === 400) { + Alert.alert(ERROR_BADGES_EXCEED_LIMIT); + return false; + } + return true; + } catch (error) { + console.log(error); + Alert.alert(ERROR_UPLOAD_BADGES); + return false; + } +}; + +export const updateBadgesService = async (selectedBadges: string[]) => { + try { + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('badges', JSON.stringify(selectedBadges)); + const response = await fetch(UPDATE_BADGES_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: form, + }); + if (response.status === 400) { + Alert.alert(ERROR_BADGES_EXCEED_LIMIT); + return; + } + } catch (error) { + console.log(error); + Alert.alert(ERROR_UPLOAD_BADGES); + } +}; -- cgit v1.2.3-70-g09d2 From 803b7a7bcb173d6a263c9d43fec41e5cddfe98f4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Mar 2021 13:36:34 -0800 Subject: done; except: update state on previous screen; --- src/assets/icons/front-arrow.svg | 1 + src/constants/strings.ts | 1 + src/screens/badge/BadgeSelection.tsx | 4 ++- .../SuggestedPeopleUploadPictureScreen.tsx | 32 ++++++++++++---------- src/services/SuggestedPeopleService.ts | 5 ++++ 5 files changed, 28 insertions(+), 15 deletions(-) create mode 100644 src/assets/icons/front-arrow.svg (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/assets/icons/front-arrow.svg b/src/assets/icons/front-arrow.svg new file mode 100644 index 00000000..7beeb83e --- /dev/null +++ b/src/assets/icons/front-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 93da6e59..3c2100f4 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -57,6 +57,7 @@ export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its m 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_BADGES_UPDATE = 'Badges updated 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 UP_TO_DATE = 'Up-to-Date!'; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index ed3f199d..ba2e6af4 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -59,7 +59,9 @@ const BadgeSelection: React.FC = ({navigation, route}) => { } }}> - {selectedBadges.length !== 0 ? 'Done' : 'Skip'} + {selectedBadges.length !== 0 || route?.params.editing + ? 'Done' + : 'Skip'} ), diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index eb8494f4..c5a4ce61 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -25,11 +25,12 @@ import { import {uploadedSuggestedPeoplePhoto} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import BackArrow from '../../assets/icons/back-arrow.svg'; +import FrontArrow from '../../assets/icons/front-arrow.svg'; const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { const {editing} = route.params; const [image, setImage] = useState(undefined); + const [oldImage, setOldImage] = useState(undefined); const [selectedBadges, setSelectedBadges] = useState([]); const [loading, setLoading] = useState(false); const dispatch = useDispatch(); @@ -44,6 +45,8 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { if (response) { setImage(response.suggested_people_url); setSelectedBadges(response.badges); + setOldImage(response.suggested_people_url); + console.log('Current Image: ', response.suggested_people_url); } }; // if we're in edit SP, attempt to load current sp image @@ -76,8 +79,8 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { }; const uploadImage = async () => { - setLoading(true); - if (image) { + if (image && oldImage !== image) { + setLoading(true); const success = await sendSuggestedPeoplePhoto(image); if (success) { dispatch(uploadedSuggestedPeoplePhoto(image)); @@ -87,16 +90,15 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { } else { Alert.alert(ERROR_UPLOAD); } + setLoading(false); + // Navigated back to Profile if user is editing their Suggested People Picture + if (editing) { + setTimeout(() => { + Alert.alert(SUCCESS_PIC_UPLOAD); + }, 500); + } } - setLoading(false); - - // Navigated back to Profile if user is editing their Suggested People Picture - if (editing) { - navigation.goBack(); - setTimeout(() => { - Alert.alert(SUCCESS_PIC_UPLOAD); - }, 500); - } + navigation.goBack(); }; return ( @@ -152,9 +154,11 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { { - navigation.push('BadgeSelection', {selectedBadges}); + navigation.push('BadgeSelection', { + selectedBadges, + }); }}> - + )} diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index 7b0131d8..a65b91ef 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import { ERROR_BADGES_EXCEED_LIMIT, ERROR_UPLOAD_BADGES, + SUCCESS_BADGES_UPDATE, } from '../constants/strings'; import { ADD_BADGES_ENDPOINT, @@ -169,6 +170,10 @@ export const updateBadgesService = async (selectedBadges: string[]) => { Alert.alert(ERROR_BADGES_EXCEED_LIMIT); return; } + if (response.status === 200) { + Alert.alert(SUCCESS_BADGES_UPDATE); + return; + } } catch (error) { console.log(error); Alert.alert(ERROR_UPLOAD_BADGES); -- cgit v1.2.3-70-g09d2 From f399478fb2fe460ead185b0da7769faed8a8c515 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 12 Mar 2021 08:42:46 -0800 Subject: done --- src/components/profile/ProfileMoreInfoDrawer.tsx | 6 ++- src/routes/main/MainStackNavigator.tsx | 3 +- src/screens/badge/BadgeSelection.tsx | 47 ++++++++-------------- .../SuggestedPeopleUploadPictureScreen.tsx | 43 +++++++++++++++++--- 4 files changed, 61 insertions(+), 38 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index 90f5da48..d8f91abe 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -42,7 +42,11 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { if (suggested_people_linked === 0) { Alert.alert(ERROR_ATTEMPT_EDIT_SP); } else { - navigation.push('UpdateSPPicture'); + // Sending undefined for updatedSelectedBadges to mark that there was no update yet + navigation.push('UpdateSPPicture', { + editing: true, + updatedSelectedBadges: undefined, + }); setIsOpen(false); } }; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 22819824..6992f83f 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -77,10 +77,11 @@ export type MainStackParams = { }; UpdateSPPicture: { editing: boolean; + updatedSelectedBadges: string[] | undefined; }; BadgeSelection: { editing: boolean; - selectedBadges: UniversityBadge[]; + prevSelectedBadges: string[]; }; MutualBadgeHolders: { badge_id: string; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index ba2e6af4..a67206c4 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -1,5 +1,4 @@ import {RouteProp} from '@react-navigation/core'; -import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useState} from 'react'; import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; @@ -12,33 +11,32 @@ import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings'; import {suggestedPeopleBadgesFinished} from '../../store/actions'; -import {BackgroundGradientType, UniversityBadge} from '../../types'; +import {BackgroundGradientType} from '../../types'; import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; import BadgeList from './BadgeList'; import BadgeScreenHeader from './BadgeScreenHeader'; +import {useNavigation} from '@react-navigation/native'; /** * Home Screen for displaying Tagg Badge Selections **/ -type BadgeSelectionParamList = { - BadgeList: any[]; -}; - -type BadgeSelectionScreenNavigationProp = StackNavigationProp< - BadgeSelectionParamList, - 'BadgeList' ->; - type BadgeSelectionRouteProp = RouteProp; type BadgeSelectionProps = { - navigation: BadgeSelectionScreenNavigationProp; - route?: BadgeSelectionRouteProp; + route: BadgeSelectionRouteProp; }; -const BadgeSelection: React.FC = ({navigation, route}) => { +const BadgeSelection: React.FC = ({route}) => { + const prevSelectedBadges = route.params.prevSelectedBadges; + const [selectedBadges, setSelectedBadges] = useState([]); const dispatch = useDispatch(); + const navigation = useNavigation(); + + useEffect(() => { + setSelectedBadges(prevSelectedBadges); + }, [prevSelectedBadges]); + navigation.setOptions({ headerRight: () => ( = ({navigation, route}) => { onPress={async () => { if (route?.params.editing) { updateBadgesService(selectedBadges); - navigation.goBack(); + navigation.navigate('UpdateSPPicture', { + editing: true, + updatedSelectedBadges: selectedBadges, + }); } else { if (selectedBadges.length !== 0) { const success = await addBadgesService(selectedBadges); @@ -67,22 +68,6 @@ const BadgeSelection: React.FC = ({navigation, route}) => { ), }); - const [selectedBadges, setSelectedBadges] = useState([]); - - // Get list of badges from the backend and display here - useEffect(() => { - const extractBadgeNames = (badges: UniversityBadge[]) => { - let extractedBadgeNames: string[] = []; - badges.forEach((badge) => { - extractedBadgeNames.push(badge.name); - }); - setSelectedBadges(extractedBadgeNames); - }; - if (route && route.params.selectedBadges) { - extractBadgeNames(route.params.selectedBadges); - } - }, []); - const selectKey = (key: string) => { if (selectedBadges.includes(key)) { const selectedBadgesArray = [...selectedBadges]; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index c5a4ce61..edab2865 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; +import {RouteProp, useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import { Alert, @@ -26,12 +26,27 @@ import {uploadedSuggestedPeoplePhoto} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import FrontArrow from '../../assets/icons/front-arrow.svg'; +import {MainStackParams} from 'src/routes'; -const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { - const {editing} = route.params; +type SuggestedPeopleUploadPictureScreenRouteProp = RouteProp< + MainStackParams, + 'UpdateSPPicture' +>; + +type SuggestedPeopleUploadPictureScreenProps = { + route: SuggestedPeopleUploadPictureScreenRouteProp; +}; + +const SuggestedPeopleUploadPictureScreen: React.FC = ({ + route, +}) => { + const {editing, updatedSelectedBadges} = route.params; const [image, setImage] = useState(undefined); const [oldImage, setOldImage] = useState(undefined); const [selectedBadges, setSelectedBadges] = useState([]); + const [extractedSelectedBadges, setExtractedSelectedBadges] = useState< + string[] + >([]); const [loading, setLoading] = useState(false); const dispatch = useDispatch(); const navigation = useNavigation(); @@ -46,7 +61,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { setImage(response.suggested_people_url); setSelectedBadges(response.badges); setOldImage(response.suggested_people_url); - console.log('Current Image: ', response.suggested_people_url); } }; // if we're in edit SP, attempt to load current sp image @@ -55,6 +69,25 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { } }, []); + // Get list of badges from the backend and display here + useEffect(() => { + const extractBadgeNames = () => { + let extractedBadgeNames: string[] = updatedSelectedBadges + ? updatedSelectedBadges + : []; + // Receive undefined if you're coming from any screen + if (!updatedSelectedBadges) { + selectedBadges.forEach((badge) => { + if (!extractedBadgeNames.includes(badge.name)) { + extractedBadgeNames.push(badge.name); + } + }); + } + setExtractedSelectedBadges(extractedBadgeNames); + }; + extractBadgeNames(); + }, [selectedBadges, updatedSelectedBadges]); + const openImagePicker = () => { ImagePicker.openPicker({ smartAlbums: [ @@ -155,7 +188,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { { navigation.push('BadgeSelection', { - selectedBadges, + prevSelectedBadges: extractedSelectedBadges, }); }}> -- cgit v1.2.3-70-g09d2 From 2c97108964e5a8fc89f3a9839ea13103e86b340b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 12 Mar 2021 10:32:31 -0800 Subject: making call on badge selection to get badges --- src/routes/main/MainStackNavigator.tsx | 1 - src/screens/badge/BadgeSelection.tsx | 28 +++++++++++++++---- .../SuggestedPeopleUploadPictureScreen.tsx | 31 ++-------------------- 3 files changed, 25 insertions(+), 35 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 6992f83f..fea375f6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -81,7 +81,6 @@ export type MainStackParams = { }; BadgeSelection: { editing: boolean; - prevSelectedBadges: string[]; }; MutualBadgeHolders: { badge_id: string; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index a67206c4..755bb581 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -4,9 +4,13 @@ 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 {useDispatch} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import {MainStackParams} from '../../routes'; -import {addBadgesService, updateBadgesService} from '../../services'; +import { + addBadgesService, + getSuggestedPeopleProfile, + updateBadgesService, +} from '../../services'; import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings'; @@ -16,6 +20,7 @@ import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; import BadgeList from './BadgeList'; import BadgeScreenHeader from './BadgeScreenHeader'; import {useNavigation} from '@react-navigation/native'; +import {RootState} from '../../store/rootReducer'; /** * Home Screen for displaying Tagg Badge Selections @@ -28,14 +33,27 @@ type BadgeSelectionProps = { }; const BadgeSelection: React.FC = ({route}) => { - const prevSelectedBadges = route.params.prevSelectedBadges; + const {userId: loggedInUserId} = useSelector( + (state: RootState) => state.user.user, + ); const [selectedBadges, setSelectedBadges] = useState([]); const dispatch = useDispatch(); const navigation = useNavigation(); useEffect(() => { - setSelectedBadges(prevSelectedBadges); - }, [prevSelectedBadges]); + const loadData = async () => { + const response = await getSuggestedPeopleProfile(loggedInUserId); + if (response) { + const data = response.badges; + let extractedBadgeNames: string[] = []; + data.forEach((badge) => { + extractedBadgeNames.push(badge.name); + }); + setSelectedBadges(extractedBadgeNames); + } + }; + loadData(); + }, []); navigation.setOptions({ headerRight: () => ( diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index edab2865..5a9e23da 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -13,7 +13,6 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import ImagePicker from 'react-native-image-crop-picker'; import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; -import {UniversityBadge} from '../../types'; import {TaggSquareButton, UniversityIcon} from '../../components'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {SP_HEIGHT, SP_WIDTH} from '../../constants'; @@ -40,13 +39,9 @@ type SuggestedPeopleUploadPictureScreenProps = { const SuggestedPeopleUploadPictureScreen: React.FC = ({ route, }) => { - const {editing, updatedSelectedBadges} = route.params; + const {editing} = route.params; const [image, setImage] = useState(undefined); const [oldImage, setOldImage] = useState(undefined); - const [selectedBadges, setSelectedBadges] = useState([]); - const [extractedSelectedBadges, setExtractedSelectedBadges] = useState< - string[] - >([]); const [loading, setLoading] = useState(false); const dispatch = useDispatch(); const navigation = useNavigation(); @@ -59,7 +54,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC { - const extractBadgeNames = () => { - let extractedBadgeNames: string[] = updatedSelectedBadges - ? updatedSelectedBadges - : []; - // Receive undefined if you're coming from any screen - if (!updatedSelectedBadges) { - selectedBadges.forEach((badge) => { - if (!extractedBadgeNames.includes(badge.name)) { - extractedBadgeNames.push(badge.name); - } - }); - } - setExtractedSelectedBadges(extractedBadgeNames); - }; - extractBadgeNames(); - }, [selectedBadges, updatedSelectedBadges]); - const openImagePicker = () => { ImagePicker.openPicker({ smartAlbums: [ @@ -187,9 +162,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC { - navigation.push('BadgeSelection', { - prevSelectedBadges: extractedSelectedBadges, - }); + navigation.push('BadgeSelection'); }}> -- cgit v1.2.3-70-g09d2 From b34da6e2d3f78a3d846665ded5d5a0c508873c6c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 12 Mar 2021 11:11:10 -0800 Subject: comments, removed unused code --- src/components/profile/ProfileMoreInfoDrawer.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 1 - src/screens/badge/BadgeSelection.tsx | 2 +- .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 1 + 4 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index d8f91abe..2fec5cca 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -45,7 +45,6 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { // Sending undefined for updatedSelectedBadges to mark that there was no update yet navigation.push('UpdateSPPicture', { editing: true, - updatedSelectedBadges: undefined, }); setIsOpen(false); } diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index fea375f6..c60c8602 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -77,7 +77,6 @@ export type MainStackParams = { }; UpdateSPPicture: { editing: boolean; - updatedSelectedBadges: string[] | undefined; }; BadgeSelection: { editing: boolean; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index 755bb581..e8a060ee 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -40,6 +40,7 @@ const BadgeSelection: React.FC = ({route}) => { const dispatch = useDispatch(); const navigation = useNavigation(); + // Loading badges data and extracting into a string [] useEffect(() => { const loadData = async () => { const response = await getSuggestedPeopleProfile(loggedInUserId); @@ -64,7 +65,6 @@ const BadgeSelection: React.FC = ({route}) => { updateBadgesService(selectedBadges); navigation.navigate('UpdateSPPicture', { editing: true, - updatedSelectedBadges: selectedBadges, }); } else { if (selectedBadges.length !== 0) { diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 74034287..0c34e90c 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -87,6 +87,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC { + // Uploading image only if initially loaded image is not the same as the image being uploaded if (image && oldImage !== image) { setLoading(true); const success = await sendSuggestedPeoplePhoto(image); -- cgit v1.2.3-70-g09d2 From ab961d9ecabed368e66ab15a24578bb98e696889 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 12 Mar 2021 11:35:39 -0800 Subject: loading badges data only if editing --- src/screens/badge/BadgeSelection.tsx | 11 ++++++----- .../SuggestedPeopleUploadPictureScreen.tsx | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'src/screens/badge/BadgeSelection.tsx') diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index e8a060ee..cbd7dd88 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -33,6 +33,7 @@ type BadgeSelectionProps = { }; const BadgeSelection: React.FC = ({route}) => { + const {editing} = route.params; const {userId: loggedInUserId} = useSelector( (state: RootState) => state.user.user, ); @@ -53,7 +54,9 @@ const BadgeSelection: React.FC = ({route}) => { setSelectedBadges(extractedBadgeNames); } }; - loadData(); + if (editing) { + loadData(); + } }, []); navigation.setOptions({ @@ -61,7 +64,7 @@ const BadgeSelection: React.FC = ({route}) => { { - if (route?.params.editing) { + if (editing) { updateBadgesService(selectedBadges); navigation.navigate('UpdateSPPicture', { editing: true, @@ -78,9 +81,7 @@ const BadgeSelection: React.FC = ({route}) => { } }}> - {selectedBadges.length !== 0 || route?.params.editing - ? 'Done' - : 'Skip'} + {selectedBadges.length !== 0 || editing ? 'Done' : 'Skip'} ), diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 0c34e90c..cb0a6417 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -94,7 +94,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC { - navigation.push('BadgeSelection'); + navigation.push('BadgeSelection', {editing: false}); }}> -- cgit v1.2.3-70-g09d2