This commit is contained in:
2025-06-19 12:23:34 +05:00
2 changed files with 69 additions and 60 deletions
+10 -1
View File
@@ -11,6 +11,7 @@ import clsx from "clsx";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import CurrentSessionModal from "./modals/CurrentSessionModal";
import SpinIcon from "./icons/SpinIcon";
import { useIsMutating } from "@tanstack/react-query";
interface IDesktopCardProps {
server: Server;
@@ -19,6 +20,14 @@ interface IDesktopCardProps {
export default function DesktopCard({ server }: IDesktopCardProps) {
const { setModal, setPosition } = useModalStore();
const isStarting = useIsMutating({
mutationKey: ["create-session", server.id],
});
const isEnding = useIsMutating({
mutationKey: ["end-session", server.sessions?.[0]?.id],
});
async function handleClickCreateSession() {
setPosition("right");
setModal(<CreateSessionModal targetServerId={server.id} />);
@@ -52,7 +61,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
</div>
</div>
<div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
{server.sessions?.[0]?.status === "starting" ? (
{server.sessions?.[0]?.status === "starting" || isStarting ? (
<div className="flex items-center gap-[0.278vw] bg-[#F8F7FE] p-[0.833vw] rounded-[0.833vw]">
<span className="size-[1.111vw] animate-spin text-[#7B60F3]">
<SpinIcon />
+52 -52
View File
@@ -23,7 +23,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
const [name, setName] = useState<string | null>(null);
const [phone, setPhone] = useState<string | null>(null);
const [email, setEmail] = useState<string | null>(null);
const [isSessionExists, setIsSessionExists] = useState(false);
// const [isSessionExists, setIsSessionExists] = useState(false);
const queryClient = useQueryClient();
@@ -113,21 +113,21 @@ export default function CreateSessionModal({ targetServerId }: Props) {
},
});
const { mutate: endSession } = useMutation({
mutationKey: ["sessions", selectedServer?.sessions?.[0]?.id],
mutationFn: () =>
api.put(`sessions/${selectedServer?.sessions?.[0]?.id}`, {
json: { status: "ending" },
}),
onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
});
// const { mutate: endSession } = useMutation({
// mutationKey: ["end-session", selectedServer?.sessions?.[0]?.id],
// mutationFn: () =>
// api.put(`sessions/${selectedServer?.sessions?.[0]?.id}`, {
// json: { status: "ending" },
// }),
// onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
// });
async function handleClickCreateSession(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (!name || !phone || !selectedServer || !selectedApp) return;
if (selectedServer?.sessions?.[0]?.status !== "started") {
// if (selectedServer?.sessions?.[0]?.status !== "started") {
createClient(undefined, {
onSuccess: (client) => {
createSession({
@@ -137,46 +137,46 @@ export default function CreateSessionModal({ targetServerId }: Props) {
});
},
});
return;
// return;
// }
// if (!isSessionExists) {
// setIsSessionExists(true);
// return;
// }
// endSession(undefined, {
// onError: (error) => {
// console.log("Ошибка при завершении сессии:", error);
// },
// });
}
if (!isSessionExists) {
setIsSessionExists(true);
return;
}
endSession(undefined, {
onError: (error) => {
console.log("Ошибка при завершении сессии:", error);
},
});
}
useEffect(() => {
if (
selectedServer &&
servers?.find((server) => server.id === selectedServer?.id)?.sessions?.[0]
?.status === "ended" &&
selectedApp &&
isSessionExists
)
createClient(undefined, {
onSuccess: (client) => {
createSession({
clientId: client.id,
serverId: selectedServer?.id,
appId: selectedApp.id,
});
},
});
}, [
selectedApp,
servers,
createClient,
createSession,
isSessionExists,
selectedServer,
]);
// useEffect(() => {
// if (
// selectedServer &&
// servers?.find((server) => server.id === selectedServer?.id)?.sessions?.[0]
// ?.status === "ended" &&
// selectedApp
// // && isSessionExists
// )
// createClient(undefined, {
// onSuccess: (client) => {
// createSession({
// clientId: client.id,
// serverId: selectedServer?.id,
// appId: selectedApp.id,
// });
// },
// });
// }, [
// selectedApp,
// servers,
// createClient,
// createSession,
// // isSessionExists,
// selectedServer,
// ]);
const ref = useRef<HTMLFormElement>(null);
@@ -257,8 +257,8 @@ export default function CreateSessionModal({ targetServerId }: Props) {
/>
)}
</div>
{isSessionExists && (
<div className="absolute inset-0 top-[11.806vw] bg-[#FFFFFF] flex flex-col gap-[1.111vw] items-center justify-center h-[31.458vw]">
{/* {isSessionExists && ( */}
{/* <div className="absolute inset-0 top-[11.806vw] bg-[#FFFFFF] flex flex-col gap-[1.111vw] items-center justify-center h-[31.458vw]">
<img
src="/images/ghost.png"
alt="ghost error"
@@ -271,8 +271,8 @@ export default function CreateSessionModal({ targetServerId }: Props) {
При запуске нового текущий будет завершен.`}
</p>
</div>
</div>
)}
</div> */}
{/* )} */}
<div className="flex-1 flex flex-col justify-end">
<Button
type="submit"