Merge pull request #298 from shravyaramesh/bugfix-mutual-badge-holders-inconsistent-icon

[Bugfix] Displaying corresponding icon for badges in modal

4 files changed, 18 insertions, 11 deletions

diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx
index 76e8e46f..99c03057 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/BadgesDropdown.tsx
@@ -110,6 +110,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 navigation.navigate('MutualBadgeHolders', {
                   badge_id: badge.id,
                   badge_title: badge.name,
+                  badge_img: img,
                 });
               }}>
               <LinearGradient
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index f7404f27..142249ce 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -82,6 +82,7 @@ export type MainStackParams = {
   MutualBadgeHolders: {
     badge_id: string;
     badge_title: string;
+    badge_img: string;
   };
 };
 
diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
index 9742d72c..e3b69f7a 100644
--- a/src/screens/suggestedPeople/MutualBadgeHolders.tsx
+++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
@@ -32,17 +32,18 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
   route,
   navigation,
 }) => {
-  const {badge_id, badge_title} = route.params;
+  const {badge_id, badge_title, badge_img} = route.params;
   const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]);
 
   useEffect(() => {
-    const getUsers = async (badge_id: string) => {
+    const getUsers = async () => {
       let localUsers:
         | ProfilePreviewType[]
         | undefined = await getMutualBadgeHolders(badge_id);
+
       setUsers(localUsers);
     };
-    getUsers(badge_id);
+    getUsers();
   }, [badge_id]);
 
   return (
@@ -67,7 +68,7 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
                * Awaiting final images from product
                */}
               <Image
-                source={require('../../assets/icons/badges/football.png')}
+                source={badge_img}
                 style={{width: SCREEN_WIDTH * 0.1, height: SCREEN_WIDTH * 0.1}}
               />
             </LinearGradient>
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index a65b91ef..e51914b0 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -13,7 +13,7 @@ import {
   UPDATE_BADGES_ENDPOINT,
 } from '../constants/api';
 import {ProfilePreviewType, SuggestedPeopleDataType} from '../types';
-import { Alert } from 'react-native';
+import {Alert} from 'react-native';
 
 export const sendSuggestedPeopleLinked = async (
   userId: string,
@@ -107,15 +107,19 @@ export const getSuggestedPeopleProfile = async (userId: string) => {
   }
 };
 
-export const getMutualBadgeHolders = async () => {
+export const getMutualBadgeHolders = async (badge_id: string) => {
   try {
     const token = await AsyncStorage.getItem('token');
-    const response = await fetch(SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, {
-      method: 'GET',
-      headers: {
-        Authorization: 'Token ' + token,
+    console.log('badge_id: ', badge_id);
+    const response = await fetch(
+      SP_MUTUAL_BADGE_HOLDERS_ENDPOINT + '?badge_id=' + badge_id,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: 'Token ' + token,
+        },
       },
-    });
+    );
     if (response.status === 200) {
       const data: ProfilePreviewType[] = await response.json();
       return data;