Starting to implement subscriptions.

src/components/user/User.tsx

@@ -1,8 +1,7 @@
 import { createForm } from '@felte/solid';
-import { Component, createEffect, Match, Switch } from 'solid-js';
+import { Component, Index, Match, onMount, Switch } from 'solid-js';
 import { TextField, Button } from '@kobalte/core';
 import reporter from '@felte/reporter-tippy';
-import { v4 as uuid } from 'uuid';
 import './style.css';
 import { useNavigate } from 'solid-start';
 import { adminCredentials } from '../credentials';
@@ -18,14 +17,17 @@ interface Props {
 const User: Component<Props> = (props) => {
   const navigate = useNavigate();
 
-  const getValues = () => {
-    if (!isFunction(props?.values)) {
-      return null;
-    }
-    return props.values();
-  };
+  const credentials = adminCredentials();
+  const { database } = credentials || { database: null };
 
-  const isNew = () => !getValues();
+  const isNew = () => !isFunction(props?.values);
+
+  const getValues = () => {
+    if (isNew()) {
+      return { database, subscriptions: [] };
+    }
+    return { subscriptions: [], ...props.values() };
+  };
 
   const submitHandler = async (values: any, context: any) => {
     console.log({
@@ -104,15 +106,13 @@ const User: Component<Props> = (props) => {
     return errors;
   };
 
-  const credentials = adminCredentials();
-  const { database } = credentials || { database: null };
-
-  const { form, data, setData, setInitialValues, reset } = createForm({
-    onSubmit: submitHandler,
-    extend: reporter(),
-    validate: validationHandler,
-    initialValues: getValues() || { database },
-  });
+  const { form, data, setData, setInitialValues, reset, addField, unsetField } =
+    createForm({
+      onSubmit: submitHandler,
+      extend: reporter(),
+      validate: validationHandler,
+      initialValues: getValues(),
+    });
 
   const createUserHandler = async () => {
     console.log({
@@ -123,10 +123,21 @@ const User: Component<Props> = (props) => {
     //    setOpenUserNamePasswordDialog(true);
   };
 
+  const subscriptions = () => data('subscriptions');
+
+  function removeSubscription(index: number) {
+    return () => unsetField(`subscriptions.${index}`);
+  }
+
+  function addSubscription(index?: number) {
+    return () => addField(`subscriptions`, { user: '', direction: '' }, index);
+  }
+
   console.log({
     caller: 'User ',
     props,
     values: getValues(),
+    data: data(),
   });
 
   return (
@@ -173,6 +184,52 @@ const User: Component<Props> = (props) => {
           autocomplete='off'
         />
       </TextField.Root>
+      <table>
+        <thead>
+          <tr>
+            <th>
+              <button type='button' onClick={addSubscription()}>
+                +
+              </button>
+            </th>
+            <th>User</th>
+            <th>Direction</th>
+          </tr>
+        </thead>
+        <tbody>
+          <Index each={subscriptions()}>
+            {(_, index) => (
+              <tr>
+                <td>
+                  <button type='button' onClick={removeSubscription(index)}>
+                    -
+                  </button>
+                </td>
+                <td>
+                  <TextField.Root>
+                    <TextField.Input
+                      type='text'
+                      name={`subscriptions.${index}.user`}
+                      required={true}
+                      placeholder='user'
+                    />
+                  </TextField.Root>
+                </td>
+                <td>
+                  <TextField.Root>
+                    <TextField.Input
+                      type='text'
+                      name={`subscriptions.${index}.direction`}
+                      required={true}
+                      placeholder='direction'
+                    />
+                  </TextField.Root>
+                </td>
+              </tr>
+            )}
+          </Index>
+        </tbody>
+      </table>
       <Switch>
         <Match when={!isNew()}>
           <Button.Root type='submit'>Save</Button.Root>