Starting to implement subscriptions.

src/components/user/User.tsx

@@ -1,5 +1,5 @@
 import { createForm } from '@felte/solid';
-import { Component, Index, Match, onMount, Switch } from 'solid-js';
+import { Component, Index, Match, onMount, Show, Switch } from 'solid-js';
 import { TextField, Button } from '@kobalte/core';
 import reporter from '@felte/reporter-tippy';
 import './style.css';
@@ -130,7 +130,8 @@ const User: Component<Props> = (props) => {
   }
 
   function addSubscription(index?: number) {
-    return () => addField(`subscriptions`, { user: '', direction: '' }, index);
+    return () =>
+      addField(`subscriptions`, { username: '', direction: '' }, index);
   }
 
   console.log({
@@ -141,6 +142,10 @@ const User: Component<Props> = (props) => {
   });
 
   return (
+    <>
+      <Show when={!isNew()}>
+        <h2>{userId(data('username'), data('database'))}</h2>
+      </Show>
       <form use:form>
         <TextField.Root>
           <TextField.Label>Mail address</TextField.Label>
@@ -192,8 +197,7 @@ const User: Component<Props> = (props) => {
                   +
                 </button>
               </th>
-            <th>User</th>
+              <th>User name</th>
-            <th>Direction</th>
             </tr>
           </thead>
           <tbody>
@@ -209,19 +213,9 @@ const User: Component<Props> = (props) => {
                     <TextField.Root>
                       <TextField.Input
                         type='text'
-                      name={`subscriptions.${index}.user`}
+                        name={`subscriptions.${index}.username`}
                         required={true}
-                      placeholder='user'
+                        placeholder='user name'
-                    />
-                  </TextField.Root>
-                </td>
-                <td>
-                  <TextField.Root>
-                    <TextField.Input
-                      type='text'
-                      name={`subscriptions.${index}.direction`}
-                      required={true}
-                      placeholder='direction'
                       />
                     </TextField.Root>
                   </td>
@@ -241,6 +235,7 @@ const User: Component<Props> = (props) => {
         </Switch>
         <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
       </form>
+    </>
   );
 };