apiとstockpageを編集しました

frontend/src/pages/StockPage.tsx

@@ -38,7 +38,7 @@ const StockPage: React.FC = () => {
     }, []);
 
     /**
-     * APIからタスク一覧を取得する関数
+     * APIから在庫一覧を取得する関数
      * 取得したタスクをstate(tasks)に設定
      */
     const fetchStocks = async () => {
@@ -51,6 +51,19 @@ const StockPage: React.FC = () => {
         }
     };
 
+    /**
+       * 在庫を削除するハンドラー
+       * 指定されたIDのタスクをAPIを通じて削除
+       */
+    const handleDeleteStock = async (stockId: number) => {
+        try {
+            await stockApi.deleteStock(stockId);
+            fetchStocks(); // 削除後の買うもの一覧を再取得
+        } catch (error) {
+            console.error(`${STOCK_ERRORS.DELETE_FAILED}:`, error);
+        }
+    };
+
     /**
      * 文字列(ISO 8601形式)をyyyy/MM/ddに変換する関数
      */
@@ -160,6 +173,32 @@ const StockPage: React.FC = () => {
                         )}
                     </DialogContent>
                 </Dialog>
+
+                {/* タスク削除ダイアログ */}
+                <Dialog open={isDeleteOpen}
+                    onClose={handleCloseDelete}
+                    fullWidth
+                    maxWidth="sm"
+                    sx={{ overflow: "hidden" }}
+                >
+                    <DialogTitle>食材の削除</DialogTitle>
+                    <DialogContent>
+                        {selectedRow && (
+                            <>
+                                <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
+                                <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                                <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                                {/* <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button> */}
+                                <Button variant="contained" color="error" onClick={() => {
+                                    handleDeleteStock(selectedRow.stockId);
+                                }}
+                                    style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+                            </>
+                        )}
+                    </DialogContent>
+                </Dialog>
+
+
             </>
         );
     };
@@ -178,20 +217,7 @@ const StockPage: React.FC = () => {
 
             {/* タスク削除ボタン */}
             <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
-            <Dialog open={isDeleteOpen}
-                onClose={handleCloseDelete}
-                fullWidth
-                maxWidth="sm"
-                sx={{ overflow: "hidden" }}
-            >
-                <DialogTitle>食材の削除</DialogTitle>
-                <DialogContent>
-                    <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
-                    <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                    <Button onClick={() => setIsDeleteOpen(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                    <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
-                </DialogContent>
-            </Dialog>
+
 
             {/* 在庫一覧リスト */}
             {/* 乳製品 */}

frontend/src/services/api.ts

@@ -245,8 +245,79 @@ export const stockApi = {
     return response.json();
 
   },
+
+  /** 
+   * 在庫リストの編集 
+   */
+  updateStock: async (req: {stockId: number, amount: number, price: number, lastUpdate: string, buyDate: string, expDate: string}): Promise<{ result: boolean; message: string }> => {
+
+    
+
+    const response = await fetch(`${API_BASE_URL}/api/stocks/update`, {
+      method: 'PUT',
+      headers: getHeaders(),
+      body: JSON.stringify(req),
+    });
+
+    if (!response.ok) {
+      throw new Error(STOCK_ERRORS.UPDATE_FAILED);
     }
 
+    return response.json()
+
+    // return {
+    //   "result": true
+    // }
+  },
+
+  /**
+   * 在庫リストの削除
+   * @param id 削除対象の食材のID
+   */
+  deleteStock: async (stockId: number): Promise<{ result: boolean; message: string }> => {
+    const response = await fetch(`${API_BASE_URL}/api/stocks/delete`, {
+      method: 'DELETE',
+      headers: getHeaders(),
+      body: JSON.stringify({ stockId }),
+    });
+
+    console.log("API レスポンスステータス:", response.status);
+    console.log("API レスポンス本文:", await response.text());
+
+    if (!response.ok) {
+      throw new Error(STOCK_ERRORS.DELETE_FAILED);
+    }
+
+    return response.json()
+
+    // return {
+    //   "result": true
+    // }
+  },
+
+}
+
+const deleteStock = async (stockId: number): Promise<{ result: boolean; message: string }> => {
+  console.log("API の deleteStock メソッドが呼ばれました。stockId:", stockId);
+
+  const response = await fetch(`${API_BASE_URL}/api/stocks/delete`, {
+    method: "DELETE",
+    headers: getHeaders(),
+    body: JSON.stringify({ stockId }),
+  });
+
+  console.log("API レスポンスステータス:", response.status);
+  console.log("API レスポンス本文:", await response.text());
+
+  if (!response.ok) {
+    return { result: false, message: "削除に失敗しました。" };
+  }
+
+  // API のレスポンスから result と message を取得
+  const data = await response.json();
+  return { result: data.result, message: data.message };
+};
+
 
 function makeDateObject(dateStr: String) {
   // 例: '2025/06/15' または '2025-06-15' を '2025-06-15' に変換