Function ViewContact

components/contacts/ViewContact.tsx:80–212

(
  { initialContact, formData: formDataObject, error, notice, addressBookId }: ViewContactProps,
)

}

export default function ViewContact(
  { initialContact, formData: formDataObject, error, notice, addressBookId }: ViewContactProps,
) {
  const isDeleting = useSignal<boolean>(false);
  const contact = useSignal<Contact>(initialContact);

  const formData = convertObjectToFormData(formDataObject);

  async function onClickDeleteContact() {
    if (confirm('Are you sure you want to delete this contact?')) {
      if (isDeleting.value) {
        return;
      }

      isDeleting.value = true;

      try {
        const requestBody: DeleteRequestBody = { contactId: contact.value.uid!, addressBookId };
        const response = await fetch(`/api/contacts/delete`, {
          method: 'POST',
          body: JSON.stringify(requestBody),
        });

        if (!response.ok) {
          throw new Error(`Failed to delete contact. ${response.statusText} ${await response.text()}`);
        }

        const result = await response.json() as DeleteResponseBody;

        if (!result.success) {
          throw new Error('Failed to delete contact!');
        }

        window.location.href = '/contacts';
      } catch (error) {
        console.error(error);
      }

      isDeleting.value = false;
    }
  }

  return (
    <>
      <section class='flex flex-row items-center justify-between mb-4'>
        <a href='/contacts' class='mr-2'>View contacts</a>
        <section class='flex items-center'>
          <button
            class='inline-block justify-center gap-x-1.5 rounded-md bg-red-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 ml-2'
            type='button'
            title='Delete contact'
            onClick={() => onClickDeleteContact()}
          >
            <img
              src='/public/images/delete.svg'
              alt='Delete contact'
              class={`white ${isDeleting.value ? 'animate-spin' : ''}`}
              width={20}