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/screens/badge/BadgeList.tsx | 52 +++++++++--------- src/screens/badge/BadgeScreenHeader.tsx | 5 +- src/screens/badge/BadgeSelection.tsx | 63 ++++++++++------------ .../SuggestedPeopleUploadPictureScreen.tsx | 1 + 4 files changed, 60 insertions(+), 61 deletions(-) (limited to 'src/screens') 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); } -- cgit v1.2.3-70-g09d2