🪹 Remove current prop from form counter (#221)

WallfacerLabs · Mar 22, 2024 · 437d4de · 437d4de
1 parent 3bceec3
commit 437d4de
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 24 deletions.
diff --git a/src/app/waves/[waveId]/applications/create/steps/mainDetails.tsx b/src/app/waves/[waveId]/applications/create/steps/mainDetails.tsx
@@ -133,10 +133,7 @@ export function MainDetails() {
               </FormControl>
               <FormMessages>
                 <FormMessage />
-                <FormCounter
-                  current={field.value.length}
-                  limit={FORM_FIELD_PARAMS.name.max}
-                />
+                <FormCounter limit={FORM_FIELD_PARAMS.name.max} />
               </FormMessages>
             </FormItem>
           )}
@@ -156,10 +153,7 @@ export function MainDetails() {
               </FormControl>
               <FormMessages>
                 <FormMessage />
-                <FormCounter
-                  current={field.value.length}
-                  limit={FORM_FIELD_PARAMS.entityName.max}
-                />
+                <FormCounter limit={FORM_FIELD_PARAMS.entityName.max} />
               </FormMessages>
             </FormItem>
           )}
@@ -221,10 +215,7 @@ export function MainDetails() {
               </FormControl>
               <FormMessages>
                 <FormMessage />
-                <FormCounter
-                  current={field.value.length}
-                  limit={FORM_FIELD_PARAMS.summary.max}
-                />
+                <FormCounter limit={FORM_FIELD_PARAMS.summary.max} />
               </FormMessages>
             </FormItem>
           )}

diff --git a/src/app/waves/create/steps/mainDetails.tsx b/src/app/waves/create/steps/mainDetails.tsx
@@ -54,10 +54,7 @@ export function MainDetails() {
               <FormControl>
                 <Input {...field} />
               </FormControl>
-              <FormCounter
-                current={field.value.length}
-                limit={FORM_FIELD_PARAMS[field.name].max}
-              />
+              <FormCounter limit={FORM_FIELD_PARAMS[field.name].max} />
               <FormMessage />
             </FormItem>
           )}
@@ -72,10 +69,7 @@ export function MainDetails() {
               <FormControl>
                 <Textarea {...field} />
               </FormControl>
-              <FormCounter
-                current={field.value.length}
-                limit={FORM_FIELD_PARAMS[field.name].max}
-              />
+              <FormCounter limit={FORM_FIELD_PARAMS[field.name].max} />
               <FormMessage />
             </FormItem>
           )}

diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -14,6 +14,7 @@ import {
   Controller,
   FormProvider,
   useFormContext,
+  useWatch,
   type ControllerProps,
   type FieldPath,
   type FieldValues,
@@ -230,18 +231,22 @@ FormMessage.displayName = "FormMessage";
 
 interface FormCounterProps
   extends Pick<HTMLAttributes<HTMLParagraphElement>, "className"> {
-  current: number;
   limit: number;
 }
 
-const FormCounter = ({ current, limit, className }: FormCounterProps) => {
+const FormCounter = ({ limit, className }: FormCounterProps) => {
+  const { name } = useFormField();
+  const value = useWatch({ name });
+
+  const currentLength = value.length;
+
   return (
     <p
       className={cn("group ml-auto mr-4 w-fit text-xs opacity-60", className)}
-      data-overlimit={current > limit}
+      data-overlimit={currentLength > limit}
     >
       <span className="transition-colors group-data-[overlimit=true]:text-destructive">
-        {current}
+        {currentLength}
       </span>
       /{limit}
     </p>