UI update

3 files changed, 42 insertions, 45 deletions

diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
index 790fea0a..ec47d7b5 100644
--- a/src/screens/badge/BadgeItem.tsx
+++ b/src/screens/badge/BadgeItem.tsx
@@ -12,7 +12,6 @@ interface BadgeItemProps {
   index: Number;
   selected: boolean;
   onSelection: (ikey: string) => void;
-  itemKey: string;
 }
 
 const BadgeItem: React.FC<BadgeItemProps> = ({
@@ -21,10 +20,9 @@ const BadgeItem: React.FC<BadgeItemProps> = ({
   selected,
   index,
   onSelection,
-  itemKey,
 }) => {
   return (
-    <TouchableOpacity onPress={() => onSelection(itemKey)}>
+    <TouchableOpacity onPress={() => onSelection(title)}>
       <LinearGradient
         colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
         useAngle={true}
@@ -53,7 +51,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
   },
   detailContainer: {
-    flex: 1,
+    flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
     borderWidth: 3,
@@ -61,7 +59,7 @@ const styles = StyleSheet.create({
     borderColor: 'transparent',
   },
   selectedDetailContainer: {
-    flex: 1,
+    flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
     borderWidth: 3,
diff --git a/src/screens/badge/BadgeList.tsx b/src/screens/badge/BadgeList.tsx
index 0f9fa67e..39d0a948 100644
--- a/src/screens/badge/BadgeList.tsx
+++ b/src/screens/badge/BadgeList.tsx
@@ -6,49 +6,48 @@ import {SCREEN_HEIGHT} from '../../utils';
 
 interface BadgeListProps {
   data: any[];
-  selectedBadges : any[], 
+  selectedBadges: any[];
   selectKey: (ikey: string) => void;
 }
 
-const BadgeList: React.FC<BadgeListProps> = ({data, selectedBadges, selectKey}) => {
-
+const BadgeList: React.FC<BadgeListProps> = ({
+  data,
+  selectedBadges,
+  selectKey,
+}) => {
   return (
-    <View>
-      <ScrollView contentContainerStyle={styles.scrollViewStyles}>
-        <SectionList
-          contentContainerStyle={styles.listContainer}
-          sections={data}
-          keyExtractor={(item, index) => item + 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} />
-          )}
-        />
-      </ScrollView>
-    </View>
+    <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>
   );
 };
 
 const styles = StyleSheet.create({
   listContainer: {
-    flex: 1,
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center',
+    flexGrow: 1,
   },
   scrollViewStyles: {
     paddingBottom: SCREEN_HEIGHT * 0.6,
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index 3c718202..fa709832 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -2,7 +2,7 @@ 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';
+import {StatusBarHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
 import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import BadgeList from './BadgeList';
@@ -216,6 +216,8 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
       const reqBody = JSON.stringify({
         badges: selectedBadges,
       });
+      console.log(ADD_USER_BADGES);
+      console.log(reqBody);
       const response = await fetch(ADD_USER_BADGES, {
         method: 'POST',
         headers: {
@@ -226,7 +228,7 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
       });
       const status = response.status;
       const data = await response.json();
-      console.log(response);
+      console.log(data);
     } catch (error) {
       console.log(error);
     }
@@ -245,13 +247,11 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
             onCancel={() => {}}
             top={Animated.useValue(0)}
           />
-          <View style={styles.listContainer}>
-            <BadgeList
-              data={DATA}
-              selectedBadges={selectedBadges}
-              selectKey={selectKey}
-            />
-          </View>
+          <BadgeList
+            data={DATA}
+            selectedBadges={selectedBadges}
+            selectKey={selectKey}
+          />
         </View>
       </SafeAreaView>
     </LinearGradient>