購入報告ページのDetailEditModalのデータ取得方法を修正

view/next-project/src/components/purchasereports/DetailEditModal.tsx

@@ -1,8 +1,7 @@
 import router from 'next/router';
-import { useEffect, useState } from 'react';
-import { Expense, PurchaseOrder, PurchaseReport } from '@/type/common';
+import { useState } from 'react';
+import { Expense, PurchaseOrder, PurchaseReportView } from '@/type/common';
 import { put } from '@/utils/api/purchaseOrder';
-import { get } from '@api/api_methods';
 import {
   CloseButton,
   Input,
@@ -14,38 +13,13 @@ import {
 
 export const DetailEditModal: React.FC<{
   purchaseReportId: number;
+  purchaseReportViewItem: PurchaseReportView;
+  expenses: Expense[];
   isOpen: boolean;
   setIsOpen: () => void;
   onOpenInitial: () => void;
-}> = ({ purchaseReportId, setIsOpen, onOpenInitial }) => {
-  const [expenses, setExpenses] = useState<Expense[]>([]);
-  const [purchaseOrder, setPurchaseOrder] = useState<PurchaseOrder>({
-    id: 0,
-    deadline: '',
-    userID: 0,
-    expenseID: 0,
-    financeCheck: false,
-  });
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const purchaseReportRes: PurchaseReport = await get(
-          `${process.env.CSR_API_URI}/purchasereports/${purchaseReportId}`,
-        );
-        const purchaseOrderId = purchaseReportRes.purchaseOrderID;
-        const expensesRes: Expense[] = await get(`${process.env.CSR_API_URI}/expenses`);
-        const purchaseOrderRes: PurchaseOrder = await get(
-          `${process.env.CSR_API_URI}/purchaseorders/${purchaseOrderId}`,
-        );
-        setExpenses(expensesRes);
-        setPurchaseOrder(purchaseOrderRes);
-      } catch (error) {
-        console.error('Failed to fetch data:', error);
-      }
-    };
-    fetchData();
-  }, [purchaseReportId]);
+}> = ({ purchaseReportViewItem, expenses, setIsOpen, onOpenInitial }) => {
+  const [formData, setFormData] = useState<PurchaseOrder>(purchaseReportViewItem.purchaseOrder);
 
   const formatDate = (date: string) => {
     const d = new Date(date);
@@ -57,15 +31,15 @@ export const DetailEditModal: React.FC<{
 
   const submit = async () => {
     try {
-      const updatePurchaseOrderUrl = `${process.env.CSR_API_URI}/purchaseorders/${purchaseOrder.id}`;
-      await put(updatePurchaseOrderUrl, purchaseOrder);
+      const updatePurchaseOrderUrl = `${process.env.CSR_API_URI}/purchaseorders/${formData.id}`;
+      await put(updatePurchaseOrderUrl, formData);
     } finally {
       router.reload();
     }
   };
 
   const handleInputChange = (key: keyof PurchaseOrder, value: string | number) => {
-    setPurchaseOrder((prev) => ({ ...prev, [key]: value }));
+    setFormData((prev) => ({ ...prev, [key]: value }));
   };
 
   return (
@@ -80,7 +54,7 @@ export const DetailEditModal: React.FC<{
         <p className='text-lg text-black-600'>購入した局</p>
         <div className='col-span-3 w-full'>
           <Select
-            value={purchaseOrder.expenseID}
+            value={formData.expenseID}
             onChange={(e) => handleInputChange('expenseID', Number(e.target.value))}
           >
             {expenses.map((data) => (
@@ -95,7 +69,7 @@ export const DetailEditModal: React.FC<{
         <div className='col-span-3 w-full'>
           <Input
             type='date'
-            value={purchaseOrder.deadline ? formatDate(purchaseOrder.deadline) : ''}
+            value={formData.deadline ? formatDate(formData.deadline) : ''}
             onChange={(e) => handleInputChange('deadline', e.target.value)}
             className='w-full'
           />

view/next-project/src/components/purchasereports/OpenEditModalButton.tsx

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import { DetailEditModal } from './DetailEditModal';
+import { Expense, PurchaseReportView } from '@/type/common';
 import { CloseButton, EditButton, Modal, PrimaryButton } from '@components/common';
 import EditModal from '@components/purchasereports/EditModal';
 
 interface Props {
   children?: React.ReactNode;
+  purchaseReportViewItem: PurchaseReportView;
+  expenses: Expense[];
   id: number;
   isDisabled: boolean;
 }
@@ -47,6 +50,8 @@ const OpenEditModalButton: React.FC<Props> = (props) => {
       {step === 'editDetails' && (
         <DetailEditModal
           purchaseReportId={props.id}
+          expenses={props.expenses}
+          purchaseReportViewItem={props.purchaseReportViewItem}
           isOpen={true}
           setIsOpen={closeModal}
           onOpenInitial={onOpenInitial}

view/next-project/src/pages/purchasereports/index.tsx

@@ -397,6 +397,8 @@ export default function PurchaseReports(props: Props) {
                                 ? purchaseReportViewItem.purchaseReport.id
                                 : 0
                             }
+                            purchaseReportViewItem={purchaseReportViewItem}
+                            expenses={props.expenses}
                             isDisabled={isDisabled(purchaseReportViewItem)}
                           />
                         </div>