added ability to delete reports

public/locales/en/translation.json

@@ -350,6 +350,11 @@
             }
         },
         "report": {
+            "mutations": {
+                "success": {
+                    "reportDeleted": "Report has been deleted!"
+                }
+            },
             "emailMeta": {
                 "flow": "{{from}} -> {{to}}",
                 "emptySubject": "<No Subject>"

src/apis/delete-report.ts

@@ -0,0 +1,10 @@
+import {SimpleDetailResponse} from "~/server-types"
+import {client} from "~/constants/axios-client"
+
+export default async function deleteReport(id: string): Promise<SimpleDetailResponse> {
+	const {data} = await client.delete(`${import.meta.env.VITE_SERVER_BASE_URL}/report/${id}`, {
+		withCredentials: true,
+	})
+
+	return data
+}

src/apis/index.ts

@@ -34,3 +34,5 @@ export * from "./get-alias"
 export {default as getAlias} from "./get-alias"
 export * from "./update-alias"
 export {default as updateAlias} from "./update-alias"
+export * from "./delete-report"
+export {default as deleteReport} from "./delete-report"

src/route-widgets/ReportDetailRoute/DeleteButton.tsx

@@ -1,17 +1,23 @@
 import {ReactElement, useState} from "react"
+import {useNavigate} from "react-router-dom"
+import {useTranslation} from "react-i18next"
+import {MdDelete} from "react-icons/md"
+import {TiCancel} from "react-icons/ti"
+import {AxiosError} from "axios"
+
 import {
-	Alert,
 	Button,
 	Dialog,
 	DialogActions,
 	DialogContent,
 	DialogContentText,
 	DialogTitle,
-	Typography,
 } from "@mui/material"
-import {useTranslation} from "react-i18next"
-import {MdDelete} from "react-icons/md"
-import {TiCancel} from "react-icons/ti"
+import {useMutation} from "@tanstack/react-query"
+
+import {deleteReport} from "~/apis"
+import {useErrorSuccessSnacks} from "~/hooks"
+import {SimpleDetailResponse} from "~/server-types"
 
 export interface DeleteButtonProps {
 	id: string
@@ -19,6 +25,16 @@ export interface DeleteButtonProps {
 
 export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement {
 	const {t} = useTranslation()
+	const {showError, showSuccess} = useErrorSuccessSnacks()
+	const navigate = useNavigate()
+
+	const {mutate} = useMutation<SimpleDetailResponse, AxiosError, void>(() => deleteReport(id), {
+		onError: showError,
+		onSuccess: () => {
+			showSuccess(t("relations.report.mutations.success.reportDeleted"))
+			navigate("/reports")
+		},
+	})
 
 	const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
 
@@ -47,7 +63,12 @@ export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement
 					<Button startIcon={<TiCancel />} onClick={() => setShowDeleteDialog(false)}>
 						{t("general.cancelLabel")}
 					</Button>
-					<Button startIcon={<MdDelete />} color="error">
+					<Button
+						variant="contained"
+						startIcon={<MdDelete />}
+						color="error"
+						onClick={() => mutate()}
+					>
 						{t("routes.ReportDetailRoute.actions.delete.continueAction")}
 					</Button>
 				</DialogActions>

src/routes/ReportDetailRoute.tsx

@@ -4,14 +4,12 @@ import {useTranslation} from "react-i18next"
 import React, {ReactElement} from "react"
 
 import {useQuery} from "@tanstack/react-query"
-import {Button, List} from "@mui/material"
+import {List} from "@mui/material"
 
 import {DecryptedReportContent, Report} from "~/server-types"
 import {getReport} from "~/apis"
 import {DecryptReport, SimpleOverlayInformation, SimplePageBuilder} from "~/components"
 import {WithEncryptionRequired} from "~/hocs"
-import {BsTrash} from "react-icons/bs"
-import {MdDelete} from "react-icons/md"
 import DeleteButton from "~/route-widgets/ReportDetailRoute/DeleteButton"
 import ProxiedImagesListItem from "~/route-widgets/ReportDetailRoute/ProxiedImagesListItem"
 import QueryResult from "~/components/QueryResult"