diff --git a/src/pages/ClientsPage/ClientsPage.tsx b/src/pages/ClientsPage/ClientsPage.tsx index 3316d87..495d559 100644 --- a/src/pages/ClientsPage/ClientsPage.tsx +++ b/src/pages/ClientsPage/ClientsPage.tsx @@ -3,15 +3,17 @@ import ClientsTable from "./components/ClientsTable/ClientsTable.tsx"; import useClientsList from "./hooks/useClientsList.tsx"; import PageBlock from "../../components/PageBlock/PageBlock.tsx"; import styles from "./ClientsPage.module.css"; -import { Button } from "@mantine/core"; +import { Button, TextInput } from "@mantine/core"; import { modals } from "@mantine/modals"; import { ClientSchema, ClientService } from "../../client"; import { notifications } from "../../shared/lib/notifications.ts"; import { ChatContextProvider } from "./contexts/ChatContext.tsx"; import ClientChatDrawer from "./drawers/ClientChatDrawer/ClientChatDrawer.tsx"; +import useClientsFilter from "./hooks/useClientsFilter.tsx"; const ClientsPage: FC = () => { const { clients, refetch } = useClientsList(); + const { filteredClients, search, setSearch } = useClientsFilter({ clients }); const onCreate = (client: ClientSchema) => { ClientService.createClientApi({ requestBody: { @@ -61,6 +63,11 @@ const ClientsPage: FC = () => { variant={"default"}> Создать клиента + setSearch(e.target.value)} + /> @@ -68,7 +75,7 @@ const ClientsPage: FC = () => { diff --git a/src/pages/ClientsPage/hooks/useClientsFilter.tsx b/src/pages/ClientsPage/hooks/useClientsFilter.tsx new file mode 100644 index 0000000..fd49f25 --- /dev/null +++ b/src/pages/ClientsPage/hooks/useClientsFilter.tsx @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import { ClientSchema } from "../../../client"; +import { useDebouncedValue } from "@mantine/hooks"; + +type Props = { + clients: ClientSchema[]; +} + +const useClientsFilter = ({ clients }: Props) => { + const [search, setSearch] = useState(""); + const debouncedSearch = useDebouncedValue(search, 400); + const [filteredClients, setFilteredClients] = useState([]); + + const filterClients = () => { + const loweredSearch = search.toLowerCase(); + const filtered = clients.filter( + client => ( + client.name.toLowerCase().includes(loweredSearch) || + client.details?.inn?.includes(loweredSearch) || + client.details?.email?.toLowerCase().includes(loweredSearch) || + client.details?.telegram?.toLowerCase().includes(loweredSearch) || + client.details?.phoneNumber?.includes(loweredSearch) || + client.companyName.toLowerCase().includes(loweredSearch) + ), + ); + setFilteredClients(filtered); + }; + + useEffect(() => { + filterClients(); + }, [debouncedSearch]); + + return { + search, + setSearch, + filteredClients, + }; +}; + +export default useClientsFilter;