feat: refactor ClientSelect to use ObjectSelect for improved client selection

src/components/Selects/ClientSelect/ClientSelect.tsx

@@ -1,75 +1,23 @@
-import { FC, ReactNode, useEffect, useState } from "react";
+import { FC } from "react";
-import { Select, Text } from "@mantine/core";
 import { ClientSchema } from "../../../client";
 import useClientsList from "../../../pages/ClientsPage/hooks/useClientsList.tsx";
+import ObjectSelect, { ObjectSelectProps } from "../../ObjectSelect/ObjectSelect.tsx";
 
-type Props = {
+type Props = Omit<
-    value?: ClientSchema;
+    ObjectSelectProps<ClientSchema>,
-    onChange: (client: ClientSchema) => void;
+    "data" | "getLabelFn" | "getValueFn"
-    withLabel?: boolean;
+>;
-    error?: string;
-    inputContainer?: (children: ReactNode) => ReactNode;
-    disabled?: boolean;
-};
 
-type Option = {
+const ClientSelect: FC<Props> = (props: Props) => {
-    label: string;
-    value: string;
-};
-
-const ClientSelect: FC<Props> = ({ value, onChange, error, inputContainer, withLabel = false, disabled = false }) => {
     const { clients } = useClientsList({ all: true });
-    const [options, setOptions] = useState<Option[]>([]);
-    const [deletedClientIds, setDeletedClientIds] = useState<Set<number>>(new Set());
-    const [errorMsg, setErrorMsg] = useState<string>("");
 
-    useEffect(() => {
-        const options = clients
-            .filter(client => !client.isDeleted)
-            .map(client => ({
-                label: client.name,
-                value: client.id.toString(),
-            }));
-        setOptions(options);
-
-        const deletedClientIds = clients.filter(client => client.isDeleted).map(client => client.id);
-        setDeletedClientIds(new Set(deletedClientIds));
-    }, [options]);
-
-    useEffect(() => {
-        if (value && deletedClientIds.has(value.id)) {
-            setErrorMsg("Выбран удаленный клиент");
-        } else {
-            setErrorMsg("");
-        }
-    }, [value, deletedClientIds]);
 
     return (
-        <>
+        <ObjectSelect
-            <Select
+            {...props}
-                searchable
+            placeholder={"Выберите клиента"}
-                placeholder={"Выберите клиента"}
+            data={clients.filter(cl => !cl.isDeleted)}
-                value={
+        />
-                    value &&
-                    options.find(client => client.value == value.id.toString())
-                        ?.value
-                }
-                onChange={event => {
-                    if (!event) return;
-                    const client = clients.find(
-                        client => client.id == parseInt(event),
-                    );
-                    if (!client) return;
-                    onChange(client);
-                }}
-                data={options}
-                label={withLabel && "Клиент"}
-                error={error}
-                inputContainer={inputContainer}
-                disabled={disabled}
-            />
-            {errorMsg && <Text size={"sm"} c={"red"}>{errorMsg}</Text>}
-        </>
     );
 };
 export default ClientSelect;

src/modules/cardModules/cardEditorTabs/ClientTab/ClientTab.tsx

@@ -149,7 +149,6 @@ const ClientTab = () => {
                     <ClientSelect
                         value={client}
                         onChange={setClient}
-                        withLabel
                         disabled={!isEqual(initialValues, form.values) || !!card?.chat}
                     />
                     {!card?.chat && (