feat: migrate NewConversation to React Hook Form

package.json

@@ -58,6 +58,7 @@
     "react-dom": "^19.2.1",
     "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.71.1",
     "react-image-file-resizer": "^0.4.8",
     "react-router-dom": "^7.6.3",
     "react-youtube": "^10.1.0",
@@ -83,4 +84,4 @@
     "eslint-plugin-unused-imports": "4.1.4",
     "typescript": "^5.8.3"
   }
-}
+}

src/components/notes/NewConversation.tsx

@@ -2,10 +2,11 @@
 
 import { Icon, Paper, Stack, TextField } from "@mui/material";
 import React from "react";
+import { useForm } from "react-hook-form";
 import { ApiHelper } from "@churchapps/apphelper";
 import { Locale } from "@churchapps/apphelper";
 import { PersonHelper } from "@churchapps/apphelper";
-import { ConversationInterface, MessageInterface, UserContextInterface } from "@churchapps/helpers";
+import { ConversationInterface, UserContextInterface } from "@churchapps/helpers";
 import { ErrorMessages } from "@churchapps/apphelper";
 import { SmallButton } from "@churchapps/apphelper";
 
@@ -19,32 +20,23 @@ interface Props {
   conversation: ConversationInterface[]
 }
 
+interface FormData {
+  content: string;
+}
+
 export function NewConversation({ context, conversation, ...props }: Props) {
-  const [message, setMessage] = React.useState<MessageInterface>({})
-  const [errors, setErrors] = React.useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm<FormData>({
+    defaultValues: { content: "" }
+  });
 
   const hasConversations = conversation?.length !== 0;
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const m = { ...message } as MessageInterface;
-    m.content = e.target.value;
-    setMessage(m);
-  }
-
-  const validate = () => {
-    const result = [];
-    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
-    setErrors(result);
-    return result.length === 0;
-  }
-
-  async function handleSave() {
-    if (!validate()) return;
-
-    setIsSubmitting(true);
-
+  async function onSubmit(data: FormData) {
     try {
       let cId: string;
 
@@ -64,33 +56,45 @@ export function NewConversation({ context, conversation, ...props }: Props) {
         cId = result[0].id;
       }
 
-      const m = { ...message, conversationId: cId };
-      await ApiHelper.post("/messages", [m], "MessagingApi");
+      const message = { content: data.content, conversationId: cId };
+      await ApiHelper.post("/messages", [message], "MessagingApi");
 
-      setMessage({ ...message, content: "" });
+      reset();
       props.onUpdate();
     } catch (error) {
       console.error("Error saving message:", error);
-    } finally {
-      setIsSubmitting(false);
     }
   }
 
   const image = PersonHelper.getPhotoUrl(context?.person);
 
+  const errorMessages = errors.content ? [errors.content.message || Locale.label("notes.validate.content")] : [];
+
   return (
     <Paper sx={{ padding: 1, marginBottom: 2 }}>
-      <ErrorMessages errors={errors} />
+      <ErrorMessages errors={errorMessages} />
 
       <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
 
         {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
         <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
           <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={hasConversations ? "Type a message..." : Locale.label("notes.startConversation")} placeholder={hasConversations ? "Type a message..." : Locale.label("notes.startConversation")} multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message.content} />
+          <TextField
+            fullWidth
+            aria-label={hasConversations ? "Type a message..." : Locale.label("notes.startConversation")}
+            placeholder={hasConversations ? "Type a message..." : Locale.label("notes.startConversation")}
+            multiline
+            style={{ marginTop: 0, border: "none" }}
+            variant="standard"
+            error={!!errors.content}
+            {...register("content", {
+              required: Locale.label("notes.validate.content"),
+              validate: (value) => value.trim() !== "" || Locale.label("notes.validate.content")
+            })}
+          />
         </Stack>
         <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} disabled={isSubmitting} />
+          <SmallButton icon="send" onClick={handleSubmit(onSubmit)} disabled={isSubmitting} />
         </Stack>
       </Stack>
     </Paper>