From acff6396f9b3a5ee01f5ed25a8c3345a74e2390b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 18 Apr 2023 01:15:39 +0530
Subject: [PATCH] chore: create/update state duplicate name error (#870)

---
 .../components/states/create-state-modal.tsx  | 22 +++++---
 .../states/create-update-state-inline.tsx     | 51 ++++++++++++-------
 .../components/states/delete-state-modal.tsx  | 10 ++--
 apps/app/services/state.service.ts            |  4 +-
 4 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
index 4284af6a7..ca19cd752 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -12,6 +12,8 @@ import { TwitterPicker } from "react-color";
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
 import stateService from "services/state.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // icons
@@ -41,6 +43,8 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const {
     register,
     formState: { errors, isSubmitting },
@@ -48,7 +52,6 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
     watch,
     control,
     reset,
-    setError,
   } = useForm<IState>({
     defaultValues,
   });
@@ -67,16 +70,23 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
 
     await stateService
       .createState(workspaceSlug as string, projectId, payload)
-      .then((res) => {
+      .then(() => {
         mutate(STATE_LIST(projectId));
         onClose();
       })
       .catch((err) => {
-        Object.keys(err).map((key) => {
-          setError(key as keyof IState, {
-            message: err[key].join(", "),
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Another state exists with the same name. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "State could not be created. Please try again.",
           });
-        });
       });
   };
 
diff --git a/apps/app/components/states/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
index 0fe766c60..d9e726379 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -47,7 +47,6 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    setError,
     watch,
     reset,
     control,
@@ -89,39 +88,55 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           handleClose();
 
           setToastAlert({
-            title: "Success",
             type: "success",
-            message: "State created successfully",
+            title: "Success!",
+            message: "State created successfully.",
           });
         })
         .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof IState, {
-              message: err[key].join(", "),
+          if (err.status === 400)
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message:
+                "Another state exists with the same name. Please try again with another name.",
+            });
+          else
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "State could not be created. Please try again.",
             });
-          });
         });
     } else {
       await stateService
         .updateState(workspaceSlug as string, projectId as string, data.id, {
           ...payload,
         })
-        .then((res) => {
+        .then(() => {
           mutate(STATE_LIST(projectId as string));
           handleClose();
 
           setToastAlert({
-            title: "Success",
             type: "success",
-            message: "State updated successfully",
+            title: "Success!",
+            message: "State updated successfully.",
           });
         })
         .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof IState, {
-              message: err[key].join(", "),
+          if (err.status === 400)
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message:
+                "Another state exists with the same name. Please try again with another name.",
+            });
+          else
+            setToastAlert({
+              type: "error",
+              title: "Error!",
+              message: "State could not be updated. Please try again.",
             });
-          });
         });
     }
   };
@@ -131,18 +146,18 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
       onSubmit={handleSubmit(onSubmit)}
       className="flex items-center gap-x-2 rounded-[10px] bg-white p-5"
     >
-      <div className="h-8 w-8 flex-shrink-0">
-        <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
+      <div className="flex-shrink-0">
+        <Popover className="relative flex h-full w-full items-center justify-center">
           {({ open }) => (
             <>
               <Popover.Button
-                className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
                   open ? "text-gray-900" : "text-gray-500"
                 }`}
               >
                 {watch("color") && watch("color") !== "" && (
                   <span
-                    className="h-4 w-4 rounded"
+                    className="h-5 w-5 rounded"
                     style={{
                       backgroundColor: watch("color") ?? "black",
                     }}
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index a3b09d0ec..d1eca3a93 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -119,10 +119,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
-                          Are you sure you want to delete state- {" "}
-                          <span className="italic">{data?.name}</span>
-                          ? All of the data related to the state will be permanently removed.
-                          This action cannot be undone.
+                          Are you sure you want to delete state-{" "}
+                          <span className="italic">{data?.name}</span>? All of the data related to
+                          the state will be permanently removed. This action cannot be undone.
                         </p>
                       </div>
                       <div className="mt-2">
@@ -140,7 +139,8 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton
                     onClick={handleDeletion}
-                    loading={isDeleteLoading || issuesWithThisStateExist}
+                    disabled={issuesWithThisStateExist}
+                    loading={isDeleteLoading}
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}
                   </DangerButton>
diff --git a/apps/app/services/state.service.ts b/apps/app/services/state.service.ts
index 61cfd4d25..69f30a3dc 100644
--- a/apps/app/services/state.service.ts
+++ b/apps/app/services/state.service.ts
@@ -22,7 +22,7 @@ class ProjectStateServices extends APIService {
         return response?.data;
       })
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }
 
@@ -66,7 +66,7 @@ class ProjectStateServices extends APIService {
         return response?.data;
       })
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }