feat: implement EndSessionModal for session termination and update CurrentSessionModal to utilize it

src/components/CurrentSessionCard.tsx

@@ -1,12 +1,11 @@
 import FlashIcon from "./icons/FlashIcon";
 import { ISession } from "../types/ISession";
 import NewButton from "./NewButton";
-import api from "../utils/api";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
 import { motion } from "motion/react";
 import CurrentSessionModal from "./modals/CurrentSessionModal";
 import useModalStore from "../stores/useModalStore";
+import EndSessionModal from "./modals/EndSessionModal";
 
 function CurrentSessionCard({
   session,
@@ -17,21 +16,21 @@ function CurrentSessionCard({
 }) {
   const { setModal } = useModalStore();
 
-  const queryClient = useQueryClient();
+  // const queryClient = useQueryClient();
 
-  const { mutate: endSession, isPending } = useMutation({
-    mutationKey: ["sessions", session.id],
-    mutationFn: () =>
-      api.put(`sessions/${session.id}`, { json: { status: "ending" } }),
-    onMutate: () => {
-      queryClient.invalidateQueries({ queryKey: ["sessions"] });
-      queryClient.invalidateQueries({ queryKey: ["last-started"] });
-      queryClient.invalidateQueries({ queryKey: ["servers"] });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
-    },
-  });
+  // const { mutate: endSession, isPending } = useMutation({
+  //   mutationKey: ["sessions", session.id],
+  //   mutationFn: () =>
+  //     api.put(`sessions/${session.id}`, { json: { status: "ending" } }),
+  //   onMutate: () => {
+  //     queryClient.invalidateQueries({ queryKey: ["sessions"] });
+  //     queryClient.invalidateQueries({ queryKey: ["last-started"] });
+  //     queryClient.invalidateQueries({ queryKey: ["servers"] });
+  //   },
+  //   onSuccess: () => {
+  //     queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
+  //   },
+  // });
 
   return (
     <motion.div
@@ -74,8 +73,7 @@ function CurrentSessionCard({
       </div>
       <NewButton
         variant="critical"
-        onClick={() => endSession()}
-        disabled={isPending}
+        onClick={() => setModal(<EndSessionModal session={session} />)}
       >
         Завершить сеанс
       </NewButton>

src/components/modals/CurrentSessionModal.tsx

@@ -2,32 +2,31 @@ import { intervalToDuration } from "date-fns";
 import FlashIcon from "../icons/FlashIcon";
 import NewButton from "../NewButton";
 import ChevronRightIcon from "../icons/ChevronRightIcon";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import api from "../../utils/api";
 import useModalStore from "../../stores/useModalStore";
 import { ISession } from "../../types/ISession";
 import { useEffect, useState } from "react";
+import EndSessionModal from "./EndSessionModal";
 
 function CurrentSessionModal({ session }: { session: ISession }) {
-  const queryClient = useQueryClient();
+  // const queryClient = useQueryClient();
   const { setModal } = useModalStore();
 
-  const { mutate: endSession } = useMutation({
-    mutationKey: ["sessions", session.id],
-    mutationFn: () =>
-      api.put(`sessions/${session.id}`, {
-        json: { status: "ending" },
-      }),
-    onMutate: () =>
-      queryClient.invalidateQueries({
-        queryKey: ["sessions"],
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["last-sessions"],
-      });
-    },
-  });
+  // const { mutate: endSession } = useMutation({
+  //   mutationKey: ["sessions", session.id],
+  //   mutationFn: () =>
+  //     api.put(`sessions/${session.id}`, {
+  //       json: { status: "ending" },
+  //     }),
+  //   onMutate: () =>
+  //     queryClient.invalidateQueries({
+  //       queryKey: ["sessions"],
+  //     }),
+  //   onSuccess: () => {
+  //     queryClient.invalidateQueries({
+  //       queryKey: ["last-sessions"],
+  //     });
+  //   },
+  // });
   const [now, setNow] = useState(Date.now());
 
   useEffect(() => {
@@ -122,8 +121,7 @@ function CurrentSessionModal({ session }: { session: ISession }) {
             variant="critical"
             className="w-full"
             onClick={() => {
-              endSession();
-              setModal(null);
+              setModal(<EndSessionModal session={session} />);
             }}
           >
             Завершить сеанс

src/components/modals/EndSessionModal.tsx

@@ -0,0 +1,85 @@
+import { useMutation } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import useModalStore from "../../stores/useModalStore";
+import { ISession } from "../../types/ISession";
+import NewButton from "../NewButton";
+import CurrentSessionModal from "./CurrentSessionModal";
+import api from "../../utils/api";
+import SpinIcon from "../icons/SpinIcon";
+
+function EndSessionModal({ session }: { session: ISession }) {
+  const queryClient = useQueryClient();
+  const { setModal } = useModalStore();
+
+  const { mutate: endSession, isPending } = useMutation({
+    mutationKey: ["sessions", session.id],
+    mutationFn: () =>
+      api.put(`sessions/${session.id}`, { json: { status: "ending" } }),
+    onMutate: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions"] });
+      queryClient.invalidateQueries({ queryKey: ["last-started"] });
+      queryClient.invalidateQueries({ queryKey: ["servers"] });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["last-sessions"] });
+      setModal(null);
+    },
+  });
+
+  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">
+                Точно хотите завершить сеанс?
+              </p>
+              <p className="caption-m font-medium text-[#BDBDBD]">
+                Текущий сеанс будет завершен немедленно
+              </p>
+            </div>
+            <div className="flex flex-col gap-[0.556vw]">
+              <NewButton
+                size="large"
+                variant="critical"
+                className="w-full"
+                onClick={() => endSession()}
+                disabled={isPending}
+              >
+                Завершить сеанс
+              </NewButton>
+              <NewButton
+                size="large"
+                variant="primary"
+                className="w-full"
+                onClick={() =>
+                  setModal(<CurrentSessionModal session={session} />)
+                }
+              >
+                Отменить
+              </NewButton>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default EndSessionModal;