diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx new file mode 100644 index 0000000..c61c08f --- /dev/null +++ b/src/components/Selector.tsx @@ -0,0 +1,3 @@ +export default function Selector() { + return
Selector
; +} diff --git a/src/components/modals/ClientModal.tsx b/src/components/modals/ClientModal.tsx index 758cdd3..f3adbee 100644 --- a/src/components/modals/ClientModal.tsx +++ b/src/components/modals/ClientModal.tsx @@ -25,7 +25,14 @@ function ClientModal({ client }: { client: Client }) { const { mutate: updateClientData, isPending } = useMutation({ mutationKey: ["clients", client.id], - mutationFn: () => api.put(`clients/${client.id}`, { json: clientData }), + mutationFn: () => + api.put(`clients/${client.id}`, { + json: { + name: clientData.name, + phone: clientData.phone.replace(/\D/g, ""), + email: clientData.email, + }, + }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["clients"] }); }, @@ -58,7 +65,6 @@ function ClientModal({ client }: { client: Client }) { onChange={(e) => { setClientData({ ...clientData, name: e.target.value }); }} - className="relative" required > { setClientData({ ...clientData, phone: e.target.value }); }} - className="relative" required + mask="+7 (999) 999-99-99" > (client?.name || null); const [phone, setPhone] = useState(client?.phone || null); const [email, setEmail] = useState(client?.email || null); + const [isFullPhone, setIsFullPhone] = useState(false); const [isSessionExists, setIsSessionExists] = useState(false); const queryClient = useQueryClient(); @@ -43,6 +44,8 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { ); const [selectedApp, setSelectedApp] = useState(null); + const { data, isLoading, error } = useClientSearch(phone); + useEffect(() => { setSelectedApp( selectedServer?.sessions?.[0]?.app || @@ -51,28 +54,15 @@ export default function CreateSessionModal({ targetServerId, client }: Props) { ); }, [selectedServer]); - const debouncedPhone = useDebounce(phone, 500); - - const { data, isLoading, error } = useQuery({ - queryKey: ["get-user-by-phone", debouncedPhone], - queryFn: () => - api - .get("clients/by-phone", { - searchParams: debouncedPhone ? { phone: debouncedPhone } : {}, - }) - .json(), - enabled: !!debouncedPhone, - }); - useEffect(() => { if (!error && data) { setName(data.name); setEmail(data.email); } else { - setName(null); - setEmail(null); + setName(isFullPhone ? name : null); + setEmail(isFullPhone ? email : null); } - }, [data, error]); + }, [data, error, isFullPhone, name, email]); const { mutate: createClient } = useMutation({ mutationFn: () => @@ -206,14 +196,19 @@ export default function CreateSessionModal({ targetServerId, client }: Props) {
setPhone(e.target.value)} + onChange={(e) => { + setPhone(e.target.value); + if (e.target.value.replace(/\D/g, "").length === 11) { + setIsFullPhone(true); + } + }} placeholder="Номер телефона" mask="+7 (999) 999-99-99" required isLoading={isLoading} /> - {phone && ( + {isFullPhone && ( <> { + setIsSearching(isPhoneComplete); + }, [isPhoneComplete]); + + const debouncedPhone = useDebounce(phone, 500); + + const { data, isLoading, error } = useQuery({ + queryKey: ["get-user-by-phone", debouncedPhone], + queryFn: () => + api + .get("clients/by-phone", { + searchParams: + debouncedPhone && debouncedPhone.replace(/\D/g, "").length === 11 + ? { phone: debouncedPhone.replace(/\D/g, "") } + : {}, + }) + .json(), + enabled: Boolean(debouncedPhone && isPhoneComplete), + }); + + useEffect(() => { + if (!isLoading && isSearching) { + setIsSearching(false); + } + }, [isLoading, isSearching]); + + return { + data, + isLoading: isSearching || isLoading, + error, + }; +} + +export default useClientSearch;