aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/badge/BadgeList.tsx52
-rw-r--r--src/screens/badge/BadgeScreenHeader.tsx5
-rw-r--r--src/screens/badge/BadgeSelection.tsx63
-rw-r--r--src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx1
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);
}