fix: cant update works when work is maxed

comimafun · Jul 22, 2024 · 451a4f5 · 451a4f5
1 parent d08b087
commit 451a4f5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/src/components/circle/detail-page/EditProducts.tsx b/src/components/circle/detail-page/EditProducts.tsx
@@ -16,6 +16,7 @@ import XCircleIcon from '@/icons/XCircleIcon';
 import { productService } from '@/services/product';
 import { uploadService } from '@/services/upload';
 import { Product } from '@/types/product';
+import { classNames } from '@/utils/classNames';
 import { prettifyError } from '@/utils/helper';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -276,6 +277,11 @@ const ProductList = () => {
               </Button>
               <Button
                 onPress={() => {
+                  form.reset({
+                    id: undefined,
+                    image_url: '',
+                    name: '',
+                  });
                   setDeleteSelected(x);
                   onOpenChange();
                 }}
@@ -308,6 +314,11 @@ function EditProducts() {
     },
   });
 
+  const productsLength = products?.length ?? 0;
+  const id = form.watch('id');
+  const isEditing = !!id;
+  const isDisabled = productsLength >= 5 && !isEditing;
+
   return (
     <EachPageLayout className="space-y-4">
       <div className="flex items-center gap-4">
@@ -320,16 +331,17 @@ function EditProducts() {
         <h1 className="text-xl font-bold">Edit Works Displayed</h1>
       </div>
 
+      <div className="w-full rounded bg-warning p-4 font-semibold">
+        Current maximum product is 5
+      </div>
+
       <FormProvider {...form}>
         <section>
           <form
             onSubmit={form.handleSubmit(async (payload) => {
               if (!data?.id) return;
 
               try {
-                if ((products?.length ?? 0) >= 5) {
-                  throw new Error('You can only add up to 5 products');
-                }
                 if (payload.id) {
                   await updateMutation.mutateAsync({
                     circleID: data.id,
@@ -338,6 +350,10 @@ function EditProducts() {
 
                   toast.success('Works updated ✅');
                 } else {
+                  if (productsLength >= 5) {
+                    throw new Error('You can only add 5 wowrks');
+                  }
+
                   await addMutation.mutateAsync({
                     circleID: data.id,
                     ...payload,
@@ -369,6 +385,7 @@ function EditProducts() {
                       variant="underlined"
                       placeholder='e.g. "Commision examples"'
                       size="sm"
+                      isDisabled={isDisabled}
                       {...field}
                     />
                   );
@@ -454,13 +471,26 @@ function EditProducts() {
                             setIsUploading(false);
                           }
                         }}
-                        className="flex w-full flex-col"
+                        className="flex w-full flex-col disabled:cursor-not-allowed"
+                        disabled={isDisabled}
                       >
-                        <div className="group:hover:bg-blue-500 group flex h-full max-h-[200px] w-full flex-col items-center justify-center bg-blue-100 transition-all delay-100 hover:bg-blue-500">
+                        <div
+                          className={classNames(
+                            'group:hover:bg-blue-500 group flex h-full max-h-[200px] w-full flex-col items-center justify-center bg-blue-100 transition-all delay-100',
+                            isDisabled
+                              ? 'cursor-not-allowed'
+                              : 'hover:bg-blue-500',
+                          )}
+                        >
                           <ImageIcon
                             width={24}
                             height={24}
-                            className="text-blue-500 delay-100 group-hover:text-white"
+                            className={classNames(
+                              'text-blue-500 delay-100',
+                              isDisabled
+                                ? 'cursor-not-allowed'
+                                : 'group-hover:text-white',
+                            )}
                           />
                         </div>
                       </Uploader>
@@ -478,7 +508,7 @@ function EditProducts() {
                         type="submit"
                         size="sm"
                         isLoading={isUploading}
-                        isDisabled={isUploading}
+                        isDisabled={isUploading || isDisabled}
                       >
                         {!!field.value ? 'Update' : 'Add'}
                       </Button>

diff --git a/src/components/general/Editor/index.tsx b/src/components/general/Editor/index.tsx
@@ -326,7 +326,7 @@ const ImageMenu = () => {
           }
           const { data } = await uploadService.uploadImage({
             file,
-            type: 'profiles',
+            type: 'descriptions',
           });
 
           editor.chain().focus().setImage({ src: data, alt: file.name }).run();

diff --git a/src/services/upload.ts b/src/services/upload.ts
@@ -10,7 +10,7 @@ export const uploadService = {
     type,
   }: {
     file: File;
-    type: 'covers' | 'products' | 'profiles';
+    type: 'covers' | 'products' | 'profiles' | 'descriptions';
   }) => {
     const formData = new FormData();
     formData.append('file', file);