diff --git a/apps/web/components/orders/components/contacts-grid.tsx b/apps/web/components/orders/components/contacts-grid.tsx index 1db5425..ecb76d1 100644 --- a/apps/web/components/orders/components/contacts-grid.tsx +++ b/apps/web/components/orders/components/contacts-grid.tsx @@ -1,61 +1,88 @@ 'use client'; import { LoadingSpinner } from '../../common/spinner'; +import { CardSectionHeader } from '@/components/ui'; +import { ContactsFilterProvider } from '@/context/contacts-filter'; import { OrderContext } from '@/context/order'; import { useCustomerContacts } from '@/hooks/contacts'; // eslint-disable-next-line import/extensions import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png'; +import { withContext } from '@/utils/context'; +import { type CustomerFieldsFragment } from '@repo/graphql/types'; +import { Card } from '@repo/ui/components/ui/card'; import { Label } from '@repo/ui/components/ui/label'; import { cn } from '@repo/ui/lib/utils'; import Image from 'next/image'; import { use } from 'react'; -export function ContactsGrid() { - const { customerId: selected, setCustomerId: setSelected } = use(OrderContext); +type ContactsGridProps = { + readonly contacts: CustomerFieldsFragment[]; + readonly onSelect: (contactId: null | string) => void; + readonly selected?: null | string; + readonly title: string; +}; + +function ContactsGridBase({ contacts, onSelect, selected, title }: ContactsGridProps) { + return ( + +
+ +
+ {contacts.map((contact) => { + if (!contact) return null; + + return ( + + ); + })} +
+
+ + ); +} + +export const ContactsGrid = withContext(ContactsFilterProvider)(function () { const { contacts, isLoading } = useCustomerContacts(); + const { customerId, setCustomerId } = use(OrderContext); if (isLoading) return ; - function handleOnSelect(contactId: string) { - setSelected(contactId); - } - return ( -
- {contacts.map((contact) => { - if (!contact) return null; - - return ( - - ); - })} -
+ setCustomerId(contactId)} + selected={customerId} + title="Все" + /> ); -} +}); diff --git a/apps/web/components/profile/components/index.ts b/apps/web/components/profile/components/index.ts index bbf8904..a1e6bef 100644 --- a/apps/web/components/profile/components/index.ts +++ b/apps/web/components/profile/components/index.ts @@ -1,4 +1,3 @@ -export * from './card-header'; export * from './checkbox-field'; export * from './link-button'; export * from './text-field'; diff --git a/apps/web/components/profile/data-card.tsx b/apps/web/components/profile/data-card.tsx index 2c95f27..fff5bac 100644 --- a/apps/web/components/profile/data-card.tsx +++ b/apps/web/components/profile/data-card.tsx @@ -1,5 +1,6 @@ 'use client'; -import { CheckboxWithText, DataField, ProfileCardHeader } from './components'; +import { CardSectionHeader } from '../ui'; +import { CheckboxWithText, DataField } from './components'; import { type ProfileProps } from './types'; import { useProfileMutation, useProfileQuery } from '@/hooks/profile'; import { Enum_Customer_Role as Role } from '@repo/graphql/types'; @@ -37,7 +38,7 @@ export function ProfileDataCard() { return (
- + ) { +export function CardSectionHeader({ title }: Readonly) { return (

{title}

diff --git a/apps/web/components/ui/index.ts b/apps/web/components/ui/index.ts new file mode 100644 index 0000000..c86a634 --- /dev/null +++ b/apps/web/components/ui/index.ts @@ -0,0 +1 @@ +export * from './card-header'; diff --git a/apps/web/context/contacts-filter.tsx b/apps/web/context/contacts-filter.tsx index 21512e9..9a30bc5 100644 --- a/apps/web/context/contacts-filter.tsx +++ b/apps/web/context/contacts-filter.tsx @@ -1,12 +1,12 @@ 'use client'; -import { createContext, useMemo, useState } from 'react'; +import { createContext, type PropsWithChildren, useMemo, useState } from 'react'; export type FilterType = 'all' | 'clients' | 'masters'; type ContextType = { filter: FilterType; setFilter: (filter: FilterType) => void }; export const ContactsFilterContext = createContext({} as ContextType); -export function ContactsFilterProvider({ children }: { readonly children: React.ReactNode }) { +export function ContactsFilterProvider({ children }: Readonly) { const [filter, setFilter] = useState('all'); const value = useMemo(() => ({ filter, setFilter }), [filter, setFilter]); diff --git a/apps/web/context/order.tsx b/apps/web/context/order.tsx index 65409b0..b3f31c4 100644 --- a/apps/web/context/order.tsx +++ b/apps/web/context/order.tsx @@ -9,9 +9,9 @@ type ContextType = { nextStep: () => void; prevStep: () => void; serviceId: null | string; - setCustomerId: (customerId: string) => void; + setCustomerId: (customerId: null | string) => void; setDate: (date: Date) => void; - setServiceId: (serviceId: string) => void; + setServiceId: (serviceId: null | string) => void; setStep: (step: Steps) => void; setTime: (time: string) => void; step: Steps; diff --git a/apps/web/hooks/contacts/use-customer-contacts.ts b/apps/web/hooks/contacts/use-customer-contacts.ts index f9bb7c2..adf673d 100644 --- a/apps/web/hooks/contacts/use-customer-contacts.ts +++ b/apps/web/hooks/contacts/use-customer-contacts.ts @@ -5,7 +5,7 @@ import { sift } from 'radash'; import { use, useMemo } from 'react'; export function useCustomerContacts() { - const { filter } = use(ContactsFilterContext); + const { filter, setFilter } = use(ContactsFilterContext); const { data: clientsData, isLoading: isLoadingClients } = useClientsQuery(); const { data: mastersData, isLoading: isLoadingMasters } = useMastersQuery(); @@ -25,5 +25,5 @@ export function useCustomerContacts() { } }, [clients, masters, filter]); - return { contacts, isLoading }; + return { contacts, filter, isLoading, setFilter }; }