Merge pull request #4133 from JoinColony/fix/3164-members-select-issues

Fix: Manage verified members member selection dropdown issues
JoinColony · Jan 23, 2025 · 92cdaae · 92cdaae
2 parents 1185b42 + 5da5f79
commit 92cdaae
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 75 deletions.
diff --git a/src/components/v5/common/ActionSidebar/partials/NonVerifiedMembersSelect/hooks.ts b/src/components/v5/common/ActionSidebar/partials/NonVerifiedMembersSelect/hooks.ts
@@ -1,47 +1,12 @@
 import { useMemberContext } from '~context/MemberContext/MemberContext.ts';
-import { splitAddress } from '~utils/strings.ts';
-import { type SearchSelectOption } from '~v5/shared/SearchSelect/types.ts';
+import { formatMembersSelectOptions } from '~v5/common/ActionSidebar/utils.ts';
 
 export const useNonVerifiedMembersSelect = () => {
   const { totalMembers } = useMemberContext();
 
-  const options = totalMembers.reduce<SearchSelectOption[]>(
-    (result, member) => {
-      if (member.isVerified) {
-        return result;
-      }
-
-      const { walletAddress, profile } = member.user || {};
-
-      const splittedWalletAddress =
-        walletAddress && splitAddress(walletAddress);
-      const maskedWalletAddress =
-        splittedWalletAddress &&
-        `${splittedWalletAddress.header}${splittedWalletAddress.start}...${splittedWalletAddress.end}`;
-
-      const splittedContributorAddress = splitAddress(
-        member.contributorAddress,
-      );
-      const maskedContributorAddress = `${splittedContributorAddress.header}${splittedContributorAddress.start}...${splittedContributorAddress.end}`;
-
-      return [
-        ...result,
-        {
-          value: walletAddress || '',
-          isVerified: false,
-          label:
-            profile?.displayName ||
-            (walletAddress && maskedWalletAddress) ||
-            maskedContributorAddress,
-          avatar: profile?.thumbnail || profile?.avatar || undefined,
-          id: result.length,
-          showAvatar: true,
-          walletAddress,
-          profile,
-        },
-      ];
-    },
-    [],
+  const options = formatMembersSelectOptions(
+    totalMembers.filter((member) => !member.isVerified),
+    false,
   );
 
   return {

diff --git a/src/components/v5/common/ActionSidebar/partials/VerifiedMembersSelect/hooks.ts b/src/components/v5/common/ActionSidebar/partials/VerifiedMembersSelect/hooks.ts
@@ -1,44 +1,10 @@
 import { useMemberContext } from '~context/MemberContext/MemberContext.ts';
-import { splitAddress } from '~utils/strings.ts';
-import { type SearchSelectOption } from '~v5/shared/SearchSelect/types.ts';
+import { formatMembersSelectOptions } from '~v5/common/ActionSidebar/utils.ts';
 
 export const useVerifiedMembersSelect = () => {
   const { verifiedMembers } = useMemberContext();
 
-  const options = verifiedMembers.reduce<SearchSelectOption[]>(
-    (result, member) => {
-      const { walletAddress, profile } = member.user || {};
-
-      const splittedWalletAddress =
-        walletAddress && splitAddress(walletAddress);
-      const maskedWalletAddress =
-        splittedWalletAddress &&
-        `${splittedWalletAddress.header}${splittedWalletAddress.start}...${splittedWalletAddress.end}`;
-
-      const splittedContributorAddress = splitAddress(
-        member.contributorAddress,
-      );
-      const maskedContributorAddress = `${splittedContributorAddress.header}${splittedContributorAddress.start}...${splittedContributorAddress.end}`;
-
-      return [
-        ...result,
-        {
-          value: walletAddress || '',
-          isVerified: true,
-          label:
-            profile?.displayName ||
-            (walletAddress && maskedWalletAddress) ||
-            maskedContributorAddress,
-          avatar: profile?.thumbnail || profile?.avatar || undefined,
-          id: result.length,
-          profile,
-          showAvatar: true,
-          walletAddress,
-        },
-      ];
-    },
-    [],
-  );
+  const options = formatMembersSelectOptions(verifiedMembers);
 
   return {
     usersOptions: {

diff --git a/src/components/v5/common/ActionSidebar/utils.ts b/src/components/v5/common/ActionSidebar/utils.ts
@@ -1,6 +1,7 @@
 import { apolloClient } from '~apollo';
 import { Action } from '~constants/actions.ts';
 import { SearchActionsDocument } from '~gql';
+import { type ColonyContributorFragment } from '~gql';
 import { ExtendedColonyActionType } from '~types/actions.ts';
 import { type ColonyAction, ColonyActionType } from '~types/graphql.ts';
 import { isQueryActive } from '~utils/isQueryActive.ts';
@@ -9,6 +10,8 @@ import {
   updateContributorVerifiedStatus,
 } from '~utils/members.ts';
 import { removeCacheEntry, CacheQueryKeys } from '~utils/queries.ts';
+import { splitAddress } from '~utils/strings.ts';
+import { type SearchSelectOption } from '~v5/shared/SearchSelect/types.ts';
 
 import {
   GROUP_FUNDS_LIST,
@@ -195,3 +198,36 @@ export const getActionGroup = (actionType: Action) => {
 
   return null;
 };
+
+export const formatMembersSelectOptions = (
+  members: ColonyContributorFragment[],
+  isVerified = true,
+): SearchSelectOption[] => {
+  return members.map((member, index) => {
+    const { walletAddress, profile } = member.user || {};
+
+    const splittedWalletAddress = walletAddress && splitAddress(walletAddress);
+    const maskedWalletAddress =
+      splittedWalletAddress &&
+      `${splittedWalletAddress.header}${splittedWalletAddress.start}...${splittedWalletAddress.end}`;
+
+    const splittedContributorAddress = splitAddress(member.contributorAddress);
+    const maskedContributorAddress = `${splittedContributorAddress.header}${splittedContributorAddress.start}...${splittedContributorAddress.end}`;
+
+    const walletAddressValue = walletAddress || member.contributorAddress || '';
+
+    return {
+      value: walletAddressValue,
+      isVerified,
+      label:
+        profile?.displayName ||
+        (walletAddress && maskedWalletAddress) ||
+        maskedContributorAddress,
+      avatar: profile?.thumbnail || profile?.avatar || undefined,
+      id: index,
+      profile,
+      showAvatar: true,
+      walletAddress: walletAddressValue,
+    };
+  });
+};