From fa4e87238a31958e7368b5717f0ab0af114a6883 Mon Sep 17 00:00:00 2001
From: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Date: Mon, 4 Dec 2023 18:47:24 +0530
Subject: [PATCH] fix: alert box state

---
 web/components/issues/description-form.tsx                | 7 +++----
 .../issues/issue-peek-overview/issue-detail.tsx           | 7 +++----
 web/components/issues/issue-peek-overview/view.tsx        | 2 ++
 web/components/issues/main-content.tsx                    | 4 +++-
 .../projects/[projectId]/issues/[issueId].tsx             | 8 ++++++--
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 0d6a6f11c..b7435048e 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -2,7 +2,6 @@ import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useReloadConfirmations from "hooks/use-reload-confirmation";
 import debounce from "lodash/debounce";
 // components
 import { TextArea } from "@plane/ui";
@@ -27,12 +26,13 @@ export interface IssueDetailsProps {
   workspaceSlug: string;
   handleFormSubmit: (value: IssueDescriptionFormValues) => Promise<void>;
   isAllowed: boolean;
+  setShowAlert: (value: boolean) => void;
 }
 
 const fileService = new FileService();
 
 export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
-  const { issue, handleFormSubmit, workspaceSlug, isAllowed } = props;
+  const { issue, handleFormSubmit, workspaceSlug, isAllowed,setShowAlert } = props;
   // states
   const [characterLimit, setCharacterLimit] = useState(false);
 
@@ -41,7 +41,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     projectIssues: { setIsSubmitting },
   } = useMobxStore();
 
-  const { setShowAlert } = useReloadConfirmations();
   const editorSuggestion = useEditorSuggestions();
 
   const {
@@ -87,7 +86,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
   }, [issue, reset]);
 
   const debouncedFormSave = debounce(async () => {
-    handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+    handleSubmit(handleDescriptionFormSubmit)();
   }, 1500);
 
   return (
diff --git a/web/components/issues/issue-peek-overview/issue-detail.tsx b/web/components/issues/issue-peek-overview/issue-detail.tsx
index 42e3ed1b9..5083cfc2d 100644
--- a/web/components/issues/issue-peek-overview/issue-detail.tsx
+++ b/web/components/issues/issue-peek-overview/issue-detail.tsx
@@ -7,7 +7,6 @@ import { TextArea } from "@plane/ui";
 import { IssueReaction } from "./reactions";
 // hooks
 import debounce from "lodash/debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
 // types
 import { IIssue } from "types";
@@ -25,14 +24,15 @@ interface IPeekOverviewIssueDetails {
   issueUpdate: (issue: Partial<IIssue>) => void;
   issueReactionCreate: (reaction: string) => void;
   issueReactionRemove: (reaction: string) => void;
+  setShowAlert: (value: boolean) => void;
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
-  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props;
+  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove,setShowAlert } = props;
   // store
   const {
     user: userStore,
-    projectIssues: { isSubmitting, setIsSubmitting },
+    projectIssues: { setIsSubmitting },
   } = useMobxStore();
   const { currentProjectRole } = userStore;
   const isAllowed = [15, 20].includes(currentProjectRole || 0);
@@ -40,7 +40,6 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
   const [characterLimit, setCharacterLimit] = useState(false);
 
   // hooks
-  const { setShowAlert } = useReloadConfirmations();
   const editorSuggestions = useEditorSuggestions();
 
   const {
diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
index fc0d8e072..26e31521c 100644
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -287,6 +287,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           <div className="absolute top-0 left-0 h-full min-h-full w-full z-[9] flex items-center justify-center bg-custom-background-100 opacity-60" />
                         )}
                         <PeekOverviewIssueDetails
+                          setShowAlert={(value) => setShowAlert(value)}
                           workspaceSlug={workspaceSlug}
                           issue={issue}
                           issueUpdate={issueUpdate}
@@ -321,6 +322,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <div className="relative w-full h-full space-y-6 p-4 py-5 overflow-auto">
                           <div className={isArchived ? "pointer-events-none" : ""}>
                             <PeekOverviewIssueDetails
+                              setShowAlert={(value) => setShowAlert(value)}
                               workspaceSlug={workspaceSlug}
                               issue={issue}
                               issueReactions={issueReactions}
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index 413e931b6..6bc16575a 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -31,6 +31,7 @@ type Props = {
   issueDetails: IIssue;
   submitChanges: (formData: Partial<IIssue>) => Promise<void>;
   uneditable?: boolean;
+  setShowAlert: (value: boolean) => void;
 };
 
 // services
@@ -38,7 +39,7 @@ const issueService = new IssueService();
 const issueCommentService = new IssueCommentService();
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
-  const { issueDetails, submitChanges, uneditable = false } = props;
+  const { issueDetails, submitChanges, uneditable = false,  setShowAlert } = props;
 
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -195,6 +196,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         </div>
 
         <IssueDescriptionForm
+        setShowAlert={setShowAlert}
           workspaceSlug={workspaceSlug as string}
           issue={issueDetails}
           handleFormSubmit={submitChanges}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index aa8c753a5..1d441da30 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { useForm } from "react-hook-form";
 import { useMobxStore } from "lib/mobx/store-provider";
-import { observer } from "mobx-react-lite/dist/observer";
+import { observer } from "mobx-react-lite";
 // services
 import { IssueService } from "services/issue";
 // layouts
@@ -142,7 +142,11 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
       ) : issueDetails && projectId ? (
         <div className="flex h-full overflow-hidden">
           <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
-            <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
+            <IssueMainContent
+              setShowAlert={(value) => setShowAlert(value)}
+              issueDetails={issueDetails}
+              submitChanges={submitChanges}
+            />
           </div>
           <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">
             <IssueDetailsSidebar