import PouchDb from "pouchdb";
import { Component, createEffect, For } from "solid-js";
import { createServerAction$ } from "solid-start/server";

interface Props {}

const Invitations: Component<Props> = (props) => {
  const [invitations, getInvitations] = createServerAction$(
    async (values: any) => {
      const db = new PouchDb(".db");
      const results = await db.allDocs({
        include_docs: true,
        startkey: "invitation/",
        endkey: "invitation/\ufff0",
      });
      console.log({ caller: "Invitations / serverAction", results });
      return results.rows;
    }
  );

  getInvitations();

  createEffect(() => {
    console.log({
      caller: "Invitations",
      routeData: invitations.result,
    });
  });

  return (
    <ul>
      <For each={invitations.result}>
        {(invitation: any) => {
          console.log({
            caller: "Invitations / loop",
            invitations: invitation,
          });
          return <li>{invitation.id}</li>;
        }}
      </For>
    </ul>
  );
};

export default Invitations;