Merge branch 'create-guild-page' of github.com:guildxyz/guild.xyz int…

…o create-guild-page-adjustments
guildxyz · Nov 25, 2024 · a77e568 · a77e568
2 parents d13a6f7 + 7ae8127
commit a77e568
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/app/create-guild/components/CreateGuildForm.tsx b/src/app/create-guild/components/CreateGuildForm.tsx
@@ -38,7 +38,7 @@ export const CreateGuildForm = () => {
         name="name"
         render={({ field }) => (
           <FormItem>
-            <FormLabel>Guild name</FormLabel>
+            <FormLabel aria-required>Guild name</FormLabel>
             <FormControl>
               <Input size="lg" {...field} />
             </FormControl>
@@ -53,7 +53,7 @@ export const CreateGuildForm = () => {
         name="contact"
         render={({ field }) => (
           <FormItem>
-            <FormLabel>E-mail address</FormLabel>
+            <FormLabel aria-required>E-mail address</FormLabel>
             <FormControl>
               <Input size="lg" {...field} />
             </FormControl>

diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
@@ -5,7 +5,7 @@ import { pinata } from "@/config/pinata.client";
 import { cn } from "@/lib/cssUtils";
 import { CircleNotch, UploadSimple } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
-import { useCallback, useRef, useState } from "react";
+import { type InputHTMLAttributes, useCallback, useRef, useState } from "react";
 import {
   type FieldValues,
   type Path,
@@ -18,6 +18,7 @@ type Props = Omit<ButtonProps, "variant" | "onClick" | "onError"> & {
   maxSizeMB?: number;
   onSuccess?: (imageUrl: string) => void;
   onError?: (error: string) => void;
+  onFileInputChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
 };
 
 const mbToBytes = (mb: number) => mb * 10 ** 6;
@@ -27,6 +28,7 @@ export const ImageUploader = ({
   maxSizeMB = 5,
   onSuccess,
   onError,
+  onFileInputChange,
   ...props
 }: Props) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -99,15 +101,20 @@ export const ImageUploader = ({
         type="file"
         className="hidden"
         accept="image/png, image/gif, image/jpeg"
-        onChange={(e) => validateFiles(e.target.files)}
+        onChange={(e) => {
+          validateFiles(e.target.files);
+          if (typeof onFileInputChange === "function") {
+            onFileInputChange(e);
+          }
+        }}
       />
     </Button>
   );
 };
 
 type ControlledProps<TFieldValues extends FieldValues, _TContext> = Omit<
   Props,
-  "onSuccess" | "onError"
+  "onSuccess" | "onError" | "onFileInputChange"
 > & {
   fieldName: Path<TFieldValues>;
 };
@@ -119,7 +126,7 @@ export const ControlledImageUploader = <
   fieldName,
   ...imageUploaderProps
 }: ControlledProps<TFieldValues, TContext>) => {
-  const { control, setError } = useFormContext<TFieldValues>();
+  const { control, setError, clearErrors } = useFormContext<TFieldValues>();
 
   const {
     field: { onChange },
@@ -138,6 +145,7 @@ export const ControlledImageUploader = <
           message: errorMessage,
         })
       }
+      onFileInputChange={() => clearErrors(fieldName)}
     />
   );
 };