dbCheck action

src/components/invitation/Invitation.tsx

@@ -8,6 +8,8 @@ import PouchDb from 'pouchdb';
 import { v4 as uuid } from 'uuid';
 import { put } from '~/lib/db';
 import { useNavigate } from 'solid-start';
+import { toHex } from '~/lib/to-hex';
+import { cloneDeep } from 'lodash';
 
 interface Props {
   values?: any;
@@ -39,6 +41,29 @@ const Invitation: Component<Props> = (props) => {
     return id;
   });
 
+  const [dbChecking, dbCheck] = createServerAction$(async (args: any) => {
+    console.log({
+      caller: 'Invitation / dbCheck',
+      args,
+    });
+    let baseDbInfo;
+    try {
+      const baseDb = new PouchDb(cloneDeep(args));
+      baseDbInfo = await baseDb.info();
+    } catch (error) {
+      baseDbInfo = error;
+    }
+    const name = `${args.name}/userdb-${toHex(args.auth.username)}`;
+    let userDbInfo;
+    try {
+      const userDb = new PouchDb({ ...args, name });
+      userDbInfo = await userDb.info();
+    } catch (error) {
+      userDbInfo = error;
+    }
+    return { baseDbInfo, userDbInfo, args, name };
+  });
+
   const submitHandler = async (values: any, context: any) => {
     console.log({
       caller: 'Invitation / submitHandler',
@@ -65,11 +90,24 @@ const Invitation: Component<Props> = (props) => {
     navigate(`/invitations/`);
   };
 
-  const { form } = createForm({
+  const { form, data } = createForm({
     onSubmit: submitHandler,
     initialValues: props?.values,
   });
 
+  const dbCheckHandler = async () => {
+    const result = await dbCheck({
+      name: data('database'),
+      auth: { username: data('username'), password: data('password') },
+    });
+    console.log({
+      caller: 'Invitation / dbCheckHandler',
+      props,
+      data: data(),
+      result,
+    });
+  };
+
   console.log({
     caller: 'Invitation ',
     props,
@@ -127,13 +165,13 @@ const Invitation: Component<Props> = (props) => {
         <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>
+      <Button.Root onclick={dbCheckHandler}>DB check</Button.Root>
+      <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
     </form>
   );
 };

src/lib/to-hex.ts

@@ -0,0 +1,18 @@
+// see https://9to5answer.com/javascript-unicode-string-to-hex
+
+export const toHex = (str: string) => {
+    let hex;
+    try {
+      hex = unescape(encodeURIComponent(str))
+        .split('')
+        .map(function (v) {
+          return v.charCodeAt(0).toString(16);
+        })
+        .join('');
+    } catch (e) {
+      hex = str;
+      console.log('invalid text input: ' + str);
+    }
+    return hex;
+  };
+  

src/routes/invitations/[id].tsx

@@ -27,7 +27,7 @@ export default () => {
 
   return (
     <main>
-      <h1>Invitation: </h1>
+      <h1>Invitation</h1>
       <Show when={!invitation.pending} fallback={<>Loading...</>}>
         <Invitation values={invitation.result} />
       </Show>