From 741d80298be09070bd9c9409e1f351bea29158f9 Mon Sep 17 00:00:00 2001
From: regularmute <93884347+Regularmute@users.noreply.github.com>
Date: Tue, 26 Mar 2024 13:06:11 +0200
Subject: [PATCH] ask for confirmation before deleting a time log

---
 frontend/src/components/TimeLogsPage/TimeLogRow.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TimeLogsPage/TimeLogRow.js b/frontend/src/components/TimeLogsPage/TimeLogRow.js
index d5361ec..7f13845 100644
--- a/frontend/src/components/TimeLogsPage/TimeLogRow.js
+++ b/frontend/src/components/TimeLogsPage/TimeLogRow.js
@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { minutesToFormattedHoursAndMinutes } from '../../utils/functions'
 import { DeleteOutlineRounded } from '@material-ui/icons'
 import { IconButton } from '@material-ui/core'
+import ConfirmationDialog from '../common/ConfirmationDialog'
 
 import './TimeLogsPage.css'
 
 export const TimeLogRow = ({ log, handleDelete }) => {
   const { hours, minutes } = minutesToFormattedHoursAndMinutes(log.minutes)
+  const [confirmOpen, setConfirmOpen] = useState(false)
 
   return (
     <div className="timelogs-table-row">
@@ -24,10 +26,18 @@ export const TimeLogRow = ({ log, handleDelete }) => {
         className="timelogs-remove-button"
         style={{ padding: '0 12px' }}
         disableRipple
-        onClick={handleDelete}
+        onClick={() => setConfirmOpen(true)}
       >
         <DeleteOutlineRounded />
       </IconButton>
+      <ConfirmationDialog
+        title="Delete Time Log?"
+        open={confirmOpen}
+        setOpen={setConfirmOpen}
+        onConfirm={handleDelete}
+      >
+        Delete this time log? It cannot be restored.
+      </ConfirmationDialog>
     </div>
   )
 }