Function defaultHtmlContent

pages/contacts.ts:82–126

({ addressBookId, userContacts, userAddressBooks, page, contactsCount, baseUrl, search }: {
  addressBookId: string;
  userContacts: Contact[];
  userAddressBooks: AddressBook[];
  page: number;
  contactsCount: number;
  baseUrl: string;
  search?: string;
})

}

function defaultHtmlContent({ addressBookId, userContacts, userAddressBooks, page, contactsCount, baseUrl, search }: {
  addressBookId: string;
  userContacts: Contact[];
  userAddressBooks: AddressBook[];
  page: number;
  contactsCount: number;
  baseUrl: string;
  search?: string;
}) {
  return html`
    <main id="main">
      <section id="contacts">
        ${Loading()}
      </section>
    </main>

    <script type="module">
    import { h, render, Fragment } from 'preact';

    // Imported files need some preact globals to work
    window.h = h;
    window.Fragment = Fragment;

    import Contacts from '/public/components/contacts/Contacts.js';

    const contactsElement = document.getElementById('contacts');

    if (contactsElement) {
      const contactsApp = h(Contacts, {
        initialAddressBookId: ${JSON.stringify(addressBookId || [])},
        initialContacts: ${JSON.stringify(userContacts || [])},
        initialAddressBooks: ${JSON.stringify(userAddressBooks || [])},
        baseUrl: ${JSON.stringify(baseUrl)},
        page: ${JSON.stringify(page || 1)},
        contactsCount: ${JSON.stringify(contactsCount || 0)},
        search: ${JSON.stringify(search || '')},
      });

      render(contactsApp, contactsElement);

      document.getElementById('loading')?.remove();
    }
    </script>
  `;
}

export default page({
  get,