commented out search bar, added screen to onboarding flow, fixed some layout issues

10 files changed, 88 insertions, 76 deletions

diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 7652fccd..93da6e59 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -14,7 +14,6 @@ export const ERROR_DELETED_OBJECT = 'Oh sad! Looks like the comment / moment was
 export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network connection and retry';
 export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password';
 export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one';
-export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one';
 export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information';
 export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!';
 export const ERROR_FAILED_TO_DELETE_COMMENT = 'Unable to delete comment, refresh and try again!';
@@ -28,20 +27,24 @@ export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please c
 export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again';
 export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and password, and try again';
 export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page 😓, try again in a couple minutes';
+export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one';
+export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one';
 export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed 😓';
 export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`;
 export const ERROR_REGISTRATION = (str: string) => `Registration failed 😔, ${str}`;
-export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year';
 export const ERROR_SELECT_BIRTHDAY = 'Please select your birthday';
+export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year';
 export const ERROR_SELECT_GENDER = 'Please select your gender';
 export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins';
-export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins';
 export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app';
 export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again";
 export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again";
+export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins';
 export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again';
 export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile';
 export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!';
+export const ERROR_UPLOAD_BADGES = 'Unable to upload your badges. Please retry';
+export const ERROR_BADGES_EXCEED_LIMIT = 'You can\'t have more than 5 badges!';
 export const ERROR_UPLOAD_LARGE_PROFILE_PIC = "Can't have the first image seen on the profile be blank, please upload a large picture";
 export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry';
 export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture";
@@ -51,12 +54,11 @@ export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to
 export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const NO_RESULTS_FOUND = 'No Results Found!';
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
+export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
 export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
-export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!';
-export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one';
 export const UP_TO_DATE = 'Up-to-Date!';
 export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!';
 export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 4230f4a6..901dd993 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -72,9 +72,6 @@ export type MainStackParams = {
   UpdateSPPicture: {
     goTo: string;
   };
-  Badge: {
-    screenType: ScreenType;
-  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 42b096f1..91ed2f70 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -226,13 +226,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           ...headerBarOptions('white', ''),
         }}
       />
-      <MainStack.Screen
-        name="Badge"
-        component={BadgeSelection}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
     </MainStack.Navigator>
   );
 };
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
index 85249034..737c503c 100644
--- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
+++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
@@ -5,6 +5,7 @@ export type SuggestedPeopleOnboardingStackParams = {
   UploadPicture: {
     goTo: string;
   };
+  BadgeSelection: undefined;
 };
 
 export const SuggestedPeopleOnboardingStack = createStackNavigator<SuggestedPeopleOnboardingStackParams>();
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
index 61cc694c..d1a6e5e1 100644
--- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
+++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
@@ -3,6 +3,7 @@ import {SuggestedPeopleOnboardingStack} from './SuggestedPeopleOnboardingStackNa
 import {
   SuggestedPeopleWelcomeScreen,
   SuggestedPeopleUploadPictureScreen,
+  BadgeSelection,
 } from '../../screens';
 import {SCREEN_WIDTH} from '../../utils';
 import {headerBarOptions} from '../main';
@@ -30,6 +31,13 @@ const SuggestedPeopleOnboardingStackScreen: React.FC = () => {
           ...headerBarOptions('white', ''),
         }}
       />
+      <SuggestedPeopleOnboardingStack.Screen
+        name="BadgeSelection"
+        component={BadgeSelection}
+        options={{
+          ...headerBarOptions('white', ''),
+        }}
+      />
     </SuggestedPeopleOnboardingStack.Navigator>
   );
 };
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);
       }
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index a9f9d945..4f1da47c 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -174,6 +174,18 @@ export const uploadedSuggestedPeoplePhoto = (
       type: setSuggestedPeopleImage.type,
       payload: {suggestedPeopleImage: imageUri},
     });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const suggestedPeopleBadgesFinished = (): ThunkAction<
+  Promise<void>,
+  RootState,
+  unknown,
+  Action<string>
+> => async (dispatch) => {
+  try {
     dispatch({
       type: setSuggestedPeopleLinked.type,
       payload: {suggested_people_linked: 1},