refactor(contacts): consolidate customer queries and enhance contact handling

- Replaced use of useCustomersInfiniteQuery with a new useContactsInfiniteQuery hook for improved data fetching.
- Simplified ContactsList and MastersGrid components by removing unnecessary customer documentId filters.
- Deleted outdated contact-related hooks and queries to streamline the codebase.
- Enhanced loading state management across components for better user experience.

apps/web/components/contacts/contacts-list.tsx

@@ -2,43 +2,17 @@
 
 import { DataNotFound } from '../shared/alert';
 import { ContactRow } from '../shared/contact-row';
-import { useCustomerQuery, useCustomersInfiniteQuery } from '@/hooks/api/customers';
+import { useContactsInfiniteQuery } from '@/hooks/api/customers';
 import { Button } from '@repo/ui/components/ui/button';
 import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 
 export function ContactsList() {
-  const { data: { customer } = {}, isLoading: isLoadingCustomer } = useCustomerQuery();
-
   const {
     data: { pages } = {},
     fetchNextPage,
     hasNextPage,
-    isLoading: isLoadingContacts,
-  } = useCustomersInfiniteQuery(
-    {
-      filters: {
-        or: [
-          {
-            invited: {
-              documentId: {
-                contains: customer?.documentId,
-              },
-            },
-          },
-          {
-            invitedBy: {
-              documentId: {
-                eq: customer?.documentId,
-              },
-            },
-          },
-        ],
-      },
-    },
-    { enabled: Boolean(customer?.documentId) },
-  );
-
-  const isLoading = isLoadingCustomer || isLoadingContacts;
+    isLoading,
+  } = useContactsInfiniteQuery();
 
   const contacts = pages?.flatMap((page) => page.customers);
 

apps/web/components/orders/order-form/contacts-grid.tsx

@@ -1,11 +1,12 @@
+/* eslint-disable canonical/id-match */
 'use client';
 
 import { DataNotFound } from '@/components/shared/alert';
 import { UserAvatar } from '@/components/shared/user-avatar';
 import { CardSectionHeader } from '@/components/ui';
-import { useCustomerQuery, useCustomersInfiniteQuery } from '@/hooks/api/customers';
+import { useContactsInfiniteQuery, useCustomerQuery } from '@/hooks/api/customers';
 import { useOrderStore } from '@/stores/order';
-import { type CustomerFieldsFragment } from '@repo/graphql/types';
+import { type CustomerFieldsFragment, Enum_Customer_Role } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { Card } from '@repo/ui/components/ui/card';
 import { Label } from '@repo/ui/components/ui/label';
@@ -127,7 +128,9 @@ export function MastersGrid() {
 
   return (
     <ContactsGridBase
-      contacts={contacts.filter((contact) => contact.documentId !== clientId)}
+      contacts={contacts.filter(
+        (contact) => contact.documentId !== clientId && contact.role !== Enum_Customer_Role.Client,
+      )}
       hasNextPage={Boolean(hasNextPage)}
       isLoading={isLoading}
       onClick={() => {
@@ -148,36 +151,12 @@ function useContacts() {
     data: { pages } = { pages: [] },
     isLoading: isLoadingContacts,
     ...query
-  } = useCustomersInfiniteQuery(
-    {
-      filters: {
-        or: [
-          {
-            invited: {
-              documentId: {
-                contains: customer?.documentId,
-              },
-            },
-          },
-          {
-            invitedBy: {
-              documentId: {
-                eq: customer?.documentId,
-              },
-            },
-          },
-        ],
-      },
-    },
-    { enabled: Boolean(customer?.documentId) },
-  );
+  } = useContactsInfiniteQuery();
 
   const isLoading = isLoadingContacts || isLoadingCustomer;
 
   const contacts = sift(
-    pages
-      .flatMap((page) => page.customers)
-      .filter((contact) => Boolean(contact && contact?.active)),
+    pages.flatMap((page) => page.customers).filter((contact) => Boolean(contact && contact.active)),
   );
 
   return {

apps/web/hooks/api/contacts/index.ts

@@ -1,2 +0,0 @@
-export * from './query';
-export * from './use-customer-contacts';

apps/web/hooks/api/contacts/query.ts

@@ -1,23 +0,0 @@
-import { getInvited, getInvitedBy } from '@/actions/api/customers';
-import { useQuery } from '@tanstack/react-query';
-import { useSession } from 'next-auth/react';
-
-export const useInvitedQuery = (props?: Parameters<typeof getInvited>[0]) => {
-  const { data: session } = useSession();
-  const telegramId = props?.telegramId || session?.user?.telegramId;
-
-  return useQuery({
-    queryFn: () => getInvited({ telegramId }),
-    queryKey: ['customer', 'telegramId', telegramId, 'invited'],
-  });
-};
-
-export const useInvitedByQuery = (props?: Parameters<typeof getInvitedBy>[0]) => {
-  const { data: session } = useSession();
-  const telegramId = props?.telegramId || session?.user?.telegramId;
-
-  return useQuery({
-    queryFn: () => getInvitedBy({ telegramId }),
-    queryKey: ['customer', 'telegramId', telegramId, 'invitedBy'],
-  });
-};

apps/web/hooks/api/contacts/use-customer-contacts.ts

@@ -1,47 +0,0 @@
-'use client';
-
-import { useInvitedByQuery, useInvitedQuery } from './query';
-import { ContactsContext } from '@/context/contacts';
-import { sift } from 'radashi';
-import { use, useEffect, useMemo } from 'react';
-
-export function useCustomerContacts() {
-  const { filter, setFilter } = use(ContactsContext);
-
-  const {
-    data: invitedData,
-    isLoading: isLoadingInvited,
-    refetch: refetchInvited,
-  } = useInvitedQuery();
-
-  const {
-    data: invitedByData,
-    isLoading: isLoadingInvitedBy,
-    refetch: refetchInvitedBy,
-  } = useInvitedByQuery();
-
-  const invited = invitedData?.invited || [];
-  const invitedBy = invitedByData?.invitedBy || [];
-
-  const isLoading = isLoadingInvited || isLoadingInvitedBy;
-
-  useEffect(() => {
-    if (filter === 'invited') {
-      refetchInvited();
-    } else if (filter === 'invitedBy') {
-      refetchInvitedBy();
-    } else {
-      refetchInvited();
-      refetchInvitedBy();
-    }
-  }, [filter, refetchInvited, refetchInvitedBy]);
-
-  const contacts = useMemo(() => {
-    if (filter === 'invited') return sift(invited);
-    if (filter === 'invitedBy') return sift(invitedBy);
-
-    return [...sift(invited), ...sift(invitedBy)];
-  }, [invited, invitedBy, filter]);
-
-  return { contacts, filter, isLoading, setFilter };
-}

apps/web/hooks/api/customers.ts

@@ -81,3 +81,38 @@ export const useCustomerMutation = () => {
     onSuccess: handleOnSuccess,
   });
 };
+
+export function useContactsInfiniteQuery() {
+  const { data: { customer } = {}, isLoading: isLoadingCustomer } = useCustomerQuery();
+
+  const { isLoading: isLoadingContacts, ...query } = useCustomersInfiniteQuery(
+    {
+      filters: {
+        or: [
+          {
+            invited: {
+              documentId: {
+                contains: customer?.documentId,
+              },
+            },
+          },
+          {
+            invitedBy: {
+              documentId: {
+                eq: customer?.documentId,
+              },
+            },
+          },
+        ],
+      },
+    },
+    { enabled: Boolean(customer?.documentId) },
+  );
+
+  const isLoading = isLoadingContacts || isLoadingCustomer;
+
+  return {
+    isLoading,
+    ...query,
+  };
+}