103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||
import useModalStore from "../../stores/useModalStore";
|
||
import { Session } from "../../types/Session";
|
||
import Button from "../Button";
|
||
import CurrentSessionModal from "./CurrentSessionModal";
|
||
import api from "../../utils/api";
|
||
import SpinIcon from "../icons/SpinIcon";
|
||
import SessionModal from "./SessionModal";
|
||
|
||
function EndSessionModal({ session }: { session: Session }) {
|
||
const queryClient = useQueryClient();
|
||
|
||
const { setModal, setPosition } = useModalStore();
|
||
|
||
const {
|
||
mutate: endSession,
|
||
isPending,
|
||
isSuccess,
|
||
} = useMutation({
|
||
mutationKey: ["sessions", session.id],
|
||
mutationFn: () =>
|
||
api
|
||
.put(`sessions/${session.id}`, { json: { status: "ending" } })
|
||
.json<Session>(),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||
queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
|
||
},
|
||
});
|
||
|
||
return (
|
||
<div className="w-[25vw] bg-white rounded-[2.222vw]">
|
||
{isPending ? (
|
||
<div className="flex flex-col gap-[1.667vw] w-[25vw] justify-center items-center py-[1.806vw]">
|
||
<div className="flex flex-col gap-[0.556vw] w-full items-center">
|
||
<h2 className="title-m font-medium">Завершаем сеанс</h2>
|
||
<p className="caption-m font-medium text-[#BDBDBD]">
|
||
Сохраняем данные, чтобы ничего не потерять
|
||
</p>
|
||
</div>
|
||
<span className="size-[4.444vw] animate-spin text-[#7B60F3] flex items-center justify-center">
|
||
<SpinIcon />
|
||
</span>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<h2 className="title-s font-medium text-center py-[1.806vw]">
|
||
Текущий сеанс
|
||
</h2>
|
||
<div className="p-[1.389vw] flex flex-col gap-[1.667vw]">
|
||
<div className="flex flex-col gap-[0.556vw]">
|
||
<p className="title-m font-medium">
|
||
{isSuccess
|
||
? "Доступен отчет по встрече"
|
||
: "Точно хотите завершить сеанс?"}
|
||
</p>
|
||
<p className="caption-m font-medium text-[#BDBDBD]">
|
||
{isSuccess
|
||
? "Вы можете просмотреть отчет или создать новый сеанс, перейдя на главную страницу"
|
||
: "Текущий сеанс будет завершен немедленно"}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-[0.556vw]">
|
||
<Button
|
||
size="large"
|
||
variant={isSuccess ? "cta" : "critical"}
|
||
className="w-full"
|
||
onClick={() => {
|
||
if (isSuccess) {
|
||
setPosition("right");
|
||
setModal(<SessionModal session={session} />);
|
||
} else {
|
||
endSession();
|
||
}
|
||
}}
|
||
disabled={isPending}
|
||
>
|
||
{isSuccess ? "Перейти к отчету" : "Завершить сеанс"}
|
||
</Button>
|
||
<Button
|
||
size="large"
|
||
variant="primary"
|
||
className="w-full"
|
||
onClick={() => {
|
||
if (isSuccess) {
|
||
setModal(null);
|
||
} else {
|
||
setModal(<CurrentSessionModal session={session} />);
|
||
}
|
||
}}
|
||
>
|
||
{isSuccess ? "На главную" : "Отменить"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default EndSessionModal;
|