feat: can't delete state with issues

apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx

@@ -9,6 +9,8 @@ import stateServices from "lib/services/state.service";
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
+// common
+import { groupBy } from "constants/common";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
@@ -25,7 +27,9 @@ type Props = {
 const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace } = useUser();
+  const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
+
+  const { activeWorkspace, issues } = useUser();
 
   const cancelButtonRef = useRef(null);
 
@@ -36,7 +40,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !activeWorkspace || issuesWithThisStateExist) return;
     await stateServices
       .deleteState(activeWorkspace.slug, data.project, data.id)
       .then(() => {
@@ -53,6 +57,12 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
       });
   };
 
+  const groupedIssues = groupBy(issues?.results ?? [], "state");
+
+  useEffect(() => {
+    if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
+  }, [groupedIssues]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
@@ -105,6 +115,14 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
                           This action cannot be undone.
                         </p>
                       </div>
+                      <div className="mt-2">
+                        {issuesWithThisStateExist && (
+                          <p className="text-sm text-red-500">
+                            There are issues with this state. Please move them to another state
+                            before deleting this state.
+                          </p>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -113,7 +131,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || issuesWithThisStateExist}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}