Navigation (for invitations)

src/components/invitation/Invitation.tsx

@@ -23,9 +23,10 @@ const Invitation: Component<Props> = (props) => {
       props,
       values,
       args,
+      id: props.values?._id,
     });
     const db = new PouchDb('.db');
-    const id = props.values?.id ?? `invitation/${uuid()}`;
+    const id = props.values?._id ?? `invitation/${uuid()}`;
     await put({
       db,
       doc: {
@@ -51,7 +52,20 @@ const Invitation: Component<Props> = (props) => {
     }
   };
 
-  let { form } = createForm({
+  const cancelHandler = () => {
+    navigate(`/invitations/`);
+  };
+
+  const deleteHandler = async () => {
+    console.log({
+      caller: 'Invitation / deleteHandler',
+      props,
+    });
+    await save({ props, values: { _deleted: true } });
+    navigate(`/invitations/`);
+  };
+
+  const { form } = createForm({
     onSubmit: submitHandler,
     initialValues: props?.values,
   });
@@ -100,11 +114,17 @@ const Invitation: Component<Props> = (props) => {
           Please provide a valid password
         </TextField.ErrorMessage>
       </TextField.Root>
-      <Button.Root type='submit'>
-        <Switch fallback={<>Create</>}>
-          <Match when={!!props.values}>Save</Match>
-        </Switch>
-      </Button.Root>
+      <Switch>
+        <Match when={!!props.values}>
+          <Button.Root type='submit'>Save</Button.Root>
+          <Button.Root onclick={deleteHandler}>Delete</Button.Root>
+          <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
+        </Match>
+        <Match when={!props.values}>
+          <Button.Root type='submit'>Create</Button.Root>
+          <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
+        </Match>
+      </Switch>
     </form>
   );
 };

src/components/invitations/Invitations.tsx

@@ -1,11 +1,15 @@
+import { Button } from '@kobalte/core';
 import { A } from '@solidjs/router';
 import PouchDb from 'pouchdb';
 import { Component, createEffect, For } from 'solid-js';
 import { createServerAction$ } from 'solid-start/server';
+import { useNavigate } from 'solid-start';
 
 interface Props {}
 
 const Invitations: Component<Props> = (props) => {
+  const navigate = useNavigate();
+
   const [invitations, getInvitations] = createServerAction$(
     async (values: any) => {
       const db = new PouchDb('.db');
@@ -28,22 +32,31 @@ const Invitations: Component<Props> = (props) => {
     });
   });
 
+  const newHandler = () => {
+    navigate('/invitations/new');
+  };
+
   return (
-    <ul>
-      <For each={invitations.result}>
-        {(invitation: any) => {
-          console.log({
-            caller: 'Invitations / loop',
-            invitations: invitation,
-          });
-          return (
-            <li>
-              <A href={encodeURIComponent(invitation.id)}>{invitation.doc.mail}</A>
-            </li>
-          );
-        }}
-      </For>
-    </ul>
+    <>
+      <Button.Root onclick={newHandler}>New</Button.Root>
+      <ul>
+        <For each={invitations.result}>
+          {(invitation: any) => {
+            console.log({
+              caller: 'Invitations / loop',
+              invitations: invitation,
+            });
+            return (
+              <li>
+                <A href={encodeURIComponent(invitation.id)}>
+                  {invitation.doc.mail}
+                </A>
+              </li>
+            );
+          }}
+        </For>
+      </ul>
+    </>
   );
 };
 

src/lib/db.ts

@@ -3,6 +3,9 @@ export const put = async (params: { db: any; doc: any }) => {
   try {
     const previous = await db.get(doc._id);
     doc._rev = previous._rev;
-  } catch (error) {}
+  } catch (error) {
+    console.error({ caller: 'put', doc, error });
+  }
+  console.log({ caller: 'put', doc });
   db.put(doc);
 };