fix: alert box state

This commit is contained in:
LAKHAN BAHETI 2023-12-04 18:47:24 +05:30
parent 85d295b21d
commit fa4e87238a
5 changed files with 17 additions and 11 deletions

View File

@ -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 (

View File

@ -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 {

View File

@ -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}

View File

@ -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}

View File

@ -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