Merge branch 'master' into tma-722-cornell-fe

# Conflicts:
#	src/types/types.ts

3 files changed, 101 insertions, 5 deletions

diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx
new file mode 100644
index 00000000..92bec47f
--- /dev/null
+++ b/src/components/onboarding/UniversitySelection.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {UniversityType} from '../../types';
+import {normalize} from '../../utils';
+
+interface UniversitySelectionProps {
+  selected: UniversityType;
+  setSelected: (selected: UniversityType) => void;
+}
+
+const UniversitySelection: React.FC<UniversitySelectionProps> = ({
+  selected,
+  setSelected,
+}) => {
+  const crestData = [
+    {
+      imagePath: require('../../assets/universities/brown.png'),
+      title: 'Brown',
+      key: UniversityType.Brown,
+    },
+    {
+      imagePath: require('../../assets/universities/cornell.png'),
+      title: 'Cornell',
+      key: UniversityType.Cornell,
+    },
+    // {
+    //   imagePath: require('../../assets/universities/harvard.png'),
+    //   title: 'Harvard',
+    //   key: UniversityType.Harvard,
+    // },
+  ];
+  const renderButton = (
+    imagePath: ImageSourcePropType,
+    title: string,
+    key: UniversityType,
+  ) => (
+    <TouchableOpacity
+      style={
+        selected === key ? styles.crestContainerSelected : styles.crestContainer
+      }
+      onPress={() => setSelected(key)}>
+      <Image source={imagePath} style={styles.crest} />
+      <Text style={styles.crestLabel}>{title}</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <>
+      <Text style={styles.title}>University Badge</Text>
+      <View style={styles.container}>
+        {crestData.map((data) =>
+          renderButton(data.imagePath, data.title, data.key),
+        )}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+  },
+  crest: {
+    height: normalize(25),
+    aspectRatio: 31 / 38,
+    marginBottom: 5,
+  },
+  crestContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  crestContainerSelected: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    padding: 8,
+    backgroundColor: '#fff2',
+  },
+  crestLabel: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '500',
+  },
+});
+
+export default UniversitySelection;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index b790933f..fdb85090 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -10,3 +10,4 @@ export {default as TaggDropDown} from './TaggDropDown';
 export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
 export {default as MomentCategory} from './MomentCategory';
+export {default as UniversitySelection} from './UniversitySelection';
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 2fec5cca..a77a2e84 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -24,11 +24,9 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
   const {setIsOpen, userXId, isBlocked, handleBlockUnblock, userXName} = props;
   const {
     user: {userId, username},
-  } = useSelector((state: RootState) => state.user);
+    profile,
+  } = useSelector((state: RootState) => state?.user);
   const isOwnProfile = !userXId || userXName === username;
-  const {suggested_people_linked} = useSelector(
-    (state: RootState) => state.user.profile,
-  );
 
   const goToEditProfile = () => {
     navigation.push('EditProfile', {
@@ -39,7 +37,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
   };
 
   const goToUpdateSPProfile = () => {
-    if (suggested_people_linked === 0) {
+    if (profile.suggested_people_linked === 0) {
       Alert.alert(ERROR_ATTEMPT_EDIT_SP);
     } else {
       // Sending undefined for updatedSelectedBadges to mark that there was no update yet