forked from github/plane
120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
// hooks
|
|
import { StateGroupIcon } from "@plane/ui";
|
|
import { IssueUpdateStatus, TIssueOperations } from "components/issues";
|
|
import { useIssueDetail, useProjectState, useUser } from "hooks/store";
|
|
import useReloadConfirmations from "hooks/use-reload-confirmation";
|
|
// components
|
|
import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
|
|
import { IssueDescriptionInput } from "../../description-input";
|
|
import { IssueTitleInput } from "../../title-input";
|
|
import { IssueActivity } from "../issue-activity";
|
|
import { IssueReaction } from "../reactions";
|
|
// ui
|
|
|
|
type Props = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
inboxId: string;
|
|
issueId: string;
|
|
issueOperations: TIssueOperations;
|
|
is_editable: boolean;
|
|
};
|
|
|
|
export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
|
|
const { workspaceSlug, projectId, inboxId, issueId, issueOperations, is_editable } = props;
|
|
// states
|
|
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
|
// hooks
|
|
const { currentUser } = useUser();
|
|
const { projectStates } = useProjectState();
|
|
const {
|
|
issue: { getIssueById },
|
|
} = useIssueDetail();
|
|
const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
|
|
|
|
useEffect(() => {
|
|
if (isSubmitting === "submitted") {
|
|
setShowAlert(false);
|
|
setTimeout(async () => {
|
|
setIsSubmitting("saved");
|
|
}, 3000);
|
|
} else if (isSubmitting === "submitting") {
|
|
setShowAlert(true);
|
|
}
|
|
}, [isSubmitting, setShowAlert, setIsSubmitting]);
|
|
|
|
const issue = issueId ? getIssueById(issueId) : undefined;
|
|
if (!issue) return <></>;
|
|
|
|
const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
|
|
|
|
const issueDescription =
|
|
issue.description_html !== undefined || issue.description_html !== null
|
|
? issue.description_html != ""
|
|
? issue.description_html
|
|
: "<p></p>"
|
|
: undefined;
|
|
|
|
return (
|
|
<>
|
|
<div className="rounded-lg space-y-4">
|
|
<InboxIssueStatus
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
inboxId={inboxId}
|
|
issueId={issueId}
|
|
showDescription
|
|
/>
|
|
|
|
<div className="mb-2.5 flex items-center">
|
|
{currentIssueState && (
|
|
<StateGroupIcon
|
|
className="mr-3 h-4 w-4"
|
|
stateGroup={currentIssueState.group}
|
|
color={currentIssueState.color}
|
|
/>
|
|
)}
|
|
<IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
|
|
</div>
|
|
|
|
<IssueTitleInput
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={issue.project_id}
|
|
issueId={issue.id}
|
|
isSubmitting={isSubmitting}
|
|
setIsSubmitting={(value) => setIsSubmitting(value)}
|
|
issueOperations={issueOperations}
|
|
disabled={!is_editable}
|
|
value={issue.name}
|
|
/>
|
|
|
|
<IssueDescriptionInput
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={issue.project_id}
|
|
issueId={issue.id}
|
|
value={issueDescription}
|
|
initialValue={issueDescription}
|
|
disabled={!is_editable}
|
|
issueOperations={issueOperations}
|
|
setIsSubmitting={(value) => setIsSubmitting(value)}
|
|
/>
|
|
|
|
{currentUser && (
|
|
<IssueReaction
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
issueId={issueId}
|
|
currentUser={currentUser}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pb-12">
|
|
<IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
|
|
</div>
|
|
</>
|
|
);
|
|
});
|