refactor: simplify the image uploader (#1561)

* fix: address typo in request pathname * feat: add option for toast instead of form message * refactor: simplify the image uploader --------- Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>
guildxyz · Nov 25, 2024 · 1a28933 · 1a28933
1 parent fc3ee49
commit 1a28933
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 62 deletions.
diff --git a/src/app/create-guild/components/CreateGuildButton.tsx b/src/app/create-guild/components/CreateGuildButton.tsx
@@ -38,7 +38,7 @@ const CreateGuildButton = () => {
         }),
       };
 
-      return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guilddsd`, {
+      return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guild`, {
         method: "POST",
         headers: {
           "X-Auth-Token": token,

diff --git a/src/app/create-guild/components/CreateGuildForm.tsx b/src/app/create-guild/components/CreateGuildForm.tsx
@@ -2,7 +2,7 @@
 
 import { useFormContext } from "react-hook-form";
 
-import { ControlledImageUploader } from "@/components/ImageUploader";
+import { ImageUploader } from "@/components/ImageUploader";
 import {
   FormControl,
   FormErrorMessage,
@@ -14,24 +14,20 @@ import { Input } from "@/components/ui/Input";
 import type { CreateGuildForm as CreateGuildFormType } from "@/lib/schemas/guild";
 
 export const CreateGuildForm = () => {
-  const { control } = useFormContext<CreateGuildFormType>();
+  const { control, setValue } = useFormContext<CreateGuildFormType>();
 
   return (
     <>
-      <FormField
-        name="imageUrl"
-        render={() => (
-          <FormItem>
-            <div className="mx-auto size-32 rounded-full bg-input-background">
-              <ControlledImageUploader
-                fieldName="imageUrl"
-                className="size-32"
-              />
-            </div>
-            <FormErrorMessage />
-          </FormItem>
-        )}
-      />
+      <div className="mx-auto size-32 rounded-full bg-input-background">
+        <ImageUploader
+          onSuccess={(imageUrl) =>
+            setValue("imageUrl", imageUrl, {
+              shouldDirty: true,
+            })
+          }
+          className="size-32"
+        />
+      </div>
 
       <FormField
         control={control}

diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
@@ -3,15 +3,14 @@
 import { getPinataKey } from "@/actions/getPinataKey";
 import { pinata } from "@/config/pinata.client";
 import { cn } from "@/lib/cssUtils";
-import { CircleNotch, UploadSimple } from "@phosphor-icons/react/dist/ssr";
+import {
+  CircleNotch,
+  UploadSimple,
+  XCircle,
+} from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
 import { type InputHTMLAttributes, useCallback, useRef, useState } from "react";
-import {
-  type FieldValues,
-  type Path,
-  useController,
-  useFormContext,
-} from "react-hook-form";
+import { toast } from "sonner";
 import { Button, type ButtonProps } from "./ui/Button";
 
 type Props = Omit<ButtonProps, "variant" | "onClick" | "onError"> & {
@@ -49,6 +48,11 @@ export const ImageUploader = ({
       }
     },
     onError: (error) => {
+      toast("Upload error", {
+        description: error.message,
+        icon: <XCircle weight="fill" className="text-icon-error" />,
+      });
+
       if (typeof onError === "function") {
         onError(error.message);
       }
@@ -111,41 +115,3 @@ export const ImageUploader = ({
     </Button>
   );
 };
-
-type ControlledProps<TFieldValues extends FieldValues, _TContext> = Omit<
-  Props,
-  "onSuccess" | "onError" | "onFileInputChange"
-> & {
-  fieldName: Path<TFieldValues>;
-};
-
-export const ControlledImageUploader = <
-  TFieldValues extends FieldValues,
-  TContext,
->({
-  fieldName,
-  ...imageUploaderProps
-}: ControlledProps<TFieldValues, TContext>) => {
-  const { control, setError, clearErrors } = useFormContext<TFieldValues>();
-
-  const {
-    field: { onChange },
-  } = useController<TFieldValues>({
-    control,
-    name: fieldName,
-  });
-
-  return (
-    <ImageUploader
-      {...imageUploaderProps}
-      onSuccess={(imageUrl) => onChange(imageUrl)}
-      onError={(errorMessage) =>
-        setError(fieldName, {
-          type: "custom",
-          message: errorMessage,
-        })
-      }
-      onFileInputChange={() => clearErrors(fieldName)}
-    />
-  );
-};