From 25266852ed1f7e7492afd5a4eeb146940a3a2f33 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Mar 2021 08:14:30 -0800 Subject: minor syntax --- src/components/suggestedPeople/BadgesDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx index 70c70e47..76e8e46f 100644 --- a/src/components/suggestedPeople/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/BadgesDropdown.tsx @@ -71,7 +71,7 @@ const BadgesDropdown: React.FC = ({ { - const updatedBadges = !displayBadges + const updatedBadges = !displayBadges; setDisplayBadges(updatedBadges); if (updatedBadges) { animate(); -- cgit v1.2.3-70-g09d2 From c17bd1e936409d32dd272fb13856e8b7eb98d2dc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 11 Mar 2021 08:55:30 -0800 Subject: basic styling for edit badges button --- src/components/common/TaggSquareButton.tsx | 11 +++-- .../SuggestedPeopleUploadPictureScreen.tsx | 49 ++++++++++++++++++---- 2 files changed, 49 insertions(+), 11 deletions(-) (limited to 'src/components') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 817a2690..1a1c33b3 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -9,14 +9,17 @@ import { ViewStyle, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import {BACKGROUND_GRADIENT_MAP, TAGG_PURPLE} from '../../constants'; +import { + BACKGROUND_GRADIENT_MAP, + TAGG_LIGHT_BLUE, + TAGG_PURPLE, +} from '../../constants'; import {normalize, SCREEN_WIDTH} from '../../utils'; - interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; title: string; buttonStyle: 'normal' | 'large' | 'gradient'; - buttonColor: 'purple' | 'white'; + buttonColor: 'purple' | 'white' | 'blue'; labelColor: 'white' | 'blue'; style?: ViewStyle; labelStyle?: TextStyle; @@ -27,6 +30,8 @@ const TaggSquareButton: React.FC = (props) => { switch (props.buttonColor) { case 'purple': return {backgroundColor: TAGG_PURPLE}; + case 'blue': + return {backgroundColor: TAGG_LIGHT_BLUE}; case 'white': default: return {backgroundColor: 'white'}; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index 6c298efb..eb8494f4 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -6,6 +6,7 @@ import { ImageBackground, StatusBar, StyleSheet, + View, } from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; @@ -13,7 +14,7 @@ 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} from '../../components'; +import {TaggSquareButton, UniversityIcon} from '../../components'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {SP_HEIGHT, SP_WIDTH} from '../../constants'; import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; @@ -24,6 +25,7 @@ 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'; const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { const {editing} = route.params; @@ -140,19 +142,28 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { )} {editing && ( - { - navigation.push('BadgeSelection', {selectedBadges}); - }}> - edit badges ---> - + + + + Edit Badges + + { + navigation.push('BadgeSelection', {selectedBadges}); + }}> + + + )} {image && ( Date: Thu, 11 Mar 2021 08:58:04 -0800 Subject: removed useless console log --- src/components/search/SearchCategories.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components') diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx index c3c4c518..f016a806 100644 --- a/src/components/search/SearchCategories.tsx +++ b/src/components/search/SearchCategories.tsx @@ -13,7 +13,6 @@ const SearchCategories: React.FC = () => { useEffect(() => { const loadButtons = async () => { const localButtons = await getButtons(); - console.log('localButtons: ', localButtons); await setButtons(localButtons); }; loadButtons(); -- 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/components') 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 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/components') 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