diff --git a/public/images/ghost.png b/public/images/ghost.png new file mode 100644 index 0000000..12bc1bb Binary files /dev/null and b/public/images/ghost.png differ diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index 122521b..88af1b6 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -1,4 +1,3 @@ -import { useQueryClient } from "@tanstack/react-query"; import { IServer } from "../types/IServer"; import useModalStore from "../stores/useModalStore"; import CreateSessionModal from "./modals/CreateSessionModal"; @@ -17,8 +16,6 @@ interface IDesktopCardProps { export default function DesktopCard({ server }: IDesktopCardProps) { const { setModal, setPosition } = useModalStore(); - const queryClient = useQueryClient(); - const servers = queryClient.getQueryData(["servers"]); // const { mutate: createSession } = useMutation({ // mutationFn: () => @@ -34,7 +31,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) { async function handleClickCreateSession() { setPosition("right"); - setModal(); + setModal(); } return ( diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index ac9d415..4071078 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -5,6 +5,10 @@ import api from "../utils/api"; import CurrentSessionCard from "./CurrentSessionCard"; import { ISession } from "../types/ISession"; import { AnimatePresence } from "motion/react"; +import NewButton from "./NewButton"; +import PlusIcon from "./icons/PlusIcon"; +import useModalStore from "../stores/useModalStore"; +import CreateSessionModal from "./modals/CreateSessionModal"; function Layout() { const { data: currentStartedSessions } = useQuery({ @@ -18,6 +22,8 @@ function Layout() { refetchInterval: 1000, }); + const { setModal, setPosition } = useModalStore(); + return (
@@ -35,6 +41,19 @@ function Layout() { /> ))} + { + setPosition("right"); + setModal(); + }} + > + + + + Создать сеанс +
); diff --git a/src/components/TableSelector.tsx b/src/components/TableSelector.tsx index 40c138b..b23bcf3 100644 --- a/src/components/TableSelector.tsx +++ b/src/components/TableSelector.tsx @@ -13,7 +13,6 @@ function TableSelector({ selectedTable, onSelect, }: TableSelectorProps) { - console.log(tables); return (
{tables.map((table) => ( diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index a6634db..17c9b23 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/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(), + }); + + const targetServer = targetServerId + ? servers?.find((server) => server.id === targetServerId) || null + : null; + const [selectedServer, setSelectedServer] = useState( targetServer ); const [selectedApp, setSelectedApp] = useState(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) { 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(null); return (
@@ -131,6 +173,22 @@ export default function CreateSessionModal({ /> )}
+ {isSessionExists && ( +
+ ghost error +
+

Есть текущий сеанс

+

+ {`На выбранном столе есть текущий сеанс. + При запуске нового текущий будет завершен.`} +

+
+
+ )}