refactor: useEffect placement

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -1,5 +1,7 @@
 import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useMobxStore } from "lib/mobx/store-provider";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // packages
 import { RichTextEditor } from "@plane/rich-text-editor";
 // components
@@ -12,7 +14,6 @@ import useEditorSuggestions from "hooks/use-editor-suggestions";
 import { IIssue } from "types";
 // services
 import { FileService } from "services/file.service";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 const fileService = new FileService();
 
@@ -24,15 +25,14 @@ 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,setShowAlert } = props;
+  const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props;
   // store
   const {
     user: userStore,
-    projectIssues: { setIsSubmitting },
+    projectIssues: { isSubmitting, setIsSubmitting },
   } = useMobxStore();
   const { currentProjectRole } = userStore;
   const isAllowed = [15, 20].includes(currentProjectRole || 0);
@@ -41,6 +41,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
 
   // hooks
   const editorSuggestions = useEditorSuggestions();
+  const { setShowAlert } = useReloadConfirmations();
 
   const {
     handleSubmit,
@@ -80,6 +81,17 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     handleSubmit(handleDescriptionFormSubmit)();
   }, 1500);
 
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
+
   // reset form values
   useEffect(() => {
     if (!issue) return;

web/components/issues/issue-peek-overview/view.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useEffect, useState } from "react";
+import { FC, ReactNode, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -143,17 +143,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const currentMode = peekOptions.find((m) => m.key === peekMode);
 
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
   return (
     <>
       {issue && !isArchived && (
@@ -291,7 +280,6 @@ 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}
@@ -326,7 +314,6 @@ 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}

web/components/issues/main-content.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
@@ -8,6 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import {
   AddComment,
@@ -31,7 +33,6 @@ type Props = {
   issueDetails: IIssue;
   submitChanges: (formData: Partial<IIssue>) => Promise<void>;
   uneditable?: boolean;
-  setShowAlert: (value: boolean) => void;
 };
 
 // services
@@ -39,18 +40,20 @@ const issueService = new IssueService();
 const issueCommentService = new IssueCommentService();
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
-  const { issueDetails, submitChanges, uneditable = false, setShowAlert } = props;
+  const { issueDetails, submitChanges, uneditable = false } = props;
 
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
+  // hooks
   const { setToastAlert } = useToast();
+  const { setShowAlert } = useReloadConfirmations();
 
   const {
     user: userStore,
     project: projectStore,
     projectState: { states },
-    projectIssues: { isSubmitting },
+    projectIssues: { isSubmitting, setIsSubmitting },
   } = useMobxStore();
   const user = userStore.currentUser ?? undefined;
   const userRole = userStore.currentProjectRole;
@@ -109,6 +112,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         })
       );
   };
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert]);
 
   return (
     <>

web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx

@@ -139,17 +139,6 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
       .finally(() => setIsRestoring(false));
   };
 
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
   return (
     <>
       {issueDetails && projectId ? (
@@ -173,12 +162,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
               </div>
             )}
             <div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60 pointer-events-none">
-              <IssueMainContent
+              <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} uneditable />
-                setShowAlert={(value) => setShowAlert(value)}
-                issueDetails={issueDetails}
-                submitChanges={submitChanges}
-                uneditable
-              />
             </div>
           </div>
           <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -11,8 +11,6 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { ProjectIssueDetailsHeader } from "components/headers";
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
-// hooks
-import useReloadConfirmations from "hooks/use-reload-confirmation";
 // ui
 import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
@@ -50,9 +48,6 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
     projectIssues: { isSubmitting, setIsSubmitting },
   } = useMobxStore();
 
-  // hooks
-  const { setShowAlert } = useReloadConfirmations();
-
   const {
     data: issueDetails,
     mutate: mutateIssueDetails,
@@ -116,17 +111,6 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
     });
   }, [issueDetails, reset, issueId]);
 
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
   return (
     <>
       {" "}
@@ -143,11 +127,7 @@ 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
+            <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
-              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