feat: add ghost image and enhance CreateSessionModal with session existence check and improved server handling

src/components/modals/CreateSessionModal.tsx

@@ -10,27 +10,34 @@ import NewInput from "../NewInput.tsx";
 import StartSessionIcon from "../icons/StartSessionIcon.tsx";
 import NewButton from "../NewButton.tsx";
 import ProjectSelector from "../ProjectSelector.tsx";
-import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+
 interface Props {
-  servers: IServer[] | undefined;
-  targetServer: IServer | null;
+  targetServerId: string | null;
 }
 
-export default function CreateSessionModal({
-  servers,
-  targetServer = null,
-}: Props) {
+export default function CreateSessionModal({ targetServerId }: Props) {
   const { setModal } = useModalStore();
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
+  const [isSessionExists, setIsSessionExists] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: servers } = useQuery({
+    queryKey: ["servers"],
+    queryFn: () => api.get("servers?withLastSession=true").json<IServer[]>(),
+  });
+
+  const targetServer = targetServerId
+    ? servers?.find((server) => server.id === targetServerId) || null
+    : null;
+
   const [selectedServer, setSelectedServer] = useState<IServer | null>(
     targetServer
   );
   const [selectedApp, setSelectedApp] = useState<IApp | null>(null);
 
-  const queryClient = useQueryClient();
-
   const { mutate: createClient } = useMutation({
     mutationFn: () => {
       return api
@@ -65,26 +72,61 @@ export default function CreateSessionModal({
     },
   });
 
+  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"] }),
+  });
+
   async function handleClickCreateSession(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
 
     if (!name || !phone || !selectedServer || !selectedApp) return;
 
-    createClient(undefined, {
-      onSuccess: (client) => {
-        createSession(client.id);
-      },
-      onError: (error) => {
-        console.log(error);
-      },
-    });
+    if (
+      selectedServer?.sessions?.[0]?.status === "started" &&
+      !isSessionExists
+    ) {
+      setIsSessionExists(true);
+      return;
+    }
+
+    if (isSessionExists) {
+      endSession(undefined, {
+        onSuccess: () => {
+          createClient(undefined, {
+            onSuccess: (client) => {
+              createSession(client.id);
+            },
+            onError: (error) => {
+              console.log(error);
+            },
+          });
+        },
+        onError: (error) => {
+          console.log("Ошибка при завершении сессии:", error);
+        },
+      });
+    } else {
+      createClient(undefined, {
+        onSuccess: (client) => {
+          createSession(client.id);
+        },
+        onError: (error) => {
+          console.log(error);
+        },
+      });
+    }
   }
 
   const ref = useRef<HTMLFormElement>(null);
 
   return (
     <form
-      className="rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden"
+      className="relative rounded-[2.222vw] w-[25vw] min-h-[calc(100dvh-2.222vw)] bg-[#F0F0F0] flex flex-col overflow-hidden"
       onSubmit={handleClickCreateSession}
       ref={ref}
     >
@@ -131,6 +173,22 @@ export default function CreateSessionModal({
             />
           )}
         </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]">
+            <img
+              src="/images/ghost.png"
+              alt="ghost error"
+              className="w-[13.889vw] h-[11.806vw]"
+            />
+            <div className="flex flex-col gap-[0.556vw] items-center">
+              <h3 className="title-m font-medium">Есть текущий сеанс</h3>
+              <p className="caption-s text-[#BDBDBD] text-center whitespace-pre-line">
+                {`На выбранном столе есть текущий сеанс. 
+              При запуске нового текущий будет завершен.`}
+              </p>
+            </div>
+          </div>
+        )}
         <NewButton
           type="submit"
           disabled={