[TMA - 457]Change followers to friends (#149)

* One commit to replace followers with friends

* Move block unblock to drawer and some cosmetic changes

* Options to edit own profile when viewing

* Changes for University Class

* Small fix

* Made ProfileOnboarding a scroll view and other small changes

* Small fix

* Small fix thanks to ivan and tanmay

* Add ?

1 files changed, 130 insertions, 80 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 611f1598..d51aec95 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -25,9 +25,13 @@ import {
   websiteRegex,
   bioRegex,
   genderRegex,
+  CLASS_YEAR_LIST,
 } from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
 import {BackgroundGradientType} from '../../types';
+import {PickerSelectProps} from 'react-native-picker-select';
+import Animated from 'react-native-reanimated';
+import {SCREEN_WIDTH} from '../../utils';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -65,6 +69,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     isValidGender: true,
     attemptedSubmit: false,
     token: '',
+    classYear: -1,
   });
   const [customGender, setCustomGender] = React.useState(Boolean);
 
@@ -100,6 +105,12 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     }
   };
 
+  var classYearList: Array<any> = [];
+
+  CLASS_YEAR_LIST.map((value) => {
+    classYearList.push({label: value, value: value});
+  });
+
   /**
    * Profile screen "Add header image" button
    */
@@ -212,6 +223,14 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     }
   };
 
+  const handleClassYearUpdate = (value: string) => {
+    const classYear = Number.parseInt(value);
+    setForm({
+      ...form,
+      classYear,
+    });
+  };
+
   const handleCustomGenderUpdate = (gender: string) => {
     let isValidGender: boolean = genderRegex.test(gender);
     gender = gender.replace(' ', '-');
@@ -238,6 +257,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
       Alert.alert('Please select a Profile Picture!');
       return;
     }
+    if (form.classYear === -1) {
+      Alert.alert('Please select Class Year');
+      return;
+    }
     if (!form.attemptedSubmit) {
       setForm({
         ...form,
@@ -298,6 +321,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
       }
     }
 
+    if (form.classYear !== -1) {
+      request.append('university_class', form.classYear);
+    }
+
     if (invalidFields) {
       return;
     }
@@ -344,96 +371,118 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
   };
 
   return (
-    <Background centered gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <View style={styles.profile}>
-        <LargeProfilePic />
-        <SmallProfilePic />
-      </View>
-      <View style={styles.contentContainer}>
-        <TaggInput
-          accessibilityHint="Enter a website."
-          accessibilityLabel="Website input field."
-          placeholder="Website"
-          autoCompleteType="off"
-          textContentType="URL"
-          autoCapitalize="none"
-          returnKeyType="next"
-          onChangeText={handleWebsiteUpdate}
-          onSubmitEditing={() => handleFocusChange('bio')}
-          blurOnSubmit={false}
-          valid={form.isValidWebsite}
-          attemptedSubmit={form.attemptedSubmit}
-          invalidWarning={'Website must be a valid link to your website'}
-          width={280}
-        />
-        <TaggBigInput
-          accessibilityHint="Enter a bio."
-          accessibilityLabel="Bio input field."
-          placeholder="Bio"
-          autoCompleteType="off"
-          textContentType="none"
-          autoCapitalize="none"
-          returnKeyType="next"
-          onChangeText={handleBioUpdate}
-          onSubmitEditing={() => handleFocusChange('bio')}
-          blurOnSubmit={false}
-          ref={bioRef}
-          valid={form.isValidBio}
-          attemptedSubmit={form.attemptedSubmit}
-          invalidWarning={
-            'Bio must be less than 150 characters and must contain valid characters'
-          }
-          width={280}
-        />
-        <BirthDatePicker
-          ref={birthdateRef}
-          handleBDUpdate={handleBirthdateUpdate}
-          width={280}
-          date={form.birthdate}
-          showPresetdate={false}
-        />
-        <TaggDropDown
-          onValueChange={(value: string) => handleGenderUpdate(value)}
-          items={[
-            {label: 'Male', value: 'male'},
-            {label: 'Female', value: 'female'},
-            {label: 'Custom', value: 'custom'},
-          ]}
-          placeholder={{
-            label: 'Gender',
-            value: null,
-            color: '#ddd',
-          }}
-        />
-        {customGender && (
+    <Animated.ScrollView bounces={false}>
+      <Background
+        centered
+        gradientType={BackgroundGradientType.Light}
+        style={styles.container}>
+        <StatusBar barStyle="light-content" />
+        <View style={styles.profile}>
+          <LargeProfilePic />
+          <SmallProfilePic />
+        </View>
+        <View style={styles.contentContainer}>
           <TaggInput
-            accessibilityHint="Custom"
-            accessibilityLabel="Gender input field."
-            placeholder="Enter your gender"
+            accessibilityHint="Enter a website."
+            accessibilityLabel="Website input field."
+            placeholder="Website"
+            autoCompleteType="off"
+            textContentType="URL"
+            autoCapitalize="none"
+            returnKeyType="next"
+            onChangeText={handleWebsiteUpdate}
+            onSubmitEditing={() => handleFocusChange('bio')}
+            blurOnSubmit={false}
+            valid={form.isValidWebsite}
+            attemptedSubmit={form.attemptedSubmit}
+            invalidWarning={'Website must be a valid link to your website'}
+            width={280}
+          />
+          <TaggBigInput
+            accessibilityHint="Enter a bio."
+            accessibilityLabel="Bio input field."
+            placeholder="Bio"
             autoCompleteType="off"
             textContentType="none"
             autoCapitalize="none"
             returnKeyType="next"
+            onChangeText={handleBioUpdate}
+            onSubmitEditing={() => handleFocusChange('bio')}
             blurOnSubmit={false}
-            ref={customGenderRef}
-            onChangeText={handleCustomGenderUpdate}
-            onSubmitEditing={() => handleSubmit()}
-            valid={form.isValidGender}
+            ref={bioRef}
+            valid={form.isValidBio}
             attemptedSubmit={form.attemptedSubmit}
-            invalidWarning={'Custom field can only contain letters and hyphens'}
+            invalidWarning={
+              'Bio must be less than 150 characters and must contain valid characters'
+            }
             width={280}
           />
-        )}
-        <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
-          <Text style={styles.submitBtnLabel}>Let's start!</Text>
-        </TouchableOpacity>
-      </View>
-    </Background>
+          <BirthDatePicker
+            ref={birthdateRef}
+            handleBDUpdate={handleBirthdateUpdate}
+            width={280}
+            date={form.birthdate}
+            showPresetdate={false}
+          />
+          <TaggDropDown
+            onValueChange={(value: string) => handleClassYearUpdate(value)}
+            items={classYearList}
+            placeholder={{
+              label: 'Class Year',
+              value: null,
+              color: '#ddd',
+            }}
+          />
+          {customGender && (
+            <TaggInput
+              accessibilityHint="Custom"
+              accessibilityLabel="Gender input field."
+              placeholder="Enter your gender"
+              autoCompleteType="off"
+              textContentType="none"
+              autoCapitalize="none"
+              returnKeyType="next"
+              blurOnSubmit={false}
+              ref={customGenderRef}
+              onChangeText={handleCustomGenderUpdate}
+              onSubmitEditing={() => handleSubmit()}
+              valid={form.isValidGender}
+              attemptedSubmit={form.attemptedSubmit}
+              invalidWarning={
+                'Custom field can only contain letters and hyphens'
+              }
+              width={280}
+            />
+          )}
+          <TaggDropDown
+            onValueChange={(value: string) => handleGenderUpdate(value)}
+            items={[
+              {label: 'Male', value: 'male'},
+              {label: 'Female', value: 'female'},
+              {label: 'Custom', value: 'custom'},
+            ]}
+            placeholder={{
+              label: 'Gender',
+              value: null,
+              color: '#ddd',
+            }}
+          />
+          <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
+            <Text style={styles.submitBtnLabel}>Let's start!</Text>
+          </TouchableOpacity>
+        </View>
+      </Background>
+    </Animated.ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginBottom: '10%',
+  },
   profile: {
     flexDirection: 'row',
     marginBottom: '5%',
@@ -449,7 +498,7 @@ const styles = StyleSheet.create({
     padding: 15,
     backgroundColor: '#fff',
     marginLeft: '13%',
-    marginTop: '5%',
+    marginTop: '10%',
     height: 230,
     width: 230,
     borderRadius: 23,
@@ -491,11 +540,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#8F01FF',
     justifyContent: 'center',
     alignItems: 'center',
-    width: 150,
-    height: 40,
+    width: SCREEN_WIDTH / 2.5,
+    height: SCREEN_WIDTH / 10,
     borderRadius: 5,
     marginTop: '5%',
     alignSelf: 'center',
+    marginBottom: SCREEN_WIDTH / 3,
   },
   submitBtnLabel: {
     fontSize: 16,