購入処理のUI実装

frontend/src/pages/TaskListPage.tsx

@@ -33,14 +33,14 @@ import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
   SoupKitchen as SoupKitchenIcon
 } from '@mui/icons-material';
-import { Task, ToBuy, Stuff } from '../types/types';
-import { TASK_ERRORS } from '../constants/errorMessages';
+import { ToBuy, Stuff, Stock } from '../types/types';
+import { TOBUY_ERRORS } from '../constants/errorMessages';
 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留
 
 
 
 // 新規タスクの初期状態
-const EMPTY_TASK: Omit<ToBuy, 'tobuyId' | 'stuffId'> & { stuffId: number | null, category: string } & { newAddition: boolean } = {
+const EMPTY_TOBUY: Omit<ToBuy, 'tobuyId' | 'stuffId'> & { stuffId: number | null, category: string } & { newAddition: boolean } = {
   stuffId: null,
   stuffName: '',
   amount: 0,
@@ -49,6 +49,12 @@ const EMPTY_TASK: Omit<ToBuy, 'tobuyId' | 'stuffId'> & { stuffId: number | null,
   newAddition: false,
 }
 
+const EMPTY_STOCK = {
+  price: 0,
+  buyDate: '',
+  expDate: '',
+}
+
 const TaskListPage: React.FC = () => {
   // タスク一覧の状態管理
   const [tobuys, setToBuys] = useState<ToBuy[]>([]);
@@ -60,10 +66,12 @@ const TaskListPage: React.FC = () => {
   
   const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
 
-  const [newToBuy, setNewToBuy] = useState(EMPTY_TASK);
+  const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
 
   const [stuffs, setStuffs] = useState<Stuff[]>([]);
 
+  const [newStock, setNewStock] = useState(EMPTY_STOCK);
+
 
   // コンポーネントマウント時にタスク一覧を取得
   useEffect(() => {
@@ -79,7 +87,7 @@ const TaskListPage: React.FC = () => {
       const tobuys = await toBuyApi.getToBuys();
       setToBuys(tobuys);
     } catch (error) {
-      console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
+      console.error(`${TOBUY_ERRORS.FETCH_FAILED}:`, error);
     }
   };
 
@@ -112,9 +120,22 @@ const TaskListPage: React.FC = () => {
   const handleDeleteTask = async (toBuyId: number) => {
     try {
       await toBuyApi.deleteToBuy(toBuyId);
-      fetchTasks(); // 削除後のタスク一覧を再取得
+      fetchTasks(); // 削除後の買うもの一覧を再取得
+    } catch (error) {
+      console.error(`${TOBUY_ERRORS.DELETE_FAILED}:`, error);
+    }
+  };
+  
+  /**
+   * 買うものリストの在庫登録（購入処理）を行うハンドラー
+   */
+  const handleBuy = async (tobuyId: number) => {
+    try {
+      const today = new Date().toISOString().substring(0, 10);
+      await toBuyApi.buy({tobuyId, ...newStock, lastUpdate: today});
+      fetchTasks(); // 削除後の買うもの一覧を再取得
     } catch (error) {
-      console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error);
+      console.error(`${TOBUY_ERRORS.BUY_FAILED}:`, error);
     }
   };
 
@@ -131,10 +152,10 @@ const TaskListPage: React.FC = () => {
       console.log(newToBuy)
       await toBuyApi.addToBuy(newToBuy);
       setOpenDialog(false); // ダイアログを閉じる
-      setNewToBuy(EMPTY_TASK); // 入力内容をリセット
+      setNewToBuy(EMPTY_TOBUY); // 入力内容をリセット
       fetchTasks(); // 作成後のタスク一覧を再取得
     } catch (error) {
-      console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error);
+      console.error(`${TOBUY_ERRORS.CREATE_FAILED}:`, error);
     }
   };
 
@@ -333,6 +354,8 @@ const TaskListPage: React.FC = () => {
               margin="dense"
               label="価格"
               fullWidth
+              value={newStock.price}
+              onChange={(e) => setNewStock({...newStock, price: parseInt(e.target.value)})}
             />
             {/* 消費・賞味期限入力フィールド */}
             <TextField
@@ -340,6 +363,8 @@ const TaskListPage: React.FC = () => {
               label="消費・賞味期限(yyyy/MM/dd)"
               fullWidth
               multiline
+              value={newStock.expDate}
+              onChange={(e) => setNewStock({...newStock, expDate: e.target.value})}
             />
             {/* 購入日入力フィールド */}
             <TextField
@@ -347,6 +372,8 @@ const TaskListPage: React.FC = () => {
               label="購入日(yyyy/MM/dd)"
               fullWidth
               multiline
+              value={newStock.buyDate}
+              onChange={(e) => setNewStock({...newStock, buyDate: e.target.value})}
             />
           </Box>
         </DialogContent>
@@ -354,9 +381,9 @@ const TaskListPage: React.FC = () => {
           <Button onClick={() => setOpenInfoDialog(false)}>キャンセル</Button>
           <Button onClick={() => {
             if (selectedTask) {
-              handleDeleteTask(selectedTask)
+              handleBuy(selectedTask)
               setOpenInfoDialog(false)
-              setNewToBuy(EMPTY_TASK); // 入力内容をリセット
+              setNewToBuy(EMPTY_TOBUY); // 入力内容をリセット
             }
           }}
             variant="contained">