From d7139397307c0703833228338777b6c9e6e6c301 Mon Sep 17 00:00:00 2001 From: Ken Yasue Date: Tue, 25 Mar 2025 07:02:21 +0100 Subject: [PATCH] detail fixes --- .../components/ContactRecordList.tsx | 60 +++++++++++++++++-- .../components/NewContactRecordForm.tsx | 23 +++---- .../admin/customers/detail/[id]/page.tsx | 10 +--- 3 files changed, 71 insertions(+), 22 deletions(-) diff --git a/src/app/(admin)/admin/customers/components/ContactRecordList.tsx b/src/app/(admin)/admin/customers/components/ContactRecordList.tsx index bc38894..4e9364d 100644 --- a/src/app/(admin)/admin/customers/components/ContactRecordList.tsx +++ b/src/app/(admin)/admin/customers/components/ContactRecordList.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import Link from 'next/link'; @@ -14,14 +14,55 @@ interface ContactRecord { } interface ContactRecordListProps { - contactRecords: ContactRecord[]; + customerId: string; } -export default function ContactRecordList({ contactRecords }: ContactRecordListProps) { +export default function ContactRecordList({ customerId }: ContactRecordListProps) { const router = useRouter(); + const [contactRecords, setContactRecords] = useState([]); + const [isLoading, setIsLoading] = useState(true); const [isDeleting, setIsDeleting] = useState(null); const [error, setError] = useState(null); + // Function to fetch contact records + const fetchContactRecords = async () => { + setIsLoading(true); + try { + const response = await fetch(`/api/contact-records?customerId=${customerId}`); + + if (!response.ok) { + throw new Error('Failed to fetch contact records'); + } + + const data = await response.json(); + setContactRecords(data); + } catch (err) { + setError(err instanceof Error ? err.message : 'An error occurred while fetching contact records'); + } finally { + setIsLoading(false); + } + }; + + // Fetch records on initial load and when customerId changes + useEffect(() => { + fetchContactRecords(); + }, [customerId]); + + // Refresh data when router.refresh() is called + useEffect(() => { + // Create a callback function that will be called when the component is re-rendered + const refreshData = () => { + fetchContactRecords(); + }; + + // Add an event listener for a custom event that will be dispatched when router.refresh() is called + window.addEventListener('contact-records-refresh', refreshData); + + return () => { + window.removeEventListener('contact-records-refresh', refreshData); + }; + }, []); + const handleDelete = async (id: string) => { if (!confirm('Are you sure you want to delete this contact record?')) { return; @@ -40,7 +81,10 @@ export default function ContactRecordList({ contactRecords }: ContactRecordListP throw new Error(data.error || 'Failed to delete contact record'); } - // Refresh the page to show updated contact record list + // Refresh the contact records list + fetchContactRecords(); + + // Refresh the page router.refresh(); } catch (err) { setError(err instanceof Error ? err.message : 'An error occurred'); @@ -49,6 +93,14 @@ export default function ContactRecordList({ contactRecords }: ContactRecordListP } }; + if (isLoading) { + return ( +
+ Loading contact records... +
+ ); + } + if (contactRecords.length === 0) { return (
diff --git a/src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx b/src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx index 4344775..433051a 100644 --- a/src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx +++ b/src/app/(admin)/admin/customers/components/NewContactRecordForm.tsx @@ -61,6 +61,9 @@ export default function NewContactRecordForm({ customerId }: NewContactRecordFor }); setSuccess(true); + // Dispatch a custom event to notify the ContactRecordList component to refresh + window.dispatchEvent(new Event('contact-records-refresh')); + // Refresh the page to show the new contact record router.refresh(); } catch (err) { @@ -73,30 +76,30 @@ export default function NewContactRecordForm({ customerId }: NewContactRecordFor return (
{error && ( -
+
- +
-

{error}

+

{error}

)} {success && ( -
+
- +
-

Contact record created successfully!

+

Contact record created successfully!

@@ -104,7 +107,7 @@ export default function NewContactRecordForm({ customerId }: NewContactRecordFor
-
diff --git a/src/app/(admin)/admin/customers/detail/[id]/page.tsx b/src/app/(admin)/admin/customers/detail/[id]/page.tsx index a89c442..fb015c4 100644 --- a/src/app/(admin)/admin/customers/detail/[id]/page.tsx +++ b/src/app/(admin)/admin/customers/detail/[id]/page.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { getDataSource, Customer, ContactRecord } from '@/lib/database'; +import { getDataSource, Customer } from '@/lib/database'; import ContactRecordList from '../../components/ContactRecordList'; import NewContactRecordForm from '../../components/NewContactRecordForm'; @@ -9,7 +9,6 @@ export default async function CustomerDetail({ params }: { params: { id: string // Fetch customer data const dataSource = await getDataSource(); const customerRepository = dataSource.getRepository(Customer); - const contactRecordRepository = dataSource.getRepository(ContactRecord); const customer = await customerRepository.findOne({ where: { id } @@ -30,11 +29,6 @@ export default async function CustomerDetail({ params }: { params: { id: string ); } - // Fetch contact records for this customer - const contactRecords = await contactRecordRepository.find({ - where: { customerId: id }, - order: { createdAt: 'DESC' } - }); return (
@@ -130,7 +124,7 @@ export default async function CustomerDetail({ params }: { params: { id: string {/* Contact Records List */}
- +