Resetting old commit

26 files changed, 287 insertions, 72 deletions

diff --git a/src/assets/images/badges/alpha_chi_omega.png b/src/assets/images/badges/alpha_chi_omega.png
new file mode 100644
index 00000000..473894cc
--- /dev/null
+++ b/src/assets/images/badges/alpha_chi_omega.png
diff --git a/src/assets/images/badges/alpha_phi_alpha.png b/src/assets/images/badges/alpha_phi_alpha.png
new file mode 100644
index 00000000..275e0eb3
--- /dev/null
+++ b/src/assets/images/badges/alpha_phi_alpha.png
diff --git a/src/assets/images/badges/baseball.png b/src/assets/images/badges/baseball.png
new file mode 100644
index 00000000..7b470dbe
--- /dev/null
+++ b/src/assets/images/badges/baseball.png
diff --git a/src/assets/images/badges/basketball.png b/src/assets/images/badges/basketball.png
new file mode 100644
index 00000000..45d1139b
--- /dev/null
+++ b/src/assets/images/badges/basketball.png
diff --git a/src/assets/images/badges/beta_omega_chi.png b/src/assets/images/badges/beta_omega_chi.png
new file mode 100644
index 00000000..f2a85996
--- /dev/null
+++ b/src/assets/images/badges/beta_omega_chi.png
diff --git a/src/assets/images/dummy_badge.png b/src/assets/images/badges/brown_badge.png
index bcffb6e3..bcffb6e3 100644
--- a/src/assets/images/dummy_badge.png
+++ b/src/assets/images/badges/brown_badge.png
diff --git a/src/assets/images/badges/delta_gamma.png b/src/assets/images/badges/delta_gamma.png
new file mode 100644
index 00000000..84182eca
--- /dev/null
+++ b/src/assets/images/badges/delta_gamma.png
diff --git a/src/assets/images/badges/delta_phi.png b/src/assets/images/badges/delta_phi.png
new file mode 100644
index 00000000..074317d1
--- /dev/null
+++ b/src/assets/images/badges/delta_phi.png
diff --git a/src/assets/images/badges/field_hockey.png b/src/assets/images/badges/field_hockey.png
new file mode 100644
index 00000000..766f0f60
--- /dev/null
+++ b/src/assets/images/badges/field_hockey.png
diff --git a/src/assets/images/football.png b/src/assets/images/badges/football.png
index 2e8214b7..2e8214b7 100644
--- a/src/assets/images/football.png
+++ b/src/assets/images/badges/football.png
diff --git a/src/assets/images/badges/gymnastics.png b/src/assets/images/badges/gymnastics.png
new file mode 100644
index 00000000..5d500f26
--- /dev/null
+++ b/src/assets/images/badges/gymnastics.png
diff --git a/src/assets/images/badges/hockey.png b/src/assets/images/badges/hockey.png
new file mode 100644
index 00000000..7e269665
--- /dev/null
+++ b/src/assets/images/badges/hockey.png
diff --git a/src/assets/images/badges/kappa_alpha_psi.png b/src/assets/images/badges/kappa_alpha_psi.png
new file mode 100644
index 00000000..1b7d7aff
--- /dev/null
+++ b/src/assets/images/badges/kappa_alpha_psi.png
diff --git a/src/assets/images/badges/kappa_delta.png b/src/assets/images/badges/kappa_delta.png
new file mode 100644
index 00000000..642ddb5b
--- /dev/null
+++ b/src/assets/images/badges/kappa_delta.png
diff --git a/src/assets/images/badges/lax.png b/src/assets/images/badges/lax.png
new file mode 100644
index 00000000..3810589b
--- /dev/null
+++ b/src/assets/images/badges/lax.png
diff --git a/src/assets/images/badges/sigma.png b/src/assets/images/badges/sigma.png
new file mode 100644
index 00000000..7e6c9d22
--- /dev/null
+++ b/src/assets/images/badges/sigma.png
diff --git a/src/assets/images/badges/theta_alpha.png b/src/assets/images/badges/theta_alpha.png
new file mode 100644
index 00000000..607720f5
--- /dev/null
+++ b/src/assets/images/badges/theta_alpha.png
diff --git a/src/assets/images/badges/track.png b/src/assets/images/badges/track.png
new file mode 100644
index 00000000..a531f641
--- /dev/null
+++ b/src/assets/images/badges/track.png
diff --git a/src/assets/images/badges/volleyball.png b/src/assets/images/badges/volleyball.png
new file mode 100644
index 00000000..a9bb9c88
--- /dev/null
+++ b/src/assets/images/badges/volleyball.png
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 57c26824..dcc2032d 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -32,6 +32,7 @@ export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
 export const DISCOVER_ENDPOINT: string = API_URL + 'discover/';
 export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
 export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
+export const ADD_USER_BADGES: string = API_URL + 'suggested_people/add_badges/';
 
 // Suggested People
 export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/';
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index b99e2e3a..7b55d249 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -236,7 +236,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         name="Badge"
         component={BadgeSelection}
         options={{
-          ...headerBarOptions('white', 'Badge'),
+          ...headerBarOptions('white', ''),
         }}
       />
     </MainStack.Navigator>
diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
index 6d2a2f2e..790fea0a 100644
--- a/src/screens/badge/BadgeItem.tsx
+++ b/src/screens/badge/BadgeItem.tsx
@@ -1,33 +1,46 @@
 import React from 'react';
-import {View, Text, StyleSheet, Image} from 'react-native';
+import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
 import {Background} from '../../components';
 import {SCREEN_WIDTH, normalize} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
 import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface BadgeItemProps {
-  title: String;
-  resourcePath: String;
+  title: string;
+  resourcePath: ImageSourcePropType;
   index: Number;
+  selected: boolean;
+  onSelection: (ikey: string) => void;
+  itemKey: string;
 }
 
-const BadgeItem: React.FC<BadgeItemProps> = ({title, index}) => {
+const BadgeItem: React.FC<BadgeItemProps> = ({
+  title,
+  resourcePath,
+  selected,
+  index,
+  onSelection,
+  itemKey,
+}) => {
   return (
-    <LinearGradient
-      colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
-      useAngle={true}
-      angle={136.69}
-      style={styles.item}>
-      <View style={styles.detailContainer}>
-        <Image
-          source={require('../../assets/images/football.png')}
-          style={styles.imageStyles}
-        />
-        <View style={styles.textContainer}>
-          <Text style={styles.title}>{title}</Text>
+    <TouchableOpacity onPress={() => onSelection(itemKey)}>
+      <LinearGradient
+        colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+        useAngle={true}
+        angle={136.69}
+        style={styles.item}>
+        <View
+          style={
+            selected ? styles.selectedDetailContainer : styles.detailContainer
+          }>
+          <Image source={resourcePath} style={styles.imageStyles} />
+          <View style={styles.textContainer}>
+            <Text style={styles.title}>{title}</Text>
+          </View>
         </View>
-      </View>
-    </LinearGradient>
+      </LinearGradient>
+    </TouchableOpacity>
   );
 };
 
@@ -39,7 +52,22 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     borderRadius: 8,
   },
-  detailContainer: {flex: 1, justifyContent: 'center', alignItems: 'center'},
+  detailContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderRadius: 8,
+    borderColor: 'transparent',
+  },
+  selectedDetailContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: 'white',
+    borderRadius: 8,
+  },
   imageStyles: {
     width: '31%',
     height: '31%',
@@ -52,6 +80,7 @@ const styles = StyleSheet.create({
     lineHeight: normalize(17.9),
     textAlign: 'center',
     color: 'white',
+    marginHorizontal: '2%',
   },
 });
 
diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx
index aa95b464..0f9fa67e 100644
--- a/src/screens/badge/BadgeList.tsx
+++ b/src/screens/badge/BadgeList.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {StyleSheet, SectionList, ScrollView, View} from 'react-native';
 import BadgeItem from './BadgeItem';
 import BadgeHeader from './BadgeListHeader';
@@ -6,9 +6,12 @@ import {SCREEN_HEIGHT} from '../../utils';
 
 interface BadgeListProps {
   data: any[];
+  selectedBadges : any[], 
+  selectKey: (ikey: string) => void;
 }
 
-const BadgeList: React.FC<BadgeListProps> = ({data}) => {
+const BadgeList: React.FC<BadgeListProps> = ({data, selectedBadges, selectKey}) => {
+
   return (
     <View>
       <ScrollView contentContainerStyle={styles.scrollViewStyles}>
@@ -16,9 +19,21 @@ const BadgeList: React.FC<BadgeListProps> = ({data}) => {
           contentContainerStyle={styles.listContainer}
           sections={data}
           keyExtractor={(item, index) => item + index}
-          renderItem={({item, index}) => (
-            <BadgeItem title={item} resourcePath={''} index={index} />
-          )}
+          extraData={selectedBadges}
+          renderItem={({item: {badgeName, badgeImage}, index}) => {
+            return (
+              <BadgeItem
+                selected={selectedBadges.includes(
+                  badgeName + badgeImage + index,
+                )}
+                onSelection={selectKey}
+                itemKey={badgeName + badgeImage + index}
+                title={badgeName}
+                resourcePath={badgeImage}
+                index={index}
+              />
+            );
+          }}
           renderSectionHeader={({section: {title}}) => (
             <BadgeHeader title={title} />
           )}
diff --git a/src/screens/badge/BadgeListHeader.tsx b/src/screens/badge/BadgeListHeader.tsx
index 57364d22..27335dfb 100644
--- a/src/screens/badge/BadgeListHeader.tsx
+++ b/src/screens/badge/BadgeListHeader.tsx
@@ -18,7 +18,8 @@ const styles = StyleSheet.create({
   headerContainer: {
     width: SCREEN_WIDTH * 0.75,
     marginHorizontal: SCREEN_WIDTH * 0.125,
-    marginBottom: 17,
+    marginBottom: '2%',
+    marginTop: '4%',
   },
   header: {
     fontSize: normalize(20),
diff --git a/src/screens/badge/BadgeScreenHeader.tsx b/src/screens/badge/BadgeScreenHeader.tsx
index 6cc576a8..7f722e28 100644
--- a/src/screens/badge/BadgeScreenHeader.tsx
+++ b/src/screens/badge/BadgeScreenHeader.tsx
@@ -5,7 +5,7 @@ import {SCREEN_WIDTH, SCREEN_HEIGHT, normalize} from '../../utils';
 const BadgeScreenHeader: React.FC = () => {
   return (
     <View style={styles.container}>
-      <Image source={require('../../assets/images/dummy_badge.png')} />
+      <Image source={require('../../assets/images/badges/brown_badge.png')} />
       <View style={styles.universityTextContainer}>
         <Text style={styles.universityText}>Brown University Badges</Text>
       </View>
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index 924eefc3..3c718202 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -1,11 +1,5 @@
-import React from 'react';
-import {
-  StatusBar,
-  SafeAreaView,
-  View,
-  StyleSheet,
-  ScrollView,
-} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {StatusBar, SafeAreaView, View, StyleSheet} from 'react-native';
 import {BackgroundGradientType} from '../../types';
 import {Background} from '../../components';
 import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils';
@@ -13,60 +7,231 @@ import LinearGradient from 'react-native-linear-gradient';
 import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 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 post suggestions
- * for users to discover and browse
- */
+ * Home Screen for displaying Tagg Badge Selections
+ **/
+
+const BadgeImages = {
+  football: require('../../assets/images/badges/football.png'),
+  track: require('../../assets/images/badges/track.png'),
+  volleyball: require('../../assets/images/badges/volleyball.png'),
+  lax: require('../../assets/images/badges/brown_badge.png'),
+  fieldHockey: require('../../assets/images/badges/field_hockey.png'),
+  gymnastics: require('../../assets/images/badges/gymnastics.png'),
+  hockey: require('../../assets/images/badges/hockey.png'),
+  baseball: require('../../assets/images/badges/baseball.png'),
+  basketball: require('../../assets/images/badges/basketball.png'),
+  kappadelta: require('../../assets/images/badges/kappa_delta.png'),
+  alphachiomega: require('../../assets/images/badges/alpha_chi_omega.png'),
+  deltagamma: require('../../assets/images/badges/delta_gamma.png'),
+  sigma: require('../../assets/images/badges/sigma.png'),
+  thetaalpha: require('../../assets/images/badges/theta_alpha.png'),
+  deltaphi: require('../../assets/images/badges/delta_phi.png'),
+  kappaalphapsi: require('../../assets/images/badges/kappa_alpha_psi.png'),
+  alphaphialpha: require('../../assets/images/badges/alpha_phi_alpha.png'),
+  betaomegachi: require('../../assets/images/badges/beta_omega_chi.png'),
+};
 
 const DATA = [
   {
-    title: 'Historically Black Fraternities',
-    data: ['Pizza', 'Burger', 'Risotto'],
+    title: 'Athletics',
+    data: [
+      {
+        badgeName: 'Brown Football',
+        badgeImage: BadgeImages.football,
+      },
+      {
+        badgeName: 'Brown Track',
+        badgeImage: BadgeImages.track,
+      },
+      {
+        badgeName: 'Brown Volleyball',
+        badgeImage: BadgeImages.volleyball,
+      },
+      {
+        badgeName: 'Brown LAX',
+        badgeImage: BadgeImages.lax,
+      },
+      {
+        badgeName: 'Brown Field Hockey',
+        badgeImage: BadgeImages.fieldHockey,
+      },
+      {
+        badgeName: 'Brown Gymnastics',
+        badgeImage: BadgeImages.gymnastics,
+      },
+      {
+        badgeName: 'Brown Hockey',
+        badgeImage: BadgeImages.hockey,
+      },
+      {
+        badgeName: 'Brown Baseball',
+        badgeImage: BadgeImages.baseball,
+      },
+      {
+        badgeName: 'Brown Basketball',
+        badgeImage: BadgeImages.basketball,
+      },
+    ],
   },
+
   {
-    title: 'Sides',
+    title: 'Sorority',
     data: [
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
-      'French Fries',
-      'Onion Rings',
-      'Fried Shrimps',
+      {
+        badgeName: 'Kappa Delta',
+        badgeImage: BadgeImages.kappadelta,
+      },
+      {
+        badgeName: 'Alpha Chi Omega',
+        badgeImage: BadgeImages.alphachiomega,
+      },
+      {
+        badgeName: 'Delta Gamma',
+        badgeImage: BadgeImages.deltagamma,
+      },
     ],
   },
+
   {
-    title: 'Drinks',
-    data: ['Water', 'Coke', 'Beer'],
+    title: 'Fraternity',
+    data: [
+      {
+        badgeName: 'Sigma',
+        badgeImage: BadgeImages.sigma,
+      },
+      {
+        badgeName: 'Theta Alpha',
+        badgeImage: BadgeImages.thetaalpha,
+      },
+      {
+        badgeName: 'Delta Phi',
+        badgeImage: BadgeImages.deltaphi,
+      },
+    ],
   },
   {
-    title: 'Desserts',
-    data: ['Cheese Cake', 'Ice Cream'],
+    title: 'Historically Black Fraternities',
+    data: [
+      {
+        badgeName: 'Kappa Alpha Psi',
+        badgeImage: BadgeImages.kappadelta,
+      },
+      {
+        badgeName: 'Alpha Phi Alpha',
+        badgeImage: BadgeImages.alphaphialpha,
+      },
+      {
+        badgeName: 'Beta Omega Chi',
+        badgeImage: BadgeImages.betaomegachi,
+      },
+    ],
   },
 ];
 
-const BadgeSelection: React.FC = () => {
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {Text} from 'react-native-animatable';
+import {useDispatch} from 'react-redux';
+
+type BadgeSelectionParamList = {
+  BadgeList: any[];
+};
+
+type BadgeSelectionScreenNavigationProp = StackNavigationProp<
+  BadgeSelectionParamList,
+  'BadgeList'
+>;
+
+type BadgeSelectionProps = {
+  navigation: BadgeSelectionScreenNavigationProp;
+};
+
+const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
+  const [canSubmit, setCanSubmit] = useState(false);
+  navigation.setOptions({
+    headerRight: () => (
+      <TouchableOpacity
+        style={{marginRight: 24}}
+        onPress={() => {
+          if (canSubmit) {
+            uploadUserSelection();
+          }
+        }}>
+        <Text
+          style={{
+            color: '#FFFFFF',
+            fontWeight: 'bold',
+            fontSize: 15,
+            lineHeight: 18,
+          }}>
+          {canSubmit ? 'Done' : 'Skip'}
+        </Text>
+      </TouchableOpacity>
+    ),
+    headerLeft: () => (
+      <TouchableOpacity style={{marginLeft: 24}}>
+        <Text
+          style={{
+            color: '#FFFFFF',
+            fontWeight: '500',
+            fontSize: 15,
+            lineHeight: 18,
+          }}>
+          Cancel
+        </Text>
+      </TouchableOpacity>
+    ),
+  });
+
+  const [selectedBadges, setSelectedBadges] = useState(Array<string>());
+  const selectKey = (key: string) => {
+    if (selectedBadges.includes(key)) {
+      const selectedBadgesArray = [...selectedBadges];
+      const itemIndex = selectedBadgesArray.indexOf(key);
+      if (itemIndex > -1) {
+        selectedBadgesArray.splice(itemIndex, 1);
+      }
+      setSelectedBadges(selectedBadgesArray);
+    } else {
+      const selectedBadgesArray = [...selectedBadges, key];
+      setSelectedBadges(selectedBadgesArray);
+    }
+  };
+  const dispatch = useDispatch();
+  useEffect(() => {
+    setCanSubmit(selectedBadges.length !== 0);
+  }, [selectedBadges]);
+
+  const uploadUserSelection = async () => {
+    try {
+      const token = await getTokenOrLogout(dispatch);
+      const reqBody = JSON.stringify({
+        badges: selectedBadges,
+      });
+      const response = await fetch(ADD_USER_BADGES, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Token ' + token,
+        },
+        body: reqBody,
+      });
+      const status = response.status;
+      const data = await response.json();
+      console.log(response);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <LinearGradient
       colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
@@ -81,7 +246,11 @@ const BadgeSelection: React.FC = () => {
             top={Animated.useValue(0)}
           />
           <View style={styles.listContainer}>
-            <BadgeList data={DATA} />
+            <BadgeList
+              data={DATA}
+              selectedBadges={selectedBadges}
+              selectKey={selectKey}
+            />
           </View>
         </View>
       </SafeAreaView>