From 37b7f39eb5c104e4c7fcb9a3b9068379b363dc64 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Wed, 2 Nov 2022 16:05:28 +0100
Subject: [PATCH] added ability to delete reports

---
 public/locales/en/translation.json            |  5 +++
 src/apis/delete-report.ts                     | 10 ++++++
 src/apis/index.ts                             |  2 ++
 .../ReportDetailRoute/DeleteButton.tsx        | 33 +++++++++++++++----
 src/routes/ReportDetailRoute.tsx              |  4 +--
 5 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 src/apis/delete-report.ts

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 72ad84b..d5487d3 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -350,6 +350,11 @@
             }
         },
         "report": {
+            "mutations": {
+                "success": {
+                    "reportDeleted": "Report has been deleted!"
+                }
+            },
             "emailMeta": {
                 "flow": "{{from}} -> {{to}}",
                 "emptySubject": "<No Subject>"
diff --git a/src/apis/delete-report.ts b/src/apis/delete-report.ts
new file mode 100644
index 0000000..540a29f
--- /dev/null
+++ b/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
+}
diff --git a/src/apis/index.ts b/src/apis/index.ts
index b698575..c6681b4 100644
--- a/src/apis/index.ts
+++ b/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"
diff --git a/src/route-widgets/ReportDetailRoute/DeleteButton.tsx b/src/route-widgets/ReportDetailRoute/DeleteButton.tsx
index adc62b9..0cf44a2 100644
--- a/src/route-widgets/ReportDetailRoute/DeleteButton.tsx
+++ b/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>
diff --git a/src/routes/ReportDetailRoute.tsx b/src/routes/ReportDetailRoute.tsx
index 6af39f2..35e887d 100644
--- a/src/routes/ReportDetailRoute.tsx
+++ b/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"