diff options
Diffstat (limited to 'src/screens')
-rw-r--r-- | src/screens/badge/BadgeList.tsx | 52 | ||||
-rw-r--r-- | src/screens/badge/BadgeScreenHeader.tsx | 5 | ||||
-rw-r--r-- | src/screens/badge/BadgeSelection.tsx | 63 | ||||
-rw-r--r-- | src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 1 |
4 files changed, 60 insertions, 61 deletions
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<BadgeListProps> = ({ selectKey, }) => { return ( - <ScrollView contentContainerStyle={styles.scrollViewStyles}> - <SectionList - stickySectionHeadersEnabled={true} - contentContainerStyle={styles.listContainer} - sections={data} - keyExtractor={(item, index) => item + index} - extraData={selectedBadges} - renderItem={({item: {badgeName, badgeImage}, index}) => { - return ( - <BadgeItem - selected={selectedBadges.includes(badgeName)} - onSelection={selectKey} - title={badgeName} - resourcePath={badgeImage} - index={index} - /> - ); - }} - renderSectionHeader={({section: {title}}) => ( - <BadgeHeader title={title} /> - )} - /> - </ScrollView> + <SectionList + stickySectionHeadersEnabled={false} + style={{height: SCREEN_HEIGHT * 0.8}} + contentContainerStyle={styles.listContainer} + sections={data} + keyExtractor={(item, index) => item + index} + extraData={selectedBadges} + renderItem={({item: {badgeName, badgeImage}, index}) => { + return ( + <BadgeItem + selected={selectedBadges.includes(badgeName)} + onSelection={selectKey} + title={badgeName} + resourcePath={badgeImage} + index={index} + /> + ); + }} + renderSectionHeader={({section: {title}}) => ( + <BadgeHeader title={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<BadgeSelectionProps> = ({navigation}) => { <Text style={styles.rightButton}>{canSubmit ? 'Done' : 'Skip'}</Text> </TouchableOpacity> ), - headerLeft: () => ( - <TouchableOpacity style={styles.leftButtonContainer}> - <Text style={styles.leftButton}>Cancel</Text> - </TouchableOpacity> - ), }); - const [selectedBadges, setSelectedBadges] = useState(Array<string>()); + const [selectedBadges, setSelectedBadges] = useState<string[]>([]); const selectKey = (key: string) => { if (selectedBadges.includes(key)) { const selectedBadgesArray = [...selectedBadges]; @@ -195,25 +189,25 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({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<BadgeSelectionProps> = ({navigation}) => { <SafeAreaView> <View style={styles.listContainer}> <BadgeScreenHeader /> - <SearchBar + {/* filter not working, comment out for now */} + {/* <SearchBar style={styles.searchBarStyle} onCancel={() => {}} top={Animated.useValue(0)} - /> + /> */} <BadgeList data={DATA} selectedBadges={selectedBadges} diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx index c587e930..bb8aaccf 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx @@ -76,6 +76,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => { const success = await sendSuggestedPeoplePhoto(image); if (success) { dispatch(uploadedSuggestedPeoplePhoto(image)); + navigation.push('BadgeSelection'); } else { Alert.alert(ERROR_UPLOAD); } |