diff --git a/src/components/CurrentSessionCard.tsx b/src/components/CurrentSessionCard.tsx index b0c8929..f4016f7 100644 --- a/src/components/CurrentSessionCard.tsx +++ b/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 ( endSession()} - disabled={isPending} + onClick={() => setModal()} > Завершить сеанс diff --git a/src/components/modals/CurrentSessionModal.tsx b/src/components/modals/CurrentSessionModal.tsx index d85a5d8..894584b 100644 --- a/src/components/modals/CurrentSessionModal.tsx +++ b/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(); }} > Завершить сеанс diff --git a/src/components/modals/EndSessionModal.tsx b/src/components/modals/EndSessionModal.tsx new file mode 100644 index 0000000..ab23c4c --- /dev/null +++ b/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 ( +
+ {isPending ? ( +
+
+

Завершаем сеанс

+

+ Сохраняем данные, чтобы ничего не потерять +

+
+ + + +
+ ) : ( + <> +

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

+
+
+

+ Точно хотите завершить сеанс? +

+

+ Текущий сеанс будет завершен немедленно +

+
+
+ endSession()} + disabled={isPending} + > + Завершить сеанс + + + setModal() + } + > + Отменить + +
+
+ + )} +
+ ); +} + +export default EndSessionModal;