Navigation

src/components/invitation/Invitation.tsx

@@ -1,38 +1,65 @@
 import { createForm } from '@felte/solid';
-import { Component, createUniqueId } from 'solid-js';
+import { Component, createEffect, Match, Show, Switch } 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 { put } from '~/lib/db';
+import { useNavigate } from 'solid-start';
 
-interface Props {}
+interface Props {
+  values?: any;
+}
 
 const Invitation: Component<Props> = (props) => {
-  const [saving, save] = createServerAction$(async (values: any) => {
+  const navigate = useNavigate();
+
+  const [saving, save] = createServerAction$(async (args: any) => {
+    const { props, values } = args;
+    console.log({
+      caller: 'Invitation / save',
+      props,
+      values,
+      args,
+    });
     const db = new PouchDb('.db');
-    const id = `invitation/${uuid()}`;
-    await db.put({
-      _id: id,
-      type: 'invitation',
-      ...values,
-      date: new Date().toISOString(),
+    const id = props.values?.id ?? `invitation/${uuid()}`;
+    await put({
+      db,
+      doc: {
+        _id: id,
+        date: new Date().toISOString(),
+        type: 'invitation',
+        ...values,
+      },
     });
     return id;
   });
 
-  const submitHandler = (values: any, context: any) => {
+  const submitHandler = async (values: any, context: any) => {
     console.log({
       caller: 'Invitation / submitHandler',
       props,
       values,
       context,
     });
-    save(values);
+    const id = await save({ values, props });
+    if (!props.values) {
+      navigate(`/invitations/${encodeURIComponent(id)}`);
+    }
   };
 
-  const { form } = createForm({ onSubmit: submitHandler });
+  let { form } = createForm({
+    onSubmit: submitHandler,
+    initialValues: props?.values,
+  });
+
+  console.log({
+    caller: 'Invitation ',
+    props,
+  });
 
   return (
     <form use:form>
@@ -73,7 +100,11 @@ const Invitation: Component<Props> = (props) => {
           Please provide a valid password
         </TextField.ErrorMessage>
       </TextField.Root>
-      <Button.Root type='submit'>Create</Button.Root>
+      <Button.Root type='submit'>
+        <Switch fallback={<>Create</>}>
+          <Match when={!!props.values}>Save</Match>
+        </Switch>
+      </Button.Root>
     </form>
   );
 };

src/components/invitations/Invitations.tsx

@@ -1,3 +1,4 @@
+import { A } from '@solidjs/router';
 import PouchDb from 'pouchdb';
 import { Component, createEffect, For } from 'solid-js';
 import { createServerAction$ } from 'solid-start/server';
@@ -35,7 +36,11 @@ const Invitations: Component<Props> = (props) => {
             caller: 'Invitations / loop',
             invitations: invitation,
           });
-          return <li>{invitation.doc.mail}</li>;
+          return (
+            <li>
+              <A href={encodeURIComponent(invitation.id)}>{invitation.doc.mail}</A>
+            </li>
+          );
         }}
       </For>
     </ul>

src/lib/db.ts

@@ -0,0 +1,8 @@
+export const put = async (params: { db: any; doc: any }) => {
+  const { db, doc } = params;
+  try {
+    const previous = await db.get(doc._id);
+    doc._rev = previous._rev;
+  } catch (error) {}
+  db.put(doc);
+};

src/routes/invitations/[id].tsx

@@ -0,0 +1,36 @@
+import { useParams } from 'solid-start';
+import { createServerAction$ } from 'solid-start/server';
+import PouchDb from 'pouchdb';
+import Invitation from '~/components/invitation';
+import { createEffect, Show } from 'solid-js';
+
+export default () => {
+  const params = useParams();
+  const [invitation, getInvitation] = createServerAction$(
+    async (id: string) => {
+      const db = new PouchDb('.db');
+      const result = await db.get(id);
+      console.log({ caller: 'Invitations / serverAction', result });
+      return result;
+    }
+  );
+
+  getInvitation(decodeURIComponent(params.id));
+
+  createEffect(() => {
+    console.log({
+      caller: 'Invitations/[id]',
+      params,
+      invitation: invitation.result,
+    });
+  });
+
+  return (
+    <main>
+      <h1>Invitation: </h1>
+      <Show when={!invitation.pending} fallback={<>Loading...</>}>
+        <Invitation values={invitation.result} />
+      </Show>
+    </main>
+  );
+};