From 78e45718a85bd290b9eb604adfba668a1b6a2bf0 Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Wed, 10 Sep 2025 13:44:43 +0300 Subject: [PATCH] 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. --- .../web/components/contacts/contacts-list.tsx | 32 ++----------- .../orders/order-form/contacts-grid.tsx | 37 ++++----------- apps/web/hooks/api/contacts/index.ts | 2 - apps/web/hooks/api/contacts/query.ts | 23 --------- .../api/contacts/use-customer-contacts.ts | 47 ------------------- apps/web/hooks/api/customers.ts | 35 ++++++++++++++ 6 files changed, 46 insertions(+), 130 deletions(-) delete mode 100644 apps/web/hooks/api/contacts/index.ts delete mode 100644 apps/web/hooks/api/contacts/query.ts delete mode 100644 apps/web/hooks/api/contacts/use-customer-contacts.ts diff --git a/apps/web/components/contacts/contacts-list.tsx b/apps/web/components/contacts/contacts-list.tsx index 7595ef6..5bb238f 100644 --- a/apps/web/components/contacts/contacts-list.tsx +++ b/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); diff --git a/apps/web/components/orders/order-form/contacts-grid.tsx b/apps/web/components/orders/order-form/contacts-grid.tsx index 1ace9e7..ce8dc31 100644 --- a/apps/web/components/orders/order-form/contacts-grid.tsx +++ b/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 ( 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 { diff --git a/apps/web/hooks/api/contacts/index.ts b/apps/web/hooks/api/contacts/index.ts deleted file mode 100644 index 2c24633..0000000 --- a/apps/web/hooks/api/contacts/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './query'; -export * from './use-customer-contacts'; diff --git a/apps/web/hooks/api/contacts/query.ts b/apps/web/hooks/api/contacts/query.ts deleted file mode 100644 index fc07155..0000000 --- a/apps/web/hooks/api/contacts/query.ts +++ /dev/null @@ -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[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[0]) => { - const { data: session } = useSession(); - const telegramId = props?.telegramId || session?.user?.telegramId; - - return useQuery({ - queryFn: () => getInvitedBy({ telegramId }), - queryKey: ['customer', 'telegramId', telegramId, 'invitedBy'], - }); -}; diff --git a/apps/web/hooks/api/contacts/use-customer-contacts.ts b/apps/web/hooks/api/contacts/use-customer-contacts.ts deleted file mode 100644 index 3ecd709..0000000 --- a/apps/web/hooks/api/contacts/use-customer-contacts.ts +++ /dev/null @@ -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 }; -} diff --git a/apps/web/hooks/api/customers.ts b/apps/web/hooks/api/customers.ts index 6822241..b4ae973 100644 --- a/apps/web/hooks/api/customers.ts +++ b/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, + }; +}