買うものリストの削除確認ダイアログの作成

frontend/src/pages/TaskListPage.tsx

@@ -67,16 +67,26 @@ const TaskListPage: React.FC = () => {
   //数量変更ダイアログの表示状態
   const [openAmountDialog, setOpenAmountDialog] = useState(false);
 
+  //削除確認ダイアログの表示状態
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
   const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
 
   const [selectedEditingTask, setSelectedEditingTask] = useState<ToBuy>({
-  tobuyId: 0,
+    tobuyId: 0,
-  stuffId: 0,
+    stuffId: 0,
-  stuffName: "",
+    stuffName: "",
-  amount: 0,
+    amount: 0,
-  shop: undefined,
+    shop: undefined,
-});
+  });
-
+
+  const [selectedDeleteTask, setSelectedDeleteTask] = useState<ToBuy>({
+    tobuyId: 0,
+    stuffId: 0,
+    stuffName: "",
+    amount: 0,
+    shop: undefined,
+  });
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
 
@@ -194,7 +204,7 @@ const TaskListPage: React.FC = () => {
    * 入力されたタスク情報をAPIに送信して変更
    * 作成後はダイアログを閉じ、入力内容をリセット
    */
-   const handleUpdateTask = async () => {
+  const handleUpdateTask = async () => {
     try {
       if (isNaN(selectedEditingTask.amount)) {
         console.log('数量が正しくありません．');
@@ -211,19 +221,19 @@ const TaskListPage: React.FC = () => {
     }
   };
 
-//   /**
+  //   /**
-//    * クリックされたタスクの情報を取得するための関数
+  //    * クリックされたタスクの情報を取得するための関数
-//    * @param tobuyId 
+  //    * @param tobuyId 
-//    * @returns tobuyIdが一致するtoBuy
+  //    * @returns tobuyIdが一致するtoBuy
-//    */
+  //    */
-//   const getToBuyDetails = (tobuyId: number): ToBuy => {
+  //   const getToBuyDetails = (tobuyId: number): ToBuy => {
-//     console.log(tobuyId)
+  //     console.log(tobuyId)
-//     const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
+  //     const result = tobuys.find((toBuy) => toBuy.tobuyId === tobuyId);
-//     if(result === undefined){
+  //     if(result === undefined){
-//       throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
+  //       throw new Error(`tobuyId: ${tobuyId} に対応するデータが見つかりません`);
-//     }
+  //     }
-//   return result;
+  //   return result;
-// };
+  // };
 
 
   return (
@@ -256,7 +266,7 @@ const TaskListPage: React.FC = () => {
               <ListItemText
                 primary={tobuy.stuffName}
               />
-                {/* 買い物リスト：食材情報記入ボタン */}
+              {/* 買い物リスト：食材情報記入ボタン */}
               <ListItemSecondaryAction>
                 <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
                   {`× ${tobuy.amount}`}
@@ -311,7 +321,11 @@ const TaskListPage: React.FC = () => {
                     edge="end"
                     sx={{ marginRight: 0, marginLeft: 0 }}
                     aria-label="delete"
-                    onClick={() => handleDeleteTask(tobuy.tobuyId)}
+                    onClick={() => {//handleDeleteTask(tobuy.tobuyId)
+                      setSelectedDeleteTask(tobuy)
+                      setOpenDeleteDialog(true)
+                    }
+                  }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -507,7 +521,7 @@ const TaskListPage: React.FC = () => {
         </Box>
         <DialogContent>
           <Box sx={{ pt: 1 }}>
-       
+
             {/* 材料名表示 */}
             <TextField
               autoFocus
@@ -545,6 +559,29 @@ const TaskListPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* 削除ダイアログ */}
+      <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true}
+        fullWidth
+        maxWidth="sm"
+        sx={{ overflow: "hidden" }}
+      >
+        <DialogTitle>食材の削除</DialogTitle>
+        <DialogContent>
+          {selectedDeleteTask && (
+            <>
+              <Typography variant="h4">{selectedDeleteTask.stuffName}を削除します。</Typography>
+              <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+              <Button onClick={() =>  setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+              <Button variant="contained" color="error" onClick={() => {
+                handleDeleteTask(selectedDeleteTask.tobuyId);
+                setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
+              }}
+                style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
     </Container>
 
   );