From 7a36cf0274070377fb582905ea9759acb27e944a Mon Sep 17 00:00:00 2001
From: Oliver Levay <oliver.levay@hotmail.com>
Date: Thu, 31 Aug 2023 10:08:07 +0200
Subject: [PATCH] :safety_vest: Add confirm dialogs at important buttons

---
 frontend/components/Chest/ChestItem.tsx          | 15 ++++++++++++---
 .../components/Webshop/ManageInventoryItem.tsx   | 14 ++++++++++----
 frontend/components/Webshop/ManageProduct.tsx    | 16 +++++++++++-----
 frontend/public/locales/en/common.json           |  3 +++
 frontend/public/locales/sv/common.json           |  3 +++
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Chest/ChestItem.tsx b/frontend/components/Chest/ChestItem.tsx
index 9deccdcf1..255d5719c 100644
--- a/frontend/components/Chest/ChestItem.tsx
+++ b/frontend/components/Chest/ChestItem.tsx
@@ -6,7 +6,9 @@ import {
   Button,
 } from '@mui/material';
 import { DateTime } from 'luxon';
+import { useTranslation } from 'next-i18next';
 import { MyChestQuery, useConsumeItemMutation } from '~/generated/graphql';
+import { useDialog } from '~/providers/DialogProvider';
 
 export default function ChestItem({ item }: {
   item: MyChestQuery['chest']['items'][number]
@@ -15,6 +17,8 @@ export default function ChestItem({ item }: {
   const [consumeItemMutation] = useConsumeItemMutation({
     variables: { itemId: item.id },
   });
+  const { confirm } = useDialog();
+  const { t } = useTranslation();
   return (
     <Paper key={item.id} sx={{ marginBottom: '1rem', width: 'fit-content' }}>
       <Stack direction="row" alignItems="center" spacing={2} padding={2} sx={{ width: 'fit-content' }}>
@@ -26,16 +30,21 @@ export default function ChestItem({ item }: {
         {!consumed && (
         <Button
           onClick={() => {
-            consumeItemMutation();
+            confirm(`${t('confirmConsume')} ${item.name}?`, (confirmed) => {
+              if (confirmed) {
+                consumeItemMutation();
+              }
+            });
           }}
           variant="contained"
         >
-          Förbruka
+          {t('consume')}
         </Button>
         )}
         {consumed && (
         <Typography>
-          Förbrukad:
+          {t('consumed')}
+          :
           {' '}
           {DateTime.fromISO(item.consumedAt).toLocaleString(DateTime.DATETIME_MED)}
         </Typography>
diff --git a/frontend/components/Webshop/ManageInventoryItem.tsx b/frontend/components/Webshop/ManageInventoryItem.tsx
index 898c1e57a..a87c7ae2f 100644
--- a/frontend/components/Webshop/ManageInventoryItem.tsx
+++ b/frontend/components/Webshop/ManageInventoryItem.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import handleApolloError from '~/functions/handleApolloError';
 import { ProductQuery, useDeleteInventoryMutation, useUpdateInventoryMutation } from '~/generated/graphql';
+import { useDialog } from '~/providers/DialogProvider';
 import { useSnackbar } from '~/providers/SnackbarProvider';
 
 export default function ManageInventoryItem({
@@ -15,6 +16,7 @@ export default function ManageInventoryItem({
   const [variant, setVariant] = useState(inventoryItem.variant);
   const [quantity, setQuantity] = useState(inventoryItem.quantity.toString());
   const { t } = useTranslation();
+  const { confirm } = useDialog();
   const { showMessage } = useSnackbar();
   const [updateInventory] = useUpdateInventoryMutation({
     onCompleted: () => {
@@ -78,10 +80,14 @@ export default function ManageInventoryItem({
           color="error"
           disabled={Number.isNaN(Number(quantity))}
           onClick={() => {
-            deleteInventory({
-              variables: {
-                inventoryId: inventoryItem.id,
-              },
+            confirm('Are you sure you want to delete this inventory?', (confirmed) => {
+              if (confirmed) {
+                deleteInventory({
+                  variables: {
+                    inventoryId: inventoryItem.id,
+                  },
+                });
+              }
             });
           }}
           variant="contained"
diff --git a/frontend/components/Webshop/ManageProduct.tsx b/frontend/components/Webshop/ManageProduct.tsx
index 7aee99c1b..1a8991a54 100644
--- a/frontend/components/Webshop/ManageProduct.tsx
+++ b/frontend/components/Webshop/ManageProduct.tsx
@@ -9,6 +9,7 @@ import {
   useDeleteProductMutation,
   useProductQuery,
 } from '~/generated/graphql';
+import { useDialog } from '~/providers/DialogProvider';
 import { useSnackbar } from '~/providers/SnackbarProvider';
 
 export default function ManageProduct({
@@ -24,6 +25,7 @@ export default function ManageProduct({
       id,
     },
   });
+  const { confirm } = useDialog();
   const [deleteProduct] = useDeleteProductMutation({
     onCompleted: () => {
       showMessage('Product inventory deleted', 'success');
@@ -92,12 +94,16 @@ export default function ManageProduct({
             }}
             variant="contained"
             onClick={() => {
-              deleteProduct({
-                variables: {
-                  productId: id,
-                },
+              confirm(`${t('confirmRemoval')} ${product.name}`, (confirmed) => {
+                if (confirmed) {
+                  deleteProduct({
+                    variables: {
+                      productId: id,
+                    },
+                  });
+                  router.push('/webshop');
+                }
               });
-              router.push('/webshop');
             }}
           >
             Delete
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 11a37b599..701327804 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -57,6 +57,9 @@
   "subscribe": "Subscribe",
   "error": "Something went wrong with your previous action",
   "confirmRemoval": "Are you certain that you want to remove",
+  "confirmConsume": "Are you certain that you want to consume",
+  "consume": "Consume",
+  "consumed": "Consumed",
   "typeInConfirm": "Type in \"$NAME\" to confirm this dangerous action.",
   "to": "to",
   "doors": "Doors",
diff --git a/frontend/public/locales/sv/common.json b/frontend/public/locales/sv/common.json
index 12a732078..c76326ff7 100644
--- a/frontend/public/locales/sv/common.json
+++ b/frontend/public/locales/sv/common.json
@@ -57,6 +57,9 @@
   "subscribe": "Prenumerera",
   "error": "Något gick fel med din tidigare handling",
   "confirmRemoval": "Är du säker på att du vill ta bort",
+  "confirmConsume": "Är du säker på att du vill förbruka",
+  "consume": "Förbruka",
+  "consumed": "Förbrukad",
   "typeInConfirm": "Skriv in \"$NAME\" för att bekräfta den här farliga handlingen.",
   "doors": "Dörrar",
   "to": "till",