From fbe2b834bd9eaec57010ac1d68e098677baf2cc1 Mon Sep 17 00:00:00 2001
From: Jason Lewallen <jklewa@gmail.com>
Date: Sat, 21 Jun 2025 23:50:30 -0600
Subject: [PATCH] Character counts for design title and summary

---
 src/app/components/design/design-form.tsx | 17 +++++++++++++++++
 src/app/design/[designID]/page.tsx        | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/app/components/design/design-form.tsx b/src/app/components/design/design-form.tsx
index a5ee71b..dd2a7ed 100644
--- a/src/app/components/design/design-form.tsx
+++ b/src/app/components/design/design-form.tsx
@@ -33,6 +33,8 @@ const DesignForm = () => {
   const router = useRouter();
   const [description, setDescription] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [titleCount, setTitleCount] = useState(0);
+  const [summaryCount, setSummaryCount] = useState(0);
 
   const form = useForm<DesignCreateSchema>({
     resolver: zodResolver(designCreateSchema),
@@ -57,6 +59,11 @@ const DesignForm = () => {
     };
   }, []);
 
+  useEffect(() => {
+    setTitleCount(form.getValues('main_name')?.length || 0);
+    setSummaryCount(form.getValues('summary')?.length || 0);
+  }, [form]);
+
   const onSubmit = async (data: DesignCreateSchema) => {
     setErrorMessage(null); // Clear previous errors
     try {
@@ -99,8 +106,13 @@ const DesignForm = () => {
                   {...field}
                   required
                   className="border border-gray-300 rounded-md p-2"
+                  onChange={e => {
+                    field.onChange(e);
+                    setTitleCount(e.target.value.length);
+                  }}
                 />
               </FormControl>
+              <div className="text-xs text-gray-500 text-right">{titleCount}</div>
             </FormItem>
           )}
         />
@@ -120,8 +132,13 @@ const DesignForm = () => {
                   {...field}
                   required
                   className="border border-gray-300 rounded-md p-2"
+                  onChange={e => {
+                    field.onChange(e);
+                    setSummaryCount(e.target.value.length);
+                  }}
                 />
               </FormControl>
+              <div className="text-xs text-gray-500 text-right">{summaryCount}</div>
             </FormItem>
           )}
         />
diff --git a/src/app/design/[designID]/page.tsx b/src/app/design/[designID]/page.tsx
index 4b66314..4e01e55 100644
--- a/src/app/design/[designID]/page.tsx
+++ b/src/app/design/[designID]/page.tsx
@@ -45,6 +45,8 @@ const DesignDetailsPage = () => {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [editMode, setEditMode] = useState(false);
+  const [titleCount, setTitleCount] = useState(0);
+  const [summaryCount, setSummaryCount] = useState(0);
   const { register, handleSubmit, reset, formState: { errors } } = useForm();
   const router = useRouter();
   const resetForm = (design: DesignSchema) => {
@@ -181,6 +183,13 @@ const DesignDetailsPage = () => {
     }
   };
 
+  useEffect(() => {
+    if (editMode) {
+      setTitleCount(design?.main_name?.length || 0);
+      setSummaryCount(design?.summary?.length || 0);
+    }
+  }, [editMode, design]);
+
   if (!design) return <div>Loading...</div>;
 
   return (
@@ -221,7 +230,12 @@ const DesignDetailsPage = () => {
               {...register('main_name', { required: true })}
               defaultValue={design.main_name}
               className="w-full"
+              onChange={e => {
+                register('main_name').onChange(e);
+                setTitleCount(e.target.value.length);
+              }}
             />
+            <div className="text-xs text-gray-500 text-right">{titleCount} Characters</div>
             {errors.main_name && <p className="text-red-500 text-sm">Name is required</p>}
           </div>
 
@@ -232,7 +246,12 @@ const DesignDetailsPage = () => {
               defaultValue={design.summary}
               className="w-full border rounded-md p-2"
               rows={2}
+              onChange={e => {
+                register('summary').onChange(e);
+                setSummaryCount(e.target.value.length);
+              }}
             />
+            <div className="text-xs text-gray-500 text-right">{summaryCount} Characters</div>
             {errors.summary && <p className="text-red-500 text-sm">Summary is required</p>}
           </div>