chore: create/update state duplicate name error (#870)

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,15 +70,22 @@ 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) => {
+        if (err.status === 400)
-          setError(key as keyof IState, {
+          setToastAlert({
-            message: err[key].join(", "),
+            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.",
           });
       });
   };

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,16 +88,24 @@ 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) => {
+          if (err.status === 400)
-            setError(key as keyof IState, {
+            setToastAlert({
-              message: err[key].join(", "),
+              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 {
@@ -106,21 +113,29 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
         .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) => {
+          if (err.status === 400)
-            setError(key as keyof IState, {
+            setToastAlert({
-              message: err[key].join(", "),
+              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">
+      <div className="flex-shrink-0">
-        <Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
+        <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",
                     }}

apps/app/components/states/delete-state-modal.tsx

@@ -120,9 +120,8 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                       <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>
+                          <span className="italic">{data?.name}</span>? All of the data related to
-                          ? All of the data related to the state will be permanently removed.
+                          the state will be permanently removed. This action cannot be undone.
-                          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>

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;
       });
   }