close ticket

src/pages/ticket/Detail.tsx

@@ -1,12 +1,11 @@
 import { type FC, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import Input from "@/components/Input";
-import { Paths } from "@/config/Paths";
 import { clx } from "@/helpers/utils";
 import { t } from "@/locale";
 import { getTicketDisplayName } from "./types/TicketTypes";
 import type { TicketDetailType } from "./types/TicketTypes";
-import { useCreateOrReplyTicket, useGetTicketById } from "./hooks/useTicketData";
+import { useCloseTicket, useCreateOrReplyTicket, useGetTicketById } from "./hooks/useTicketData";
 import { buildThreadItems, getStatusClass } from "./detailUtils";
 import MessageBubble from "./MessageBubble";
 import ReplyForm from "./ReplyForm";
@@ -16,13 +15,13 @@ import TicketDetailActions from "./TicketDetailActions";
 const STATUS_CLOSED = "closed";
 
 const TicketDetail: FC = () => {
-    const navigate = useNavigate();
     const { id } = useParams<{ id: string }>();
     const [content, setContent] = useState("");
     const [files, setFiles] = useState<File[]>([]);
 
     const getTicket = useGetTicketById(id ?? "");
     const addMessage = useCreateOrReplyTicket();
+    const closeTicket = useCloseTicket();
 
     const ticket = getTicket.data?.data;
     const threadItems = useMemo(
@@ -33,7 +32,15 @@ const TicketDetail: FC = () => {
         ticket?.status?.toLowerCase() === STATUS_CLOSED ||
         ticket?.status?.toUpperCase() === "CLOSED";
 
-    const handleCloseTicket = () => navigate(Paths.tickets.list);
+    const handleCloseTicket = () => {
+        if (!id) return;
+        closeTicket.mutate(
+            { id, params: { status: "closed" } },
+            {
+                onSuccess: () => getTicket.refetch(),
+            }
+        );
+    };
 
     const handleSendReply = () => {
         if (!id || !ticket || !content.trim()) return;
@@ -146,6 +153,7 @@ const TicketDetail: FC = () => {
                         <TicketDetailActions
                             onScrollToReply={handleScrollToReply}
                             onCloseTicket={handleCloseTicket}
+                            isClosing={closeTicket.isPending}
                         />
                     )}
                     <TicketInfoSidebar ticket={ticket} />