From 6d1a99846df07d4074173e031ccf40772757d3fa Mon Sep 17 00:00:00 2001 From: LAKHAN BAHETI Date: Mon, 4 Dec 2023 21:56:39 +0530 Subject: [PATCH] refactor: useEffect placement --- .../issue-peek-overview/issue-detail.tsx | 20 +++++++++++++---- .../issues/issue-peek-overview/view.tsx | 15 +------------ web/components/issues/main-content.tsx | 19 +++++++++++++--- .../archived-issues/[archivedIssueId].tsx | 18 +-------------- .../projects/[projectId]/issues/[issueId].tsx | 22 +------------------ 5 files changed, 35 insertions(+), 59 deletions(-) diff --git a/web/components/issues/issue-peek-overview/issue-detail.tsx b/web/components/issues/issue-peek-overview/issue-detail.tsx index 5083cfc2d..4941c3e43 100644 --- a/web/components/issues/issue-peek-overview/issue-detail.tsx +++ b/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) => void; issueReactionCreate: (reaction: string) => void; issueReactionRemove: (reaction: string) => void; - setShowAlert: (value: boolean) => void; } export const PeekOverviewIssueDetails: FC = (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 = (props) = // hooks const editorSuggestions = useEditorSuggestions(); + const { setShowAlert } = useReloadConfirmations(); const { handleSubmit, @@ -80,6 +81,17 @@ export const PeekOverviewIssueDetails: FC = (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; diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx index 4d8e5d147..0585159d2 100644 --- a/web/components/issues/issue-peek-overview/view.tsx +++ b/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 = 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 = observer((props) => {
)} setShowAlert(value)} workspaceSlug={workspaceSlug} issue={issue} issueUpdate={issueUpdate} @@ -326,7 +314,6 @@ export const IssueView: FC = observer((props) => {
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 f1805af61..50cabf882 100644 --- a/web/components/issues/main-content.tsx +++ b/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) => Promise; uneditable?: boolean; - setShowAlert: (value: boolean) => void; }; // services @@ -39,18 +40,20 @@ const issueService = new IssueService(); const issueCommentService = new IssueCommentService(); export const IssueMainContent: React.FC = 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 = observer((props) => { }) ); }; + useEffect(() => { + if (isSubmitting === "submitted") { + setShowAlert(false); + setTimeout(async () => { + setIsSubmitting("saved"); + }, 2000); + } else if (isSubmitting === "submitting") { + setShowAlert(true); + } + }, [isSubmitting, setShowAlert]); return ( <> diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx index eae24c1f7..9357ba2bb 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx +++ b/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(() => {
)}
- setShowAlert(value)} - issueDetails={issueDetails} - submitChanges={submitChanges} - uneditable - /> +
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx index b648953b9..751b1c6d0 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx +++ b/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 ? (
- setShowAlert(value)} - issueDetails={issueDetails} - submitChanges={submitChanges} - /> +