feature: contact us fixed

components/ContactForm.tsx

@@ -1,40 +1,54 @@
 "use client";
 
-import React, { useActionState, useEffect, useRef } from "react";
-import { useFormStatus } from "react-dom";
+import React, { useEffect, useActionState } from "react"; // Removed useRef
+import { useForm } from "react-hook-form"; // Removed SubmitHandler
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 import { submitContactForm, ContactFormState } from "@/actions/contact";
-import Button from "@/components/ui/Button"; // Use your existing Button component
+import Button from "@/components/ui/Button";
 
-// Submit button component with pending state
-function SubmitButton() {
-  const { pending } = useFormStatus();
-  return (
-    <Button type="submit" variant="primary" size="lg" disabled={pending}>
-      {pending ? "Sending..." : "Send Message"}
-    </Button>
-  );
-}
+// Zod schema for contact form validation
+const contactSchema = z.object({
+  name: z.string().min(2, "Full name must be at least 2 characters"),
+  email: z.string().email("Invalid email address"),
+  subject: z.string().min(3, "Subject must be at least 3 characters"),
+  message: z.string().min(10, "Message must be at least 10 characters"),
+});
+
+type ContactFormData = z.infer<typeof contactSchema>;
 
-// The main contact form component
 export default function ContactForm() {
+  // React Hook Form setup
+  const {
+    register,
+    formState: { errors, isValid },
+    reset,
+  } = useForm<ContactFormData>({
+    resolver: zodResolver(contactSchema),
+    mode: "onChange",
+  });
+
   const initialState: ContactFormState = {
     message: null,
     errors: {},
     success: false,
   };
-  const [state, dispatch] = useActionState(submitContactForm, initialState);
-  const formRef = useRef<HTMLFormElement>(null); // Ref to reset the form
+  const [state, formAction] = useActionState(submitContactForm, initialState); // Renamed dispatch to formAction for clarity
 
-  // Reset form on successful submission
+  // Reset form when server action reports success
   useEffect(() => {
     if (state.success) {
-      formRef.current?.reset();
+      reset();
     }
-  }, [state.success]);
+  }, [state.success, reset]);
 
+  // Removed onSubmit handler
+
+  // Pass formAction directly to the form's action prop
+  // Remove onSubmit={handleSubmit(onSubmit)}
   return (
-    <form ref={formRef} action={dispatch} className="space-y-6">
-      {/* Name Input */}
+    <form action={formAction} className="space-y-6">
+      {/* Name Field */}
       <div>
         <label
           htmlFor="name"
@@ -43,24 +57,40 @@ export default function ContactForm() {
           Full Name
         </label>
         <input
-          type="text"
           id="name"
-          name="name"
-          required
-          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
+          type="text"
+          {...register("name")}
+          aria-invalid={errors.name ? "true" : "false"}
           aria-describedby="name-error"
+          className={`block w-full px-4 py-2 border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:placeholder-gray-400 ${
+            errors.name
+              ? "border-destructive"
+              : "border-border dark:border-gray-600"
+          }`}
         />
-        <div id="name-error" aria-live="polite" aria-atomic="true">
-          {state.errors?.name &&
-            state.errors.name.map((error: string) => (
-              <p className="mt-1 text-sm text-destructive" key={error}>
-                {error}
-              </p>
-            ))}
-        </div>
+        {/* Client-side error */}
+        {errors.name && (
+          <p
+            id="name-error"
+            role="alert"
+            className="mt-1 text-sm text-destructive dark:text-red-400"
+          >
+            {errors.name.message}
+          </p>
+        )}
+        {/* Server-side error */}
+        {state.errors?.name &&
+          state.errors.name.map((err: string) => (
+            <p
+              key={err}
+              className="mt-1 text-sm text-destructive dark:text-red-400"
+            >
+              {err}
+            </p>
+          ))}
       </div>
 
-      {/* Email Input */}
+      {/* Email Field */}
       <div>
         <label
           htmlFor="email"
@@ -69,24 +99,38 @@ export default function ContactForm() {
           Email Address
         </label>
         <input
-          type="email"
           id="email"
-          name="email"
-          required
-          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
+          type="email"
+          {...register("email")}
+          aria-invalid={errors.email ? "true" : "false"}
           aria-describedby="email-error"
+          className={`block w-full px-4 py-2 border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:placeholder-gray-400 ${
+            errors.email
+              ? "border-destructive"
+              : "border-border dark:border-gray-600"
+          }`}
         />
-        <div id="email-error" aria-live="polite" aria-atomic="true">
-          {state.errors?.email &&
-            state.errors.email.map((error: string) => (
-              <p className="mt-1 text-sm text-destructive" key={error}>
-                {error}
-              </p>
-            ))}
-        </div>
+        {errors.email && (
+          <p
+            id="email-error"
+            role="alert"
+            className="mt-1 text-sm text-destructive dark:text-red-400"
+          >
+            {errors.email.message}
+          </p>
+        )}
+        {state.errors?.email &&
+          state.errors.email.map((err: string) => (
+            <p
+              key={err}
+              className="mt-1 text-sm text-destructive dark:text-red-400"
+            >
+              {err}
+            </p>
+          ))}
       </div>
 
-      {/* Subject Input */}
+      {/* Subject Field */}
       <div>
         <label
           htmlFor="subject"
@@ -95,24 +139,38 @@ export default function ContactForm() {
           Subject
         </label>
         <input
-          type="text"
           id="subject"
-          name="subject"
-          required
-          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
+          type="text"
+          {...register("subject")}
+          aria-invalid={errors.subject ? "true" : "false"}
           aria-describedby="subject-error"
+          className={`block w-full px-4 py-2 border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:placeholder-gray-400 ${
+            errors.subject
+              ? "border-destructive"
+              : "border-border dark:border-gray-600"
+          }`}
         />
-        <div id="subject-error" aria-live="polite" aria-atomic="true">
-          {state.errors?.subject &&
-            state.errors.subject.map((error: string) => (
-              <p className="mt-1 text-sm text-destructive" key={error}>
-                {error}
-              </p>
-            ))}
-        </div>
+        {errors.subject && (
+          <p
+            id="subject-error"
+            role="alert"
+            className="mt-1 text-sm text-destructive dark:text-red-400"
+          >
+            {errors.subject.message}
+          </p>
+        )}
+        {state.errors?.subject &&
+          state.errors.subject.map((err: string) => (
+            <p
+              key={err}
+              className="mt-1 text-sm text-destructive dark:text-red-400"
+            >
+              {err}
+            </p>
+          ))}
       </div>
 
-      {/* Message Textarea */}
+      {/* Message Field */}
       <div>
         <label
           htmlFor="message"
@@ -122,38 +180,65 @@ export default function ContactForm() {
         </label>
         <textarea
           id="message"
-          name="message"
           rows={5}
-          required
-          className="block w-full px-4 py-2 border border-border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground"
+          {...register("message")}
+          aria-invalid={errors.message ? "true" : "false"}
           aria-describedby="message-error"
-        ></textarea>
-        <div id="message-error" aria-live="polite" aria-atomic="true">
-          {state.errors?.message &&
-            state.errors.message.map((error: string) => (
-              <p className="mt-1 text-sm text-destructive" key={error}>
-                {error}
-              </p>
-            ))}
-        </div>
-      </div>
-
-      {/* General Form Message (Success or Error) */}
-      <div id="form-response" aria-live="polite" aria-atomic="true">
-        {state.message && (
+          className={`block w-full px-4 py-2 border rounded-lg shadow-sm focus:ring-primary focus:border-primary sm:text-sm bg-input text-foreground placeholder-muted-foreground resize-vertical dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:placeholder-gray-400 ${
+            errors.message
+              ? "border-destructive"
+              : "border-border dark:border-gray-600"
+          }`}
+        />
+        {errors.message && (
           <p
-            className={`text-sm ${
-              state.success ? "text-green-600" : "text-destructive"
-            }`}
+            id="message-error"
+            role="alert"
+            className="mt-1 text-sm text-destructive dark:text-red-400"
           >
-            {state.message}
+            {errors.message.message}
           </p>
         )}
+        {state.errors?.message &&
+          state.errors.message.map((err: string) => (
+            <p
+              key={err}
+              className="mt-1 text-sm text-destructive dark:text-red-400"
+            >
+              {err}
+            </p>
+          ))}
       </div>
 
+      {/* General Form Response */}
+      {state.message && (
+        <p
+          className={`text-sm ${
+            state.success
+              ? "text-green-600 dark:text-green-400"
+              : "text-destructive dark:text-red-400"
+          }`}
+        >
+          {state.message}
+        </p>
+      )}
+
       {/* Submit Button */}
+      {/* isSubmitting from useFormState is now implicitly handled by the form action */}
       <div className="pt-2">
-        <SubmitButton />
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          // Disable based on client-side validation only before submission starts
+          // The form handles disabling during submission automatically
+          disabled={!isValid}
+          // aria-disabled={pending} // You might need to import useFormStatus for pending state
+        >
+          {/* {pending ? "Sending..." : "Send Message"} // Use useFormStatus for pending state */}
+          Send Message{" "}
+          {/* Simplified button text, pending state handled by browser/React */}
+        </Button>
       </div>
     </form>
   );