Function defaultHtmlContent

pages/expenses.ts:61–99

({ userBudgets, userExpenses, initialMonth, currency }: {
  userBudgets: Budget[];
  userExpenses: Expense[];
  initialMonth: string;
  currency: SupportedCurrencySymbol;
})

}

function defaultHtmlContent({ userBudgets, userExpenses, initialMonth, currency }: {
  userBudgets: Budget[];
  userExpenses: Expense[];
  initialMonth: string;
  currency: SupportedCurrencySymbol;
}) {
  return html`
    <main id="main">
      <section id="main-expenses">
        ${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 MainExpenses from '/public/components/expenses/MainExpenses.js';

    const mainExpensesElement = document.getElementById('main-expenses');

    if (mainExpensesElement) {
      const mainExpensesApp = h(MainExpenses, {
        initialBudgets: ${JSON.stringify(userBudgets || [])},
        initialExpenses: ${JSON.stringify(userExpenses || [])},
        initialMonth: ${JSON.stringify(initialMonth)},
        currency: ${JSON.stringify(currency)},
      });

      render(mainExpensesApp, mainExpensesElement);

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

export default page({
  get,