upd

src/components/CurrentSessionCard.tsx

@@ -5,6 +5,8 @@ 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";
 
 function CurrentSessionCard({
   session,
@@ -13,9 +15,11 @@ function CurrentSessionCard({
   session: ISession;
   index: number;
 }) {
+  const { setModal } = useModalStore();
+
   const queryClient = useQueryClient();
 
-  const { mutate: endSession } = useMutation({
+  const { mutate: endSession, isPending } = useMutation({
     mutationKey: ["sessions", session.id],
     mutationFn: () =>
       api.put(`sessions/${session.id}`, { json: { status: "ending" } }),
@@ -36,7 +40,14 @@ function CurrentSessionCard({
       transition={{ bounce: 0, delay: index * 0.1 }}
       className="p-[1.389vw] rounded-[1.667vw] bg-white w-[18.889vw] flex flex-col gap-[0.833vw] shadow-[0px_4px_40px_0_rgba(0,0,0,0.05),0px_2px_2px_0_rgba(0,0,0,0.05)]"
     >
-      <div className="flex justify-between gap-[0.833vw] items-center">
+      <div
+        className="flex justify-between gap-[0.833vw] items-center cursor-pointer"
+        onClick={() => {
+          if (session.status === "started") {
+            setModal(<CurrentSessionModal session={session} />);
+          }
+        }}
+      >
         <span className="size-[1.111vw] text-[#7B60F3]">
           <FlashIcon />
         </span>
@@ -58,7 +69,11 @@ function CurrentSessionCard({
           <ChevronRightIcon />
         </span>
       </div>
-      <NewButton variant="critical" onClick={() => endSession()}>
+      <NewButton
+        variant="critical"
+        onClick={() => endSession()}
+        disabled={isPending}
+      >
         Завершить сеанс
       </NewButton>
     </motion.div>