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;