🦺 Add confirm dialogs at important buttons

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>

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"

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

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",

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",