added socket
This commit is contained in:
@@ -11,6 +11,7 @@ type State = {
|
|||||||
first_name: string;
|
first_name: string;
|
||||||
last_name: string;
|
last_name: string;
|
||||||
active: boolean;
|
active: boolean;
|
||||||
|
id: number;
|
||||||
} | null;
|
} | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -26,6 +27,7 @@ type Actions = {
|
|||||||
first_name: string;
|
first_name: string;
|
||||||
last_name: string;
|
last_name: string;
|
||||||
active: boolean;
|
active: boolean;
|
||||||
|
id: number;
|
||||||
} | null,
|
} | null,
|
||||||
) => void;
|
) => void;
|
||||||
};
|
};
|
||||||
@@ -37,6 +39,7 @@ export const userInfoStore = create<State & Actions>((set) => ({
|
|||||||
first_name: string;
|
first_name: string;
|
||||||
last_name: string;
|
last_name: string;
|
||||||
active: boolean;
|
active: boolean;
|
||||||
|
id: number;
|
||||||
} | null,
|
} | null,
|
||||||
) => set(() => ({ loginUser: login })),
|
) => set(() => ({ loginUser: login })),
|
||||||
user: {
|
user: {
|
||||||
@@ -44,6 +47,7 @@ export const userInfoStore = create<State & Actions>((set) => ({
|
|||||||
last_name: "",
|
last_name: "",
|
||||||
user_id: "",
|
user_id: "",
|
||||||
active: false,
|
active: false,
|
||||||
|
id: null,
|
||||||
},
|
},
|
||||||
addedUser: (user) => set(() => ({ user })),
|
addedUser: (user) => set(() => ({ user })),
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -5,11 +5,12 @@ import LoginForm from "@/features/auth/ui/login";
|
|||||||
import { userInfoStore } from "@/shared/hooks/user-info";
|
import { userInfoStore } from "@/shared/hooks/user-info";
|
||||||
import { getToken, removeToken, saveToken } from "@/shared/lib/cookie";
|
import { getToken, removeToken, saveToken } from "@/shared/lib/cookie";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
import { useEffect } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const TokenLayout = ({ children }: { children: React.ReactNode }) => {
|
const TokenLayout = ({ children }: { children: React.ReactNode }) => {
|
||||||
const { addedUser, loginUser, setLoginUser } = userInfoStore();
|
const { addedUser, loginUser, setLoginUser } = userInfoStore();
|
||||||
const token = getToken();
|
const gettoken = getToken();
|
||||||
|
const [token, setToken] = useState<string | null>(null);
|
||||||
|
|
||||||
const { mutate: login, isPending } = useMutation({
|
const { mutate: login, isPending } = useMutation({
|
||||||
mutationFn: (body: { telegram_id: string }) => auth_api.login(body),
|
mutationFn: (body: { telegram_id: string }) => auth_api.login(body),
|
||||||
@@ -19,6 +20,7 @@ const TokenLayout = ({ children }: { children: React.ReactNode }) => {
|
|||||||
active: user.is_active,
|
active: user.is_active,
|
||||||
first_name: user.first_name,
|
first_name: user.first_name,
|
||||||
last_name: user.last_name,
|
last_name: user.last_name,
|
||||||
|
id: user.id,
|
||||||
});
|
});
|
||||||
if (user.token) saveToken(user.token);
|
if (user.token) saveToken(user.token);
|
||||||
},
|
},
|
||||||
@@ -44,6 +46,48 @@ const TokenLayout = ({ children }: { children: React.ReactNode }) => {
|
|||||||
}
|
}
|
||||||
}, [addedUser, login]);
|
}, [addedUser, login]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (loginUser === null) return;
|
||||||
|
|
||||||
|
const socket = new WebSocket(
|
||||||
|
`wss://api.meridynpharma.com/ws/user_activation/${loginUser.id}/`,
|
||||||
|
);
|
||||||
|
|
||||||
|
socket.onopen = () => {
|
||||||
|
console.log("WebSocket connected ✅");
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data.token) {
|
||||||
|
saveToken(data.token);
|
||||||
|
setToken(data.token);
|
||||||
|
|
||||||
|
// User holatini yangilash
|
||||||
|
setLoginUser({
|
||||||
|
...loginUser,
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("WebSocket message parse error:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onerror = (err) => {
|
||||||
|
console.error("WebSocket error:", err);
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onclose = () => {
|
||||||
|
console.log("WebSocket closed");
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
socket.close();
|
||||||
|
};
|
||||||
|
}, [loginUser]);
|
||||||
|
|
||||||
if (isPending && loginUser === null) {
|
if (isPending && loginUser === null) {
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900">
|
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900">
|
||||||
@@ -66,7 +110,7 @@ const TokenLayout = ({ children }: { children: React.ReactNode }) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <>{token ? children : <LoginForm />}</>;
|
return <>{token || gettoken ? children : <LoginForm />}</>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TokenLayout;
|
export default TokenLayout;
|
||||||
|
|||||||
@@ -14,9 +14,10 @@ export default defineConfig({
|
|||||||
"process.env": {},
|
"process.env": {},
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
|
port: 5174,
|
||||||
host: true, // barcha hostlarga ruxsat
|
host: true, // barcha hostlarga ruxsat
|
||||||
allowedHosts: [
|
allowedHosts: [
|
||||||
"nursing-worked-delays-assist.trycloudflare.com", // ngrok host qo'shildi
|
"seating-hostel-amended-ooo.trycloudflare.com", // ngrok host qo'shildi
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user