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/BadgeItem.tsx | 55 +++++++++----- src/screens/badge/BadgeSelection.tsx | 86 ++++++++++++++++++---- .../SuggestedPeopleUploadPictureScreen.tsx | 12 ++- 3 files changed, 118 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx index adf74026..3141e662 100644 --- a/src/screens/badge/BadgeItem.tsx +++ b/src/screens/badge/BadgeItem.tsx @@ -2,7 +2,11 @@ import React from 'react'; import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native'; import {SCREEN_WIDTH, normalize} from '../../utils'; import LinearGradient from 'react-native-linear-gradient'; -import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants'; +import { + BACKGROUND_GRADIENT_MAP, + BADGE_GRADIENT_FIRST, + BADGE_GRADIENT_REST, +} from '../../constants'; import {TouchableOpacity} from 'react-native-gesture-handler'; interface BadgeItemProps { @@ -21,32 +25,45 @@ const BadgeItem: React.FC = ({ onSelection, }) => { return ( - onSelection(title)}> - - - - - {title} + + onSelection(title)} + style={{alignSelf: 'center', marginTop: 3}}> + + + + + {title} + - - - + + + ); }; const styles = StyleSheet.create({ + border: { + width: SCREEN_WIDTH / 3 - 20 + 6, + height: 146, + marginLeft: 10, + marginBottom: 12, + borderRadius: 8, + }, item: { width: SCREEN_WIDTH / 3 - 20, height: 140, - marginLeft: 15, - marginBottom: 12, borderRadius: 8, }, detailContainer: { 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 ( { const {editing} = route.params; const [image, setImage] = useState(undefined); + const [selectedBadges, setSelectedBadges] = useState([]); const [loading, setLoading] = useState(false); const dispatch = useDispatch(); const navigation = useNavigation(); @@ -39,6 +41,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { const response = await getSuggestedPeopleProfile(loggedInUserId); if (response) { setImage(response.suggested_people_url); + setSelectedBadges(response.badges); } }; // if we're in edit SP, attempt to load current sp image @@ -139,7 +142,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { {editing && ( { - navigation.push('BadgeSelection'); + navigation.push('BadgeSelection', {selectedBadges}); }}> edit badges ---> @@ -206,5 +209,12 @@ const styles = StyleSheet.create({ marginTop: '30%', marginBottom: '10%', }, + rightButtonContainer: {marginRight: 24}, + rightButton: { + color: '#FFFFFF', + fontWeight: 'bold', + fontSize: 15, + lineHeight: 18, + }, }); export default SuggestedPeopleUploadPictureScreen; -- cgit v1.2.3-70-g09d2