Database structure update

src/components/invitation/Invitation.tsx

@@ -1,29 +1,30 @@
-import { createForm } from "@felte/solid";
-import { Component, createUniqueId } from "solid-js";
-import { TextField, Button } from "@kobalte/core";
+import { createForm } from '@felte/solid';
+import { Component, createUniqueId } from 'solid-js';
+import { TextField, Button } from '@kobalte/core';
 
-import "./style.css";
-import { createServerAction$ } from "solid-start/server";
-import PouchDb from "pouchdb";
-import { v4 as uuid } from "uuid";
+import './style.css';
+import { createServerAction$ } from 'solid-start/server';
+import PouchDb from 'pouchdb';
+import { v4 as uuid } from 'uuid';
 
 interface Props {}
 
 const Invitation: Component<Props> = (props) => {
   const [saving, save] = createServerAction$(async (values: any) => {
-    const db = new PouchDb(".db");
+    const db = new PouchDb('.db');
     const id = `invitation/${uuid()}`;
     await db.put({
       _id: id,
-      type: "invitation",
-      doc: values,
+      type: 'invitation',
+      ...values,
+      date: new Date().toISOString(),
     });
     return id;
   });
 
   const submitHandler = (values: any, context: any) => {
     console.log({
-      caller: "Invitation / submitHandler",
+      caller: 'Invitation / submitHandler',
       props,
       values,
       context,
@@ -35,13 +36,25 @@ const Invitation: Component<Props> = (props) => {
 
   return (
     <form use:form>
+      <TextField.Root>
+        <TextField.Label>Mail address</TextField.Label>
+        <TextField.Input
+          type='mail'
+          name='mail'
+          required={true}
+          placeholder='Email address'
+        />
+        <TextField.ErrorMessage>
+          Please provide a valid URL
+        </TextField.ErrorMessage>
+      </TextField.Root>
       <TextField.Root>
         <TextField.Label>Database</TextField.Label>
         <TextField.Input
-          type="url"
-          name="database"
+          type='url'
+          name='database'
           required={true}
-          placeholder="Database URL"
+          placeholder='Database URL'
         />
         <TextField.ErrorMessage>
           Please provide a valid URL
@@ -50,17 +63,17 @@ const Invitation: Component<Props> = (props) => {
       <TextField.Root>
         <TextField.Label>Password</TextField.Label>
         <TextField.Input
-          type="text"
-          name="password"
+          type='text'
+          name='password'
           required={true}
-          placeholder="Password"
-          autocomplete="off"
+          placeholder='Password'
+          autocomplete='off'
         />
         <TextField.ErrorMessage>
           Please provide a valid password
         </TextField.ErrorMessage>
       </TextField.Root>
-      <Button.Root type="submit">Create</Button.Root>
+      <Button.Root type='submit'>Create</Button.Root>
     </form>
   );
 };

src/components/invitations/Invitations.tsx

@@ -1,19 +1,19 @@
-import PouchDb from "pouchdb";
-import { Component, createEffect, For } from "solid-js";
-import { createServerAction$ } from "solid-start/server";
+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 db = new PouchDb('.db');
       const results = await db.allDocs({
         include_docs: true,
-        startkey: "invitation/",
-        endkey: "invitation/\ufff0",
+        startkey: 'invitation/',
+        endkey: 'invitation/\ufff0',
       });
-      console.log({ caller: "Invitations / serverAction", results });
+      console.log({ caller: 'Invitations / serverAction', results });
       return results.rows;
     }
   );
@@ -22,7 +22,7 @@ const Invitations: Component<Props> = (props) => {
 
   createEffect(() => {
     console.log({
-      caller: "Invitations",
+      caller: 'Invitations',
       invitations: invitations.result,
     });
   });
@@ -32,10 +32,10 @@ const Invitations: Component<Props> = (props) => {
       <For each={invitations.result}>
         {(invitation: any) => {
           console.log({
-            caller: "Invitations / loop",
+            caller: 'Invitations / loop',
             invitations: invitation,
           });
-          return <li>{invitation.id}</li>;
+          return <li>{invitation.doc.mail}</li>;
         }}
       </For>
     </ul>