From 14e9b6da1e911b1beadf78f59d2e69ac0f6f6a3b Mon Sep 17 00:00:00 2001
From: LinaYahya <linaebe0@gmail.com>
Date: Wed, 10 Jan 2024 14:20:15 +0100
Subject: [PATCH] feat: filter memberships for same member to render highest
 permission only

---
 .../item/sharing/ItemSharingTab.tsx           | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/item/sharing/ItemSharingTab.tsx b/src/components/item/sharing/ItemSharingTab.tsx
index 937b44385..dd17838fc 100644
--- a/src/components/item/sharing/ItemSharingTab.tsx
+++ b/src/components/item/sharing/ItemSharingTab.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import {
   DiscriminatedItem,
   ItemMembership,
+  PermissionLevelCompare,
   isPseudonymizedMember,
 } from '@graasp/sdk';
 import { Loader } from '@graasp/ui';
@@ -32,6 +33,27 @@ type Props = {
   item: DiscriminatedItem;
   memberships?: ItemMembership[];
 };
+interface PermissionMap {
+  [key: string]: ItemMembership;
+}
+
+const selectHighestMemberships = (
+  memberships: ItemMembership[],
+): ItemMembership[] => {
+  const permissionMap = memberships.reduce<PermissionMap>((acc, curr) => {
+    const { member, permission } = curr;
+
+    if (
+      !acc[member.id] ||
+      PermissionLevelCompare.gt(permission, acc[member.id].permission)
+    ) {
+      acc[member.id] = curr;
+    }
+    return acc;
+  }, {});
+
+  return Object.values(permissionMap);
+};
 
 const ItemSharingTab = ({ item, memberships }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
@@ -89,7 +111,7 @@ const ItemSharingTab = ({ item, memberships }: Props): JSX.Element => {
           emptyMessage={translateBuilder(
             BUILDER.SHARING_AUTHORIZED_MEMBERS_EMPTY_MESSAGE,
           )}
-          memberships={authorizedMemberships}
+          memberships={selectHighestMemberships(authorizedMemberships)}
           readOnly={!canEditSettings}
         />
 
@@ -104,7 +126,7 @@ const ItemSharingTab = ({ item, memberships }: Props): JSX.Element => {
             </Typography>
             <ItemMembershipsTable
               item={item}
-              memberships={authenticatedMemberships}
+              memberships={selectHighestMemberships(authenticatedMemberships)}
               emptyMessage={translateBuilder(
                 BUILDER.SHARING_AUTHENTICATED_MEMBERS_EMPTY_MESSAGE,
               )}