From a2fcff0c89963ed6a301991333c20c4e331bacb3 Mon Sep 17 00:00:00 2001
From: Thomas Churchman <thomas@kepow.org>
Date: Fri, 29 Dec 2023 15:05:02 +0100
Subject: [PATCH] Add a UI for deleting kits

---
 astroplant-frontend/src/api/index.ts          | 15 ++++
 .../kit/access/components/DeleteKit.tsx       | 72 +++++++++++++++++++
 .../src/scenes/kit/access/index.tsx           |  4 ++
 astroplant-frontend/src/translations/en.json  |  4 +-
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 astroplant-frontend/src/scenes/kit/access/components/DeleteKit.tsx

diff --git a/astroplant-frontend/src/api/index.ts b/astroplant-frontend/src/api/index.ts
index 864f877..6f31ee5 100644
--- a/astroplant-frontend/src/api/index.ts
+++ b/astroplant-frontend/src/api/index.ts
@@ -496,6 +496,21 @@ export class Api extends BaseApi {
     });
   };
 
+  /**
+   * Delete a kit.
+   * @throws {ErrorResponse}
+   */
+  deleteKit = ({
+    kitSerial,
+  }: {
+    kitSerial: string;
+  }): Observable<Response<void>> => {
+    return this.request({
+      path: `/kits/${encodeURI(kitSerial)}`,
+      method: "DELETE",
+    });
+  };
+
   /**
    * Update a peripheral.
    * @throws {ErrorResponse}
diff --git a/astroplant-frontend/src/scenes/kit/access/components/DeleteKit.tsx b/astroplant-frontend/src/scenes/kit/access/components/DeleteKit.tsx
new file mode 100644
index 0000000..2ecb75f
--- /dev/null
+++ b/astroplant-frontend/src/scenes/kit/access/components/DeleteKit.tsx
@@ -0,0 +1,72 @@
+import { useId, useMemo } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { api, Response, schemas } from "~/api";
+import ApiButton from "~/Components/ApiButton";
+import { useAppDispatch } from "~/hooks";
+import { notificationSuccess } from "~/modules/notification";
+import { addNotificationRequest } from "~/modules/notification/actions";
+import { deleteKit } from "~/modules/kit/actions";
+
+import style from "./style.module.css";
+
+const Button = ApiButton<any>();
+
+export type Props = {
+  kit: schemas["Kit"];
+};
+
+export default function DeleteKit({ kit }: Props) {
+  const { t } = useTranslation();
+  const id = useId();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+
+  const onResponse = useMemo(
+    () => (_: Response<void>) => {
+      const notification = notificationSuccess(
+        "Kit deleted",
+        "This kit was successfully deleted",
+      );
+      dispatch(addNotificationRequest(notification));
+      dispatch(deleteKit({ serial: kit.serial, kitId: kit.id }));
+      navigate("/me", { replace: true });
+    },
+    [dispatch, kit, navigate],
+  );
+
+  const send = useMemo(
+    () => () => {
+      return api.deleteKit({
+        kitSerial: kit.serial,
+      });
+    },
+    [kit],
+  );
+
+  const kitName = useMemo(() => kit.name || "Unnamed", [kit]);
+
+  return (
+    <section className={style.item}>
+      <div>
+        <div>
+          <strong>Delete</strong>
+        </div>
+        Permanently delete this kit.
+      </div>
+      <Button
+        id={id}
+        send={send}
+        onResponse={onResponse}
+        label={t("kitAccess.deleteKit")}
+        buttonProps={{ variant: "negative" }}
+        confirm={() => ({
+          content: (
+            <Trans i18nKey="kitAccess.deleteKitConfirm">{{ kitName }}</Trans>
+          ),
+        })}
+      />
+    </section>
+  );
+}
diff --git a/astroplant-frontend/src/scenes/kit/access/index.tsx b/astroplant-frontend/src/scenes/kit/access/index.tsx
index 48cbb9a..f351a8a 100644
--- a/astroplant-frontend/src/scenes/kit/access/index.tsx
+++ b/astroplant-frontend/src/scenes/kit/access/index.tsx
@@ -5,6 +5,7 @@ import commonStyle from "~/Common.module.css";
 import { KitContext } from "../contexts";
 import KitSerial from "./components/KitSerial";
 import ResetPassword from "./components/ResetPassword";
+import DeleteKit from "./components/DeleteKit";
 
 import style from "./index.module.css";
 
@@ -20,6 +21,9 @@ export default function KitConfigure() {
         <li>
           <ResetPassword kit={kit} />
         </li>
+        <li>
+          <DeleteKit kit={kit} />
+        </li>
       </ul>
     </section>
   );
diff --git a/astroplant-frontend/src/translations/en.json b/astroplant-frontend/src/translations/en.json
index 2354adb..0d2e75e 100644
--- a/astroplant-frontend/src/translations/en.json
+++ b/astroplant-frontend/src/translations/en.json
@@ -112,7 +112,9 @@
     },
     "kitAccess": {
       "resetPassword": "Reset kit password",
-      "resetPasswordConfirm": "Are you sure you wish to reset the password of kit <strong>{{kitName}}</strong>? Your kit will be unable to connect until you update the credentials on the kit."
+      "resetPasswordConfirm": "Are you sure you wish to reset the password of kit <strong>{{kitName}}</strong>? Your kit will be unable to connect until you update the credentials on the kit.",
+      "deleteKit": "Delete this Kit",
+      "deleteKitConfirm": "Are you sure you wish to delete kit <strong>{{kitName}}</strong>? This will permanently delete all data associated with the kit, including measurements and media. <strong>This cannot be undone.</strong>"
     },
     "control": {
       "header": "Control",