From c1dcfb63233197a9bf9626e2067df9cd68cc95ce Mon Sep 17 00:00:00 2001
From: Raul Glogovetan <raul@glogovetan.com>
Date: Fri, 24 Nov 2023 17:45:45 +0200
Subject: [PATCH] Fix: `useUserAvatars` hook

---
 .../VoteOutcome/VoteResults/helpers.ts        | 49 -------------------
 src/hooks/index.ts                            |  1 +
 src/hooks/useUserAvatars/index.ts             | 24 ++++++---
 src/hooks/useUserAvatars/types.ts             |  6 ---
 4 files changed, 19 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers.ts
 delete mode 100644 src/hooks/useUserAvatars/types.ts

diff --git a/src/components/common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers.ts b/src/components/common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers.ts
deleted file mode 100644
index ec8127945c3..00000000000
--- a/src/components/common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { ContextModule, getContext } from '~context';
-import {
-  GetUserByAddressDocument,
-  GetUserByAddressQuery,
-  GetUserByAddressQueryVariables,
-} from '~gql';
-import { Address, User } from '~types';
-
-const getUsers = (
-  addresses: Address[],
-): Promise<(User | null | undefined)[]> => {
-  const apolloClient = getContext(ContextModule.ApolloClient);
-  return Promise.all(
-    addresses.map(async (address) => {
-      /*
-       * Per rules of hooks, can't call the codegen query hook inside a callback.
-       * Hence doing it directly.
-       */
-      const { data } = await apolloClient.query<
-        GetUserByAddressQuery,
-        GetUserByAddressQueryVariables
-      >({
-        query: GetUserByAddressDocument,
-        variables: {
-          address,
-        },
-      });
-      return data.getUserByAddress?.items[0];
-    }),
-  );
-};
-
-export const useGetUsers = (addresses: Address[]) => {
-  const [users, setUsers] = useState<User[]>([]);
-
-  useEffect(() => {
-    const fetchUsers = async () => {
-      const definedUsers = (await getUsers(addresses)).filter((user) =>
-        Boolean(user),
-      ) as User[];
-      setUsers(definedUsers);
-    };
-    fetchUsers();
-  }, [addresses]);
-
-  return users;
-};
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index ba2ecbbc4a5..9d6b16abfdf 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -76,6 +76,7 @@ export { default as useEnoughTokensForStaking } from './useEnoughTokensForStakin
 export { default as useCurrentBlockTime } from './useCurrentBlockTime';
 export { default as useClipboardCopy } from './useClipboardCopy';
 export { default as useInvitationLink } from './useInvitationLink';
+export { default as useUsersByAddresses } from './useUsersByAddresses';
 
 export {
   default as useSafeTransactionStatus,
diff --git a/src/hooks/useUserAvatars/index.ts b/src/hooks/useUserAvatars/index.ts
index 243004083b6..461e2f9ed82 100644
--- a/src/hooks/useUserAvatars/index.ts
+++ b/src/hooks/useUserAvatars/index.ts
@@ -1,16 +1,22 @@
 import { useMemo } from 'react';
+
+import { UserFragment } from '~gql';
+import { useAppContext, useUsersByAddresses } from '~hooks';
+import { notNull } from '~utils/arrays';
 import { calculateRemainingItems } from '~utils/avatars';
-import { useGetUsers } from '~common/ColonyActions/ActionDetailsPage/DefaultMotion/MotionPhaseWidget/VoteOutcome/VoteResults/helpers';
+
 import { UserAvatarsItem } from '~v5/shared/UserAvatars/types';
-import useAppContext from '../useAppContext';
-import { UseUserAvatarsReturnType } from './types';
 
 export const useUserAvatars = (
   maxAvatars: number,
   items: UserAvatarsItem[],
-): UseUserAvatarsReturnType => {
+): {
+  remainingAvatarsCount: number;
+  registeredUsers: UserFragment[];
+} => {
   const remainingAvatarsCount = calculateRemainingItems(maxAvatars, items);
   const { user } = useAppContext();
+
   const voterAddresses = useMemo(
     () =>
       items.reduce<string[]>((acc, { address }) => {
@@ -24,10 +30,16 @@ export const useUserAvatars = (
     [items, user],
   );
 
-  const registeredUsers = useGetUsers(voterAddresses);
+  const { users: registeredUsers = [] } = useUsersByAddresses(
+    /*
+     * @NOTE Due to how the or filter works
+     * If the array would be empty it would return all users
+     */
+    voterAddresses.length ? voterAddresses : [''],
+  );
 
   return {
     remainingAvatarsCount,
-    registeredUsers,
+    registeredUsers: registeredUsers.filter(notNull),
   };
 };
diff --git a/src/hooks/useUserAvatars/types.ts b/src/hooks/useUserAvatars/types.ts
deleted file mode 100644
index ab6ef446fe3..00000000000
--- a/src/hooks/useUserAvatars/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { UserFragment } from '~gql';
-
-export interface UseUserAvatarsReturnType {
-  remainingAvatarsCount: number;
-  registeredUsers: UserFragment[];
-}