import { useSignal } from '@preact/signals'; import { Contact } from '/lib/types.ts'; import { baseUrl } from '/lib/utils/misc.ts'; import { CONTACTS_PER_PAGE_COUNT, formatContactToVCard, parseVCardFromTextContents } from '/lib/utils/contacts.ts'; import { RequestBody as GetRequestBody, ResponseBody as GetResponseBody } from '/routes/api/contacts/get.tsx'; import { RequestBody as AddRequestBody, ResponseBody as AddResponseBody } from '/routes/api/contacts/add.tsx'; import { RequestBody as DeleteRequestBody, ResponseBody as DeleteResponseBody } from '/routes/api/contacts/delete.tsx'; import { RequestBody as ImportRequestBody, ResponseBody as ImportResponseBody } from '/routes/api/contacts/import.tsx'; interface ContactsProps { initialContacts: Pick[]; page: number; contactsCount: number; search?: string; } export default function Contacts({ initialContacts, page, contactsCount, search }: ContactsProps) { const isAdding = useSignal(false); const isDeleting = useSignal(false); const isExporting = useSignal(false); const isImporting = useSignal(false); const contacts = useSignal[]>(initialContacts); const isOptionsDropdownOpen = useSignal(false); async function onClickAddContact() { if (isAdding.value) { return; } const firstName = (prompt(`What's the **first name** for the new contact?`) || '').trim(); if (!firstName) { alert('A first name is required for a new contact!'); return; } const lastName = (prompt(`What's the **last name** for the new contact?`) || '').trim(); isAdding.value = true; try { const requestBody: AddRequestBody = { firstName, lastName, page }; const response = await fetch(`/api/contacts/add`, { method: 'POST', body: JSON.stringify(requestBody), }); const result = await response.json() as AddResponseBody; if (!result.success) { throw new Error('Failed to add contact!'); } contacts.value = [...result.contacts]; } catch (error) { console.error(error); } isAdding.value = false; } function toggleOptionsDropdown() { isOptionsDropdownOpen.value = !isOptionsDropdownOpen.value; } async function onClickDeleteContact(contactId: string) { if (confirm('Are you sure you want to delete this contact?')) { if (isDeleting.value) { return; } isDeleting.value = true; try { const requestBody: DeleteRequestBody = { contactId, page }; const response = await fetch(`/api/contacts/delete`, { method: 'POST', body: JSON.stringify(requestBody), }); const result = await response.json() as DeleteResponseBody; if (!result.success) { throw new Error('Failed to delete contact!'); } contacts.value = [...result.contacts]; } catch (error) { console.error(error); } isDeleting.value = false; } } function onClickImportVCard() { isOptionsDropdownOpen.value = false; if (isImporting.value) { return; } const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.click(); fileInput.onchange = (event) => { const files = (event.target as HTMLInputElement)?.files!; const file = files[0]; if (!file) { return; } const reader = new FileReader(); reader.onload = async (fileRead) => { const importFileContents = fileRead.target?.result; if (!importFileContents || isImporting.value) { return; } isImporting.value = true; try { const partialContacts = parseVCardFromTextContents(importFileContents!.toString()); const requestBody: ImportRequestBody = { partialContacts, page }; const response = await fetch(`/api/contacts/import`, { method: 'POST', body: JSON.stringify(requestBody), }); const result = await response.json() as ImportResponseBody; if (!result.success) { throw new Error('Failed to import contact!'); } contacts.value = [...result.contacts]; } catch (error) { console.error(error); } isImporting.value = false; }; reader.readAsText(file, 'UTF-8'); }; } async function onClickExportVCard() { isOptionsDropdownOpen.value = false; if (isExporting.value) { return; } isExporting.value = true; const fileName = ['contacts-', new Date().toISOString().substring(0, 19).replace(/:/g, '-'), '.vcf'] .join(''); try { const requestBody: GetRequestBody = {}; const response = await fetch(`/api/contacts/get`, { method: 'POST', body: JSON.stringify(requestBody), }); const result = await response.json() as GetResponseBody; if (!result.success) { throw new Error('Failed to get contact!'); } const exportContents = formatContactToVCard([...result.contacts]); // Add content-type const vCardContent = ['data:text/vcard; charset=utf-8,', encodeURIComponent(exportContents)].join(''); // Download the file const data = vCardContent; const link = document.createElement('a'); link.setAttribute('href', data); link.setAttribute('download', fileName); link.click(); link.remove(); } catch (error) { console.error(error); } isExporting.value = false; } const pagesCount = Math.ceil(contactsCount / CONTACTS_PER_PAGE_COUNT); const pages = Array.from({ length: pagesCount }).map((_value, index) => index + 1); return ( <>
{contacts.value.map((contact) => ( ))} {contacts.value.length === 0 ? ( ) : null}
First Name Last Name
{contact.first_name} {contact.last_name}
No contacts to show
{isDeleting.value ? ( <> Deleting... ) : null} {isExporting.value ? ( <> Exporting... ) : null} {isImporting.value ? ( <> Importing... ) : null} {!isDeleting.value && !isExporting.value && !isImporting.value ? <>  : null}
{pagesCount > 0 ? (
) : null}
CardDAV URLs:{' '} {baseUrl}/dav/principals/{' '} {baseUrl}/dav/addressbooks/
); }