diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index 705cbed..122521b 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -1,5 +1,4 @@ -import { useMutation, useQueryClient } from "@tanstack/react-query"; -import api from "../utils/api"; +import { useQueryClient } from "@tanstack/react-query"; import { IServer } from "../types/IServer"; import useModalStore from "../stores/useModalStore"; import CreateSessionModal from "./modals/CreateSessionModal"; @@ -33,22 +32,13 @@ export default function DesktopCard({ server }: IDesktopCardProps) { // onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }), // }); - const { mutate: endSession } = useMutation({ - mutationKey: ["sessions", server.sessions?.[0]?.id], - mutationFn: () => - api.put(`sessions/${server.sessions?.[0]?.id}`, { - json: { status: "ending" }, - }), - onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }), - }); - async function handleClickCreateSession() { setPosition("right"); setModal(); } return ( -
+
setModal()} > - +
-
-
-

+

+
+

{server.name}

-

{server.location}

+

{server.location}

-
+
{server.sessions?.[0]?.status === "started" ? ( -
+
{ setModal(); }} - className='flex gap-[0.556vw] items-center' + className="flex gap-[0.556vw] items-center" > - + -

Идёт сеанс

- +

Идёт сеанс

+
) : server.status === "offline" ? ( - - + + Проверьте соединение ) : ( -
- +
+ -

Создать сеанс

+

Создать сеанс

)} diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index c72a859..babf83e 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -10,7 +10,7 @@ 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"; interface Props { servers: IServer[] | undefined; targetServer: IServer | null; @@ -28,89 +28,99 @@ export default function CreateSessionModal({ targetServer ); const [selectedApp, setSelectedApp] = useState(null); + const queryClient = useQueryClient(); - async function createClient() { - return await api - .post("clients", { - json: { - name, - phone, - email, - }, - }) - .json(); - } + const { mutate: createClient } = useMutation({ + mutationFn: () => { + return api + .post("clients", { + json: { + name, + phone, + email, + }, + }) + .json(); + }, + }); - async function createSession(clientId: string) { - return await api - .post("sessions", { - json: { - clientId, - serverId: selectedServer?.id, - appId: selectedApp?.id, - }, - }) - .json(); - } + const { mutate: createSession } = useMutation({ + mutationFn: (clientId: string) => { + return api + .post("sessions", { + json: { + clientId, + serverId: selectedServer?.id, + appId: selectedApp?.id, + }, + }) + .json(); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["sessions"] }); + queryClient.invalidateQueries({ queryKey: ["servers"] }); + setModal(null); + }, + }); async function handleClickCreateSession(e: React.FormEvent) { e.preventDefault(); if (!name || !phone || !selectedServer || !selectedApp) return; - try { - const client = await createClient(); - await createSession(client.id); - - setModal(null); - } catch (error) { - console.log(error); - } + createClient(undefined, { + onSuccess: (client) => { + createSession(client.id); + }, + onError: (error) => { + console.log(error); + }, + }); } const ref = useRef(null); return (
-
-

Новый сеанс

+
+

Новый сеанс

-
-
+
+
-
-

Укажите данные клиента

-
+
+

Укажите данные клиента

+
setPhone(e.target.value)} - placeholder='Номер телефона' + placeholder="Номер телефона" required /> setName(e.target.value)} - placeholder='Имя' + placeholder="Имя" required /> setEmail(e.target.value)} - placeholder='Электронная почта' + placeholder="Электронная почта" />
-
-

Выберите параметры сеанса

+
+

Выберите параметры сеанса

{selectedServer?.apps?.length && selectedServer?.apps?.length > 0 && ( -
-
+
+
diff --git a/src/components/modals/CurrentSessionModal.tsx b/src/components/modals/CurrentSessionModal.tsx index 32caa14..b114a4c 100644 --- a/src/components/modals/CurrentSessionModal.tsx +++ b/src/components/modals/CurrentSessionModal.tsx @@ -2,55 +2,109 @@ import { IServer } from "../../types/IServer"; import FlashIcon from "../icons/FlashIcon"; import NewButton from "../NewButton"; import ChevronRightIcon from "../icons/ChevronRightIcon"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import api from "../../utils/api"; +import useModalStore from "../../stores/useModalStore"; +import { ISession } from "../../types/ISession"; function CurrentSessionModal({ server }: { server: IServer }) { - console.log(server.client?.name); + const queryClient = useQueryClient(); + const { setModal } = useModalStore(); + + const { mutate: endSession } = useMutation({ + mutationKey: ["sessions", server.sessions?.[0]?.id], + mutationFn: () => + api.put(`sessions/${server.sessions?.[0]?.id}`, { + json: { status: "ending" }, + }), + onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }), + }); + + const { data: currentServer } = useQuery({ + queryKey: ["sessions", server.sessions?.[0]?.id], + queryFn: () => + api.get(`sessions/${server.sessions?.[0]?.id}`).json(), + }); + + console.log(currentServer); + return ( -
-

+
+

Текущий сеанс

-
-
+
+
-
-
-

{server.name}

-

+

+
+

{server.name}

+

Сеанс идёт 24:05

-

+

{server.location}

-
-

Параметры сеанса

+
+

Параметры сеанса

- -
-

Клиент

-

{server.client?.name}

+ +
+

Клиент

+

{server.client?.name}

-
+
{!server.client?.email && ( -

+

Добавьте email

)} - +
-
-

Детали

+
+

Детали

+
+
+

Менеджер:

+

{server.owner?.fullname}

+
+
+

+ Сценарии проживания: +

+

Добавить в бэкенд

+
+
+
+
+ { + endSession(); + setModal(null); + }} + > + Завершить сеанс + + setModal(null)} + > + Закрыть +
diff --git a/src/components/modals/EditTableModal.tsx b/src/components/modals/EditTableModal.tsx index 1df8ba0..675434e 100644 --- a/src/components/modals/EditTableModal.tsx +++ b/src/components/modals/EditTableModal.tsx @@ -27,6 +27,7 @@ function EditTable({ table }: { table: IServer }) { setModal(null); }, }); + return (

Редатирование стола

diff --git a/src/types/IServer.ts b/src/types/IServer.ts index 647d9af..f9f6bd4 100644 --- a/src/types/IServer.ts +++ b/src/types/IServer.ts @@ -1,5 +1,6 @@ import { IApp } from "./IApp"; import { IClient } from "./IClient"; +import { IOwner } from "./IOwner"; import { ISession } from "./ISession"; export interface IServer { @@ -12,4 +13,5 @@ export interface IServer { apps?: IApp[]; status: "online" | "offline"; client?: IClient; + owner?: IOwner; }