From c9812d1159d4277f02be77484021185091b23c07 Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Fri, 2 May 2025 18:05:15 +0900
Subject: [PATCH] feat: implement survey basic information update function

---
 src/app/api/survey-sales/[id]/route.ts        |  24 ++--
 .../survey-sale/detail/BasicForm.tsx          | 106 +++++++++++++++---
 src/components/survey-sale/list/ListTable.tsx |   4 +
 src/hooks/useSurvey.ts                        |   2 +
 src/types/Survey.ts                           |   1 -
 5 files changed, 110 insertions(+), 27 deletions(-)

diff --git a/src/app/api/survey-sales/[id]/route.ts b/src/app/api/survey-sales/[id]/route.ts
index 6010be1..288a8b6 100644
--- a/src/app/api/survey-sales/[id]/route.ts
+++ b/src/app/api/survey-sales/[id]/route.ts
@@ -31,17 +31,19 @@ export async function GET(request: Request, context: { params: { id: string } })
 export async function PUT(request: Request, context: { params: { id: string } }) {
   const { id } = await context.params
   const body = await request.json()
-  // @ts-ignore
-  const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
-    where: { id: Number(id) },
-    data: {
-      ...body,
-      detail_info: {
-        update: body.detail_info,
+  try {
+    // @ts-ignore
+    const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
+      where: { id: Number(id) },
+      data: {
+        ...body,
       },
-    },
-  })
-  return NextResponse.json(survey)
+    })
+    return NextResponse.json(survey)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
 }
 
 export async function DELETE(request: Request, context: { params: { id: string } }) {
@@ -72,7 +74,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
     return NextResponse.json({ message: 'Survey deleted successfully' })
   } catch (error) {
     console.error(error)
-    return NextResponse.json({ message: 'Survey deletion failed' }, { status: 500 })
+    throw error
   }
 }
 
diff --git a/src/components/survey-sale/detail/BasicForm.tsx b/src/components/survey-sale/detail/BasicForm.tsx
index 744ee47..2f74673 100644
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useServey } from '@/hooks/useSurvey'
 import { SurveyBasicRequest } from '@/types/Survey'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useState, useEffect } from 'react'
 
 const defaultBasicInfoForm: SurveyBasicRequest = {
   representative: '',
@@ -19,34 +20,72 @@ const defaultBasicInfoForm: SurveyBasicRequest = {
 }
 
 export default function BasicForm() {
+  const searchParams = useSearchParams()
+  const id = searchParams.get('id')
+
+  const { surveyDetail, createSurvey, isCreatingSurvey, updateSurvey, isUpdatingSurvey } = useServey(Number(id))
+
   const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
 
+  useEffect(() => {
+    if (surveyDetail) {
+      const { id, updated_at, created_at, detail_info, ...rest } = surveyDetail
+      setBasicInfoData(rest)
+    }
+  }, [surveyDetail])
+
   const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
     setBasicInfoData({ ...basicInfoData, [key]: value })
   }
 
   const router = useRouter()
   const handleSave = () => {
-    console.log('save')
+    if (id) {
+      console.log('basicInfoData:: ', basicInfoData)
+      updateSurvey(basicInfoData)
+    } else {
+      createSurvey(basicInfoData)
+    }
+    router.push('/survey-sale')
   }
-  const handleDelete = () => {
-    console.log('delete')
+
+  if (isCreatingSurvey || isUpdatingSurvey) {
+    return <div>Loading...</div>
   }
+
   return (
     <>
       <div className="sale-frame">
         <div className="data-form-wrap">
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">担当者名</div>
-            <input type="text" className="input-frame" id='representative' value={basicInfoData.representative} onChange={(e) => handleChange('representative', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="representative"
+              value={basicInfoData.representative}
+              onChange={(e) => handleChange('representative', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" id='store' value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="store"
+              value={basicInfoData.store ?? ''}
+              onChange={(e) => handleChange('store', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" id='construction_point' value={basicInfoData.construction_point ?? ''} onChange={(e) => handleChange('construction_point', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="construction_point"
+              value={basicInfoData.construction_point ?? ''}
+              onChange={(e) => handleChange('construction_point', e.target.value)}
+            />
           </div>
         </div>
       </div>
@@ -55,29 +94,60 @@ export default function BasicForm() {
         <div className="data-form-wrap">
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">現地調査日</div>
+            {/* TODO: 달력 라이브러리 추가 ?? */}
             <div className="date-input">
               <button className="date-btn">
                 <i className="date-icon"></i>
               </button>
-              <input type="date" className="date-frame" id='investigation_date' value={basicInfoData.investigation_date ?? ''} onChange={(e) => handleChange('investigation_date', e.target.value)} />
+              <input
+                type="date"
+                className="date-frame"
+                id="investigation_date"
+                value={basicInfoData.investigation_date ?? ''}
+                onChange={(e) => handleChange('investigation_date', e.target.value)}
+              />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" id='building_name' value={basicInfoData.building_name ?? ''} onChange={(e) => handleChange('building_name', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="building_name"
+              value={basicInfoData.building_name ?? ''}
+              onChange={(e) => handleChange('building_name', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" id='customer_name' value={basicInfoData.customer_name ?? ''} onChange={(e) => handleChange('customer_name', e.target.value)} />
+            <input
+              type="text"
+              className="input-frame"
+              id="customer_name"
+              value={basicInfoData.customer_name ?? ''}
+              onChange={(e) => handleChange('customer_name', e.target.value)}
+            />
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">建物の住所</div>
             <div className="form-flex">
               <div className="form-bx">
-                <input type="text" className="input-frame" defaultValue={'1050013'} disabled />
+                <input
+                  type="text"
+                  className="input-frame"
+                  id="post_code"
+                  value={basicInfoData.post_code ?? ''}
+                  onChange={(e) => handleChange('post_code', e.target.value)}
+                />
               </div>
               <div className="form-bx">
-                <select className="select-form" name="" id="">
+                <select
+                  className="select-form"
+                  name="address"
+                  id="address"
+                  value={basicInfoData.address ?? ''}
+                  onChange={(e) => handleChange('address', e.target.value)}
+                >
                   <option value="">東京都</option>
                   <option value="">東京都</option>
                   <option value="">東京都</option>
@@ -94,7 +164,13 @@ export default function BasicForm() {
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-            <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
+            <input
+              type="text"
+              className="input-frame"
+              id="address_detail"
+              value={basicInfoData.address_detail ?? ''}
+              onChange={(e) => handleChange('address_detail', e.target.value)}
+            />
           </div>
         </div>
         <div className="btn-flex-wrap">
@@ -104,7 +180,7 @@ export default function BasicForm() {
             </button>
           </div>
           <div className="btn-bx">
-            <button className="btn-frame red icon" onClick={handleDelete}>
+            <button className="btn-frame red icon">
               保存<i className="btn-arr"></i>
             </button>
           </div>
diff --git a/src/components/survey-sale/list/ListTable.tsx b/src/components/survey-sale/list/ListTable.tsx
index fcf7769..a9cfd34 100644
--- a/src/components/survey-sale/list/ListTable.tsx
+++ b/src/components/survey-sale/list/ListTable.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation'
 export default function ListTable() {
   const router = useRouter()
   const { surveyList, isLoadingSurveyList } = useServey()
+
   const [hasMore, setHasMore] = useState(surveyList.length > 5)
   const [visibleItems, setVisibleItems] = useState(5)
 
@@ -24,6 +25,9 @@ export default function ListTable() {
   const handleDetail = (id: number) => {
     router.push(`/survey-sale/${id}`)
   }
+  if (isLoadingSurveyList) {
+    return <div>Loading...</div>
+  }
 
   return (
     <>
diff --git a/src/hooks/useSurvey.ts b/src/hooks/useSurvey.ts
index e8cc428..1e56750 100644
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@@ -44,12 +44,14 @@ export function useServey(id?: number): {
     },
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
+      queryClient.invalidateQueries({ queryKey: ['survey', id] })
       return data
     },
   })
 
   const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
     mutationFn: async (survey: SurveyBasicRequest) => {
+      console.log('updateSurvey:: ', survey)
       if (id === undefined) throw new Error('id is required')
       const resp = await axiosInstance.put<SurveyBasicInfo>(`/api/survey-sales/${id}`, survey)
       return resp.data
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
index aa7d61e..39dcc01 100644
--- a/src/types/Survey.ts
+++ b/src/types/Survey.ts
@@ -107,5 +107,4 @@ export type SurveyDetailRequest = {
   installation_availability: number | null
   installation_availability_etc: string | null
   memo: string | null
-  basic_info_id: number
 }