change edit form to be cloudscape friendly

packages/doorman-ui/package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.2",
+    "react-hook-form-cloudscape": "^1.7.7",
     "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.15.0",
     "typescript": "^4.4.2",

packages/doorman-ui/src/components/InputTokenGroup.tsx

@@ -1,8 +1,10 @@
-import { Button, ColumnLayout, Input, SpaceBetween, TokenGroup, TokenGroupProps } from "@cloudscape-design/components";
+import { Button, ColumnLayout, Input, InputProps, SpaceBetween, TokenGroup, TokenGroupProps } from "@cloudscape-design/components";
+import CInput from "react-hook-form-cloudscape/components/input";
 
 export type InputTokenGroupProps = { 
-  type?: React.HTMLInputTypeAttribute; 
+  type?: InputProps.Type; 
-  registerInput: any, 
+  control: any;
+  name: string;
   tokenGroupProps: TokenGroupProps,
   onAdd: () => void,
   onDismiss: (i: number) => void,
@@ -12,9 +14,13 @@ export const InputTokenGroup = (props: InputTokenGroupProps) => {
   return (
     <SpaceBetween size="xs">
       <ColumnLayout columns={2}>
-        <input 
+        <CInput
           type={props.type}
-          {...props.registerInput}  
+          name={props.name}
+          rules={{
+            minLength: 1
+          }}
+          control={props.control}
         />
         <Button onClick={() => props.onAdd()}>Add</Button>
       </ColumnLayout>

packages/doorman-ui/src/pages/EditPage.tsx

@@ -1,16 +1,18 @@
-import { AppLayout, BreadcrumbGroup, Button, Container, Flashbar, FlashbarProps, Form, FormField, Header, Link, SpaceBetween } from "@cloudscape-design/components";
+import { AppLayout, BreadcrumbGroup, Button, Container, Flashbar, FlashbarProps, Form, FormField, Header, Input, Link, SpaceBetween } from "@cloudscape-design/components";
 import { useLoaderData, useSearchParams } from "react-router-dom";
 import { DoorResponse } from "../types/DoorResponse";
 import { useForm } from "react-hook-form";
 import { InputTokenGroup } from "../components/InputTokenGroup";
 import { ReactNode, useState } from "react";
+import CInput from "react-hook-form-cloudscape/components/input";
+import CTextArea from "react-hook-form-cloudscape/components/textarea";
 
 export type DoorEditForm = DoorResponse & { pin: string, fallbackNumber: string, discordUser: string };
 
 export const EditPage = () => {
   const doorResponse = useLoaderData() as DoorResponse;
   const door = doorResponse.id;
-  const { register, setValue, setError, getValues, watch, formState, clearErrors } = useForm<DoorEditForm>({
+  const { register, setValue, setError, getValues, watch, formState, clearErrors, control } = useForm<DoorEditForm>({
     defaultValues: doorResponse,
     mode: "all",
   });
@@ -22,7 +24,6 @@ export const EditPage = () => {
     setAlerts(alerts => alerts.filter(alert => alert.id !== id));
   }
 
-
   const createAlert = (type: FlashbarProps.Type, content: ReactNode): FlashbarProps.MessageDefinition => {
     const id = `${Math.random()}`;
     return {
@@ -80,7 +81,12 @@ export const EditPage = () => {
               <Button 
                 variant="primary"
                 onClick={() => {
-                  fetch(`/api/door/edit?door=${door}&newConfig=${encodeURIComponent(JSON.stringify(getValues()))}`)
+                  const form = {
+                    ...getValues(), 
+                    timeout: parseInt("" + getValues("timeout"))
+                  };
+
+                  fetch(`/api/door/edit?door=${door}&newConfig=${encodeURIComponent(JSON.stringify(form))}`)
                   .then(res => res.json())
                   .then(res => {
                     addAlert("success", `Created approval, check Discord notifcation from Doorman to confirm and approve the changes`);
@@ -102,21 +108,19 @@ export const EditPage = () => {
           >
             <SpaceBetween direction="vertical" size="l">
               <FormField label="Buzzer Number (read-only)" constraintText="The phone number of your buzzer system">
-                <input readOnly {...register("buzzer")} />
+                <CInput readOnly disabled name="buzzer" control={control} />
               </FormField>
               <FormField label="PIN" constraintText={"The code to unlock the buzzer"}>
-                <input type="password" {...register("pin")}/>
+                <CInput type="password" name="pin" control={control} />
               </FormField>
               <FormField label="Buzzer Code" constraintText={"The number that you dial on your buzzer"}>
-                <input {...register("buzzerCode")} />
+                <CInput name="buzzerCode" control={control} />
               </FormField>
               <FormField label="Timeout" constraintText="Time in seconds for the door to remain unlocked">
-                <input type="number" {...register("timeout", {
+                <CInput type="number" name="timeout" control={control} />
-                  valueAsNumber: true,
-                })} />
               </FormField>
               <FormField label="Unlock key" constraintText="Key to press to buzz up on Intercom">
-                <input {...register("pressKey")} />
+                <CInput name="pressKey" control={control} />
               </FormField>
               <FormField 
                 errorText={fallbackNumbersError}
@@ -124,12 +128,17 @@ export const EditPage = () => {
                 constraintText="Phone numbers to dial through in case door is not unlocked"
               >
                 <InputTokenGroup
-                  registerInput={register("fallbackNumber")}
+                  name={"fallbackNumber"}
+                  control={control}
                   tokenGroupProps={{ items: fallbackNumbers.map(n => ({ label: n }))}}
                   onAdd={() => {
+                    const newValue = getValues().fallbackNumber;
+                    if (newValue.length === 0) {
+                      return;
+                    }
                     clearErrors("fallbackNumbers");
-                    setValue("fallbackNumbers", [...fallbackNumbers, getValues().fallbackNumber])
+                    setValue("fallbackNumbers", [...fallbackNumbers, newValue]);
-                    setValue("fallbackNumber", "")
+                    setValue("fallbackNumber", "");
                   }}
                   onDismiss={(i) => {
                     clearErrors("fallbackNumbers");
@@ -153,13 +162,17 @@ export const EditPage = () => {
                 }
               >
                 <InputTokenGroup
-                  type="string"
+                  name={"discordUser"}
-                  registerInput={register("discordUser")}
+                  control={control}
                   tokenGroupProps={{ items: discordUsers.map(n => ({ label: n }))}}
                   onAdd={() => {
+                    const newValue = getValues().discordUser;
+                    if (newValue.length === 0) {
+                      return;
+                    }
                     clearErrors("discordUsers");
-                    setValue("discordUsers", [...discordUsers, getValues().discordUser])
+                    setValue("discordUsers", [...discordUsers, newValue]);
-                    setValue("discordUser", "")
+                    setValue("discordUser", "");
                   }}
                   onDismiss={(i) => {
                     clearErrors("discordUsers");
@@ -174,7 +187,7 @@ export const EditPage = () => {
                 />
               </FormField>
               <FormField label="Welcome Message" constraintText="Message to display after a successful unlock">
-                <textarea {...register("greeting")}/>
+                <CTextArea name="greeting" control={control} />
               </FormField>
             </SpaceBetween>
           </Container>